-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBackTracker.html
More file actions
217 lines (194 loc) · 18.4 KB
/
Copy pathBackTracker.html
File metadata and controls
217 lines (194 loc) · 18.4 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
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
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="main.css"/>
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon"
type="image/jpg"
href="logo.jpg">
<script type="text/javascript" src="script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Henry Latham: BackTracker</title>
<!-- Add metadata once complete -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Add navigation if I want to add transitions or interactivity. Maybe add swipe (based on Material Design) on mobile/tablet -->
<div class="header">
<a href="./"><img class="logo" title="Henry Latham (c)" src="logo.jpg"></a>
<ul class="header-list">
<li class="workabout">
<a href="./">WORK</a>
</li>
<li class="workabout">
<a href="about">ABOUT</a>
</li>
<li id="contact-list-item">
<a href="mailto:henry@henrylatham.me?Subject=Website%20enquiry" target="_top" style="color: #0077ff;">CONTACT</a>
</li>
</ul>
</div>
<!-- Main Content -->
<div class="post">
<div class="view-post-description">
<h1 class="view-post-title">
BackTracker
</h1>
<h3 class="view-post-subtitle">
Product Manager & founder at a travel start-up
</h3>
</div>
<div class="post-preview">
<img src="/BackTracker/BackTracker1-mobile.jpg" alt="First Post: BackTracker" srcset="/BackTracker/BackTracker1-mobile.jpg 667w, /BackTracker/BackTracker1-desktop.jpg 1024w, /BackTracker/BackTracker1-desktop.jpg 1200w, /BackTracker/BackTracker1-hd.jpg 1201w">
</div>
<div class="problem-ideation-execution">
<h2 class="view-post-section-heading">
Problem
</h2>
</div>
<div class="description">
<p>Whilst backpacking in rural Brazil for 3 months, it quickly became apparent that there was nothing online that specifically catered for the 30m annual backpacking market.</p>
<p>Physical travel guides became rapidly out-dated and were detached, lacking the social validation & user-generated content millennials are accustomed to consuming.</p>
<p>Facebook allowed you to stay in touch, yes, but failed to cater for the dynamic nature of backpacking to track each other’s movements.</p>
<p>So, I had a concept, but one (slight) problem was a lack of technical knowledge. Where to start?</p>
<p>Upon returning for my final year at university, I spent the entire year learning to design & manage web & app builds.</p>
<p>After codifying the concept, I brought in a team of five developers, a business development manager & content manager, as well as building a strong network of mentors through our London accelerator programme.</p>
</div>
<div class="post-preview">
<img src="/BackTracker/BackTracker2-mobile.jpg" alt="Second Post: BackTracker" srcset="/BackTracker/BackTracker2-mobile.jpg 667w, /BackTracker/BackTracker2-desktop.jpg 1024w, /BackTracker/BackTracker2-desktop.jpg 1200w, /BackTracker/BackTracker2-hd.jpg 1201w">
</div>
<div class="content-width">
<div class="problem-ideation-execution">
<h2 class="view-post-section-heading">
Ideation & Role
</h2>
</div>
<div class="description">
<p>Having played around with ideas numerous times during my travels, I struck upon a final concept once back in the UK:</p>
<p>Plot your journey, track your friends & share your experiences.</p>
<p>The idea was to marry a dynamic, map-based blog with a trail of user-generated suggestions in all backpacking destinations.</p>
<p>The aim was to provide information for every aspect of your trip from arrival to departure.</p>
<hr class ="hr-short">
<p>My role evolved throughout our 2-year involvement with BackTracker.</p>
<p>I started as CEO, managing content, a development team and our growth strategy - as well as working as our principle designer.</p>
<p>After a year, however, I realised that this was too much and, if I wanted to master one skill and do it well, it must be design.</p>
<p>I therefore stepped down in order to focus on product development, honing my UX/UI skills, technical knowledge and managing the development team more closely.</p>
<p>I was responsible for product development, managing an Android, iOS, web & backend development team to enact my vision.</p>
<p>I also conducted qualitative research into user behaviour, user needs & regular usability testing in hostels or over Skype.</p>
</div>
</div>
<div class="post-preview">
<img src="/BackTracker/BackTracker3-mobile.jpg" alt="Third Post: BackTracker" srcset="/BackTracker/BackTracker3-mobile.jpg 667w, /BackTracker/BackTracker3-desktop.jpg 1024w, /BackTracker/BackTracker3-desktop.jpg 1200w, /BackTracker/BackTracker3-hd.jpg 1201w">
</div>
<div class="problem-ideation-execution">
<h2 class="view-post-section-heading">
Execution
</h2>
</div>
<div class="description">
<p>Within 10 days of launching we were featured under the ‘Best New Apps’ category in a number of European countries, including the UK.</p>
<p>Finishing final year exams a few weeks later then allowed us to focus on iteration. With the 12,000 downloads we had, we were able to delve into the data and iterate the product.</p>
<p>We decided to create a leaner product, cutting the journey plotting feature temporarily in order to focus on what we felt was the main hook for users: user-generated, backpacker-specific content.</p>
<p>Using <a href="http://www.alexandercowan.com/the-hook-framework/">The Hook Canvas Model</a>, I focused my efforts on first hooking users in with relevant content, which we determined to constitute unique suggestions near them at that moment.</p>
<p>The focus then shifted towards encouraging user investment (adding their own suggestions, interacting with existing ones, etc.)</p>
<p>In early 2016, the product was acquired by a VC-backed company in the UK, who are currently rebuilding BackTracker with plans to re-launch in late 2016.</p>
</div>
</div>
<!-- Add GIF or MP4 here -->
<div class="video-post-preview">
<div class="post-preview-bg"></div>
<div class="post-preview-phone">
<div class="iphone6-display">
<div class="post-preview-embed-video">
<video preload=auto muted=muted loop autoplay>
<source src="BackTracker4.mp4" type=video/mp4>
</video>
</div>
</div>
</div>
</div>
<!--media="screen and (max-device-width: 1440px)" alt="BackTracker: Travel Guide Transition" height="650px" width="1440px"> Next project section -->
<div class="next">
<hr class="long-line">
<div>
<h5 class="next-project">
Next Project
</h5>
</div>
<div class="next-post-btn">
<a class ="next-post-btn" href="Worldpackers.html">
<h2 class="next-post-btn">
Worldpackers
</h2>
</a>
</div>
</div>
<!-- Footer -->
<footer>
<h5 class="copyright">(c) Henry Latham 2018</h5>
<ul class="footer-icons">
<li class="dribbble">
<a href="https://dribbble.com/henrylatham"><svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>dribble</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.54">
<g id="HomeDesktop" transform="translate(-741.000000, -4051.000000)">
<g id="footer" transform="translate(172.000000, 4034.000000)">
<g id="dribble" transform="translate(560.000000, 8.000000)">
<rect id="Rectangle-8" x="0" y="0" width="48" height="48"></rect>
<g id="dribbble-icon" transform="translate(9.000000, 9.000000)" fill="#000000">
<g id="Layer_1">
<path d="M0,15 C0,12.27999 0.67002,9.77001 2.01,7.47 C3.35001,5.16999 5.17002,3.35001 7.47,2.01 C9.77001,0.66999 12.28002,0 15,0 C17.72001,0 20.23002,0.66999 22.53,2.01 C24.83001,3.35001 26.65002,5.16999 27.99,7.47 C29.33001,9.77001 30,12.27999 30,15 C30,17.72001 29.33001,20.22999 27.99,22.53 C26.65002,24.83001 24.83001,26.64999 22.53,27.99 C20.23002,29.33001 17.72001,30 15,30 C12.28002,30 9.77001,29.33001 7.47,27.99 C5.17002,26.64999 3.35001,24.83001 2.01,22.53 C0.67002,20.22999 0,17.72001 0,15 L0,15 Z M2.49,15 C2.49,18.12 3.54,20.87001 5.64,23.25 C6.6,21.36999 8.12001,19.58001 10.2,17.88 C12.28002,16.17999 14.31,15.11001 16.29,14.67 C15.99,13.97001 15.70002,13.34001 15.42,12.78 C11.98002,13.88001 8.26002,14.43 4.26,14.43 C3.48,14.43 2.90001,14.42001 2.52,14.4 C2.52,14.48001 2.51502,14.58 2.505,14.7 C2.49501,14.82 2.49,14.91999 2.49,15 L2.49,15 Z M2.88,11.91 C3.32001,11.94999 3.97002,11.97 4.83,11.97 C8.17002,11.97 11.34,11.52 14.34,10.62 C12.82002,7.92 11.15001,5.67 9.33,3.87 C7.75002,4.67001 6.39501,5.78001 5.265,7.2 C4.13502,8.61999 3.34002,10.19001 2.88,11.91 L2.88,11.91 Z M7.35,24.87 C9.61002,26.63001 12.16002,27.51 15,27.51 C16.48002,27.51 17.95002,27.23001 19.41,26.67 C19.01001,23.25 18.23001,19.94001 17.07,16.74 C15.23001,17.13999 13.37502,18.15 11.505,19.77 C9.63501,21.39 8.25,23.09001 7.35,24.87 L7.35,24.87 Z M11.94,2.91 C13.70001,4.73001 15.33,6.99999 16.83,9.72 C19.55001,8.58 21.6,7.13001 22.98,5.37 C20.66001,3.45 18,2.49 15,2.49 C13.98,2.49 12.96,2.63001 11.94,2.91 L11.94,2.91 Z M17.91,11.85 C18.21,12.48999 18.55002,13.29999 18.93,14.28 C20.41002,14.13999 22.02,14.07 23.76,14.07 C25.00002,14.07 26.23002,14.1 27.45,14.16 C27.29001,11.43999 26.31,9.02001 24.51,6.9 C23.21001,8.84001 21.01002,10.49001 17.91,11.85 L17.91,11.85 Z M19.68,16.38 C20.7,19.34001 21.39,22.38 21.75,25.5 C23.33001,24.48 24.62001,23.16999 25.62,21.57 C26.62002,19.97001 27.22002,18.24 27.42,16.38 C25.96002,16.28001 24.63,16.23 23.43,16.23 C22.33002,16.23 21.08001,16.28001 19.68,16.38 L19.68,16.38 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg></a>
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/in/henry-latham-a78245a6"><svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>LinkedIn_Logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.54">
<g id="HomeDesktop" transform="translate(-789.000000, -4051.000000)">
<g id="footer" transform="translate(172.000000, 4034.000000)">
<g id="LinkedIn_Logo" transform="translate(608.000000, 8.000000)">
<path d="M9.3354236,36.1782904 C9.3354236,37.3235035 10.2873433,38.2524416 11.4616511,38.2524416 L35.9815928,38.2524416 C37.1558619,38.2524416 38.1078203,37.3235035 38.1078203,36.1782904 L38.1078203,11.3716584 C38.1078203,10.2260584 37.1558619,9.29750722 35.9815928,9.29750722 L11.4616511,9.29750722 C10.2873433,9.29750722 9.3354236,10.2260584 9.3354236,11.3716584 L9.3354236,36.1782904 L9.3354236,36.1782904 Z" id="path14" fill="#006699" transform="translate(23.721622, 23.774974) scale(1, -1) translate(-23.721622, -23.774974) "></path>
<path d="M9.3354236,36.1782904 C9.3354236,37.3235035 10.2873433,38.2524416 11.4616511,38.2524416 L35.9815928,38.2524416 C37.1558619,38.2524416 38.1078203,37.3235035 38.1078203,36.1782904 L38.1078203,11.3716584 C38.1078203,10.2260584 37.1558619,9.29750722 35.9815928,9.29750722 L11.4616511,9.29750722 C10.2873433,9.29750722 9.3354236,10.2260584 9.3354236,11.3716584 L9.3354236,36.1782904 L9.3354236,36.1782904 Z" id="path14" fill="#222E37" transform="translate(23.721622, 23.774974) scale(1, -1) translate(-23.721622, -23.774974) "></path>
<path d="M18.0572275,14.1580858 L18.0572275,27.2328603 L13.7114145,27.2328603 L13.7114145,14.1580858 L18.0572275,14.1580858 L18.0572275,14.1580858 Z M15.8843017,29.018 C17.3997746,29.018 18.3430279,30.021996 18.3430279,31.2767008 C18.3147844,32.559649 17.3997746,33.5357884 15.9130481,33.5357884 C14.4264763,33.5357884 13.4545154,32.559649 13.4545154,31.2767008 C13.4545154,30.021996 14.3975752,29.018 15.8559809,29.018 L15.8842243,29.018 L15.8843017,29.018 Z" id="path28" fill="#FFFFFF" transform="translate(15.898772, 23.846937) scale(1, -1) translate(-15.898772, -23.846937) "></path>
<path d="M20.4619043,20.1542051 L24.8076786,20.1542051 L24.8076786,27.4557126 C24.8076786,27.8464779 24.8359221,28.2368563 24.9506755,28.5161955 C25.2648353,29.2969523 25.9798971,30.1055656 27.1804364,30.1055656 C28.7529766,30.1055656 29.3820313,28.9065739 29.3820313,27.1489038 L29.3820313,20.1542051 L33.7274574,20.1542051 L33.7274574,27.6510953 C33.7274574,31.6670792 31.5834714,33.5357884 28.7242689,33.5357884 C26.3798319,33.5357884 25.3506102,32.2253706 24.7787775,31.3328007 L24.8077947,31.3328007 L24.8077947,33.2289797 L20.4620204,33.2289797 C20.5190489,32.0021314 20.4620204,20.1542051 20.4620204,20.1542051 L20.4619043,20.1542051 Z" id="path30" fill="#FFFFFF" transform="translate(27.094681, 26.844997) scale(1, -1) translate(-27.094681, -26.844997) "></path>
<rect id="Rectangle-8" x="0" y="0" width="48" height="48"></rect>
</g>
</g>
</g>
</g>
</svg></a>
</li>
<li class="mail">
<a href="mailto:henry@henrylatham.me?Subject=Website%20enquiry" target="_top" style="color: #0077ff;"><svg width="30px" height="28px" viewBox="0 0 30 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>mailIcon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="About" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Tablet-Portrait" transform="translate(-677.000000, -4375.000000)">
<g id="footer" transform="translate(44.000000, 4354.000000)">
<g id="mailIcon" transform="translate(624.000000, 8.000000)">
<rect id="Rectangle-8" x="0" y="0" width="48" height="48"></rect>
<path d="M9.89988601,14.3608218 C10.405277,13.5482037 11.3384045,13 12.4,13 L35.6,13 C36.3681755,13 37.0690848,13.2870416 37.5893401,13.753602 L24,22.625 L9.89988601,14.3608218 Z M9.5,16.9607122 L9.5,32.25 C9.5,33.7625 10.805,35 12.4,35 L35.6,35 C37.195,35 38.5,33.7625 38.5,32.25 L38.5,15.9678619 L24.5319737,25.0298724 L24,25.375 L23.5801714,25.1313753 L9.5,16.9607122 Z" id="Shape" fill="#0077FF"></path>
</g>
</g>
</g>
</g>
</svg></a>
</li>
</ul>
</footer>
</body>
</html>