-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtofrom.html
229 lines (204 loc) · 10.7 KB
/
tofrom.html
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE HTML>
<html>
<head>
<title>ToFrom Project</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--favicons-->
<!-- generics -->
<link rel="icon" href="favicon/favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon/favicon-57.png" sizes="57x57">
<link rel="icon" href="favicon/favicon-76.png" sizes="76x76">
<link rel="icon" href="favicon/favicon-96.png" sizes="96x96">
<link rel="icon" href="favicon/favicon-128.png" sizes="128x128">
<link rel="icon" href="favicon/favicon-228.png" sizes="228x228">
<!-- Android -->
<!-- <link rel="shortcut icon" sizes="196x196" href=“favicon/favicon-196.png"> -->
<!-- iOS -->
<link rel="apple-touch-icon" href="favicon/favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="favicon/favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="favicon/favicon-180.png" sizes="180x180">
<!-- Windows 8 IE 10-->
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="favicon/favicon-144.png">
<!— Windows 8.1 + IE11 and above —>
<meta name="msapplication-config" content="favicon/browserconfig.xml" />
<!-- Hotjar -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:756515,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#one" class="active">Projects</a></li>
<!-- <li><a href="index.html#two">Get in Touch</a></li> -->
</ul>
</nav>
</div>
</header>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main Intro -->
<section id="main" class="tofrom wrapper generic fade-up">
<div class="inner">
<ul class="project-intro">
<h2 class="major">ToFrom by Rokitt</h2>
<p>I was the lead UX designer for this travel planning app with aims to help simplify the way we search and book travel experiences. Our platform uses AI to offer the most relevant travel experiences for customers. I was a part of the founding team that worked on this innovative product.</p>
</ul>
</div>
</section>
<!-- Main-two Screens (project introduction)-->
<section id="main-two" class="wrapper generic fade-up">
<div class="inner">
<span class="image fit"><img src="images/tofrom-website-1.jpg" alt="" /></span>
</div>
</section>
<!-- Main-two Screens (project introduction end)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Personalization:</strong> Tailoring the product</h3>
<p>ToFrom believes that trip planning should be simple and fun. Most travel booking sites offer a negative user experience, giving the user too many search options and confusing them too much information. To make travel booking simple, we used a personalization algorithm and asked users to create search personas prior to beginning their search since this was unlikely to change post first time user experience.</p>
<br>
<span class="image fit"><img src="images/tofrom-website-2.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Onboarding:</strong> Creating a memorable first time user experience</h3>
<p>The onboarding experience for ToFrom was one of our biggest differentiators. Creating a simple experience was crucial. We decided to play up the emotional factor by using a light color palette and used playful copy to convey the joy that should come with travel planning.</p>
<br>
<span class="image fit"><img src="images/tofrom-website-3.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Flight search:</strong> Creating a sense of context</h3>
<p>From our customer interviews, we realized that a major problem for most customers was losing contextual awareness. A UI that kept users in context in trip planning workflow was important. To solve this problem, we designed a trip planning wizard customers could use to navigate between the different stages of trip planning. </p>
<br>
<span class="image fit"><img src="images/tofrom-website-4.jpg" alt="" /></span>
<br>
<p>Finalized design</p>
<span class="image fit"><img src="images/tofrom-website-5.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Hotel search:</strong> Creating consistency</h3>
<p>We used a custom design library to create consistency between the flight and hotel booking process.</p>
<br>
<span class="image fit"><img src="images/tofrom-website-6.jpg" alt="" /></span>
<br>
<p>Finalized design</p>
<span class="image fit"><img src="images/tofrom-website-7.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Hotel search details:</strong> Larger images for the Indian market</h3>
<p>We researched potential customers from our initial market of India and learned that customers in the region made hotel booking decisions based on a combination of image quality and price. As a result of this study, we made images a key part of their user experience. Understanding the local market gave us valuable insight which we used in our designs.</p>
<br>
<span class="image fit"><img src="images/tofrom-website-8.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main-two Screens (begin project sections)-->
<section id="main-two" class="wrapper generic fade-up">
<!-- <span class="image fit"><img src="images/protoytpe-workframe-1.jpg" alt="" /></span> -->
<!--Objectives block-->
<hr>
<div class="inner">
<h3><strong>Mobile design:</strong> Indian mobile market</h3>
<p>India is the world’s second largest smartphone market. We needed to understand how mobile fit into the trip-booking process. Our research indicated that a significant portion of our intended target audience only used smartphones to search for trips, but went with desktops to filnalize the book process. This understanding helped us with product strategy and roadmaps.</p>
<br>
<span class="image fit"><img src="images/tofrom-mobile-1.jpg" alt="" /></span>
<br>
<span class="image fit"><img src="images/tofrom-mobile-2.jpg" alt="" /></span>
<br>
</div>
</section>
<!-- Main-two Screens (end project sections)-->
<!-- Main Screens (media links) -->
<section id="main" class="wrapper tofrom fade-up">
<div class="inner">
<ul class="contact">
<li>
<h4>Media Links</h4>
<p><a href="https://www.crunchbase.com/organization/tofrom" target="_blank">Crunchbase</a></p>
<p><a href="https://twitter.com/tofromtravel" target="_blank">Twitter</a></p>
</li>
</ul>
</div>
</section>
<!-- Wrapper -->
</div>
<!-- Footer -->
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<ul class="menu">
<li>© David Chan. All rights reserved.</li><li> Made with ❤ in New York</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<!-- Intercom -->
<script>
window.intercomSettings = {
app_id: "emgrzfru"
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/emgrzfru';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
</script>
</body>
</html>