-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathservice-map.html
More file actions
160 lines (145 loc) · 8.11 KB
/
service-map.html
File metadata and controls
160 lines (145 loc) · 8.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Journey Map for Luxe Valet - Rob Tapella</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header">
<a href="index.html" class="logo">ROB TAPELLA</a>
<nav class="nav">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<div class="dropdown">
<a href="#" class="dropbtn active">WORK</a>
<div class="dropdown-content">
<a href="methane.html">Methane Map Web Site</a>
<a href="data-dashboard.html">DNA Sequencing Data Dashboard</a>
<a href="rna-quantification.html">RNA Quantification Reagent</a>
<a href="service-map.html" class="active">Service Journey Map</a>
</div>
</div>
</nav>
</header>
<!-- Hero Section with Image -->
<div class="hero-image-container">
<img src="images/luxe-hero.jpg" alt="Luxe Valet Service Journey Map" class="hero-image">
<div class="hero-overlay">
<h1>Service Journey Map for Luxe Valet</h1>
</div>
</div>
<div class="grid-container">
<!-- Left Sidebar -->
<aside class="left-sidebar">
<div class="content-section">
<h2 class="section-title">MY ACTIVITIES</h2>
<div class="section-content">
<ul>
<li>Project lead</li>
<li>Ran journey map exercises with Luxe operations and product management team</li>
<li>Interviewed Luxe customers</li>
<li>Advised valet persona team</li>
</ul>
</div>
</div>
<div class="content-section">
<h2 class="section-title">TOOLS</h2>
<div class="section-content">
<ul>
<li>Pen & paper</li>
<li>Whiteboards</li>
<li>Index cards</li>
<li>Masking tape</li>
<li>Google Slides</li>
</ul>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<div class="content-section">
<!-- Title removed from here as it's now in the hero section -->
<div class="section-content">
<p>Our three-person team created a service journey map for the Luxe Valet product—a now-defunct
valet-parking on-demand app. We felt that Luxe would benefit from a comprehensive visualization
of their service, which has a variety of actors such as the customer, valets, valet
shift-captains, customer support, and back-end computer systems.</p>
<p>Included in the journey map was a representation of the various people involved, plus the
"triggers" such as phone apps and the car and keys. These became "swim-lanes" in the
visualizations of the service journey. Additionally, we described the emotional journey for the
customer and for the valet at moments of truth, and mapped pain points to the service map. The
map covered the entire first-time user experience.</p>
<p>Our team worked with various Luxe personnel to understand how the various participants in the
service interact. We were then able to relate user research with the customers and valets to the
journey map. The journey map is a great place for the in-house product team at Luxe to discuss
service improvements, and to visually map out the impacts of changes.</p>
</div>
</div>
<div class="project-image-container">
<img src="images/luxe-service-board.jpeg"
alt="The analog version of the sticky-notes in swim-lanes for each actor" class="project-image">
<p class="image-caption">The analog version of the sticky-notes in swim-lanes for each actor.</p>
</div>
<div class="project-image-container">
<img src="images/luxe-service-table.jpeg" alt="Rob and Laci recording steps in the journey"
class="project-image">
<p class="image-caption">Rob and Laci recording steps in the journey.</p>
</div>
<div class="content-section">
<h2 class="section-title">DELIVERABLES</h2>
<div class="section-content">
<p>Included in the deliverables were three formats of journey map. The first is a stylized version
in Illustrator, which provides an easy-to-read visual snapshot of the current state of the
service.</p>
<p>The second and third are digital and analog sticky-it notes. The digital version is in Google
Slides with the steps for all actors, plus user stories for the customer and valet at each step.
</p>
<p>A journey map is a great tool to help understand a service and to find pain points and
opportunities for improvement, but in order for it to have maximum utility it must be in a
format that is easy to update in a collaborative fashion. The analog version was provided for
this purpose.</p>
</div>
</div>
<div class="content-section">
<h2 class="section-title">USING THE JOURNEY MAP</h2>
<div class="section-content">
<p>Now that Luxe has a baseline representation of the interactions within their service, they will
be able to use it to consider the impact of future changes. For example, shortly after this
project was delivered, Luxe introduced tipping for the valets. This will alter the dynamic at
the payment step of the process, and may affect the end of the emotional journey for both the
customer and the valet.</p>
</div>
</div>
<div class="project-image-container">
<img src="images/luxe-map-lowrez.png" alt="The Google Slides version of the journey map, zoomed out"
class="project-image">
<p class="image-caption">The Google Slides version of the journey map, zoomed out (and blurred).</p>
</div>
<div class="project-image-container">
<img src="images/luxe-map-illustration.png"
alt="A small snippet of the Illustrator version of the journey map" class="project-image">
<p class="image-caption">A small snippet of the Illustrator version of the journey map.</p>
</div>
</main>
<!-- Right Sidebar -->
<aside class="right-sidebar">
<div class="content-section">
<h2 class="section-title">ADDITIONAL INFO</h2>
<div class="section-content">
<p>My team members on the project were Laci White and Kristen Sunde.</p>
<p>Kristen created an Illustrator version of the journey map, which the team had designed in
whiteboard sketches.</p>
<p><em>The findings of this project are under NDA.</em></p>
</div>
</div>
</aside>
</div>
<script src="js/script.js"></script>
<script src="js/dropdown.js"></script>
</body>
</html>