-
Notifications
You must be signed in to change notification settings - Fork 0
/
farestart.php
257 lines (202 loc) · 11.2 KB
/
farestart.php
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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!doctype html>
<html>
<head>
<?php include('header.php'); ?>
<title>FareStart</title>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-54877627-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<?php include('float_navigation.php'); ?>
<!--Home image-->
<div class="parallax-window" data-parallax="scroll" data-image-src="images/farestart.jpg">
<?php include('fixed_navigation.php'); ?>
<div class="container animated fadeIn">
<div class="titlename margin15">
<p style="margin-top:20%">FareStart</p>
<p style="font-size:1em">Redesign the website of a non-profit, social organization in Seattle.</p>
</div>
</div>
</div>
<!--Summary-->
<div class="margintop100">
<div class="container">
<div class="bluearea">
<div class="row margin15">
<div class="col-md-3">
<h3>Team Role<i class="fa fa-fw fa-user"></i></h3>
<p>UX Designer</p>
</div>
<div class="col-md-3">
<h3>Duration<i class="fa fa-fw fa-calendar-o"></i></h3>
<p>03/2015 - 06/2015</p>
<p>3 months</p>
</div>
<div class="col-md-3">
<h3>Methods<i class="fa fa-fw fa-book"></i></h3>
<p>Data Analysis</p>
<p>Wireframing</p>
<p>Prototyping</p>
<p>Card Sorting</p>
</div>
<div class="col-md-3">
<h3>Tools<i class="fa fa-fw fa-wrench"></i></h3>
<p>Axure</p>
<p>Google Analytics</p>
<p>Optimal Workshop</p>
</div>
</div>
</div>
<!-- Detail -->
<div class="row margintop50">
<div class="col-md-7" style="float: none; margin: 0 auto; text-align: center">
<p><b>FareStart</b> is a non-profit, social organization which has been providing hands-on culinary job training and job placement for homeless and disadvantaged individuals and families in Seattle for over 20 years. We redesigned FareStart's
website to make it more visually appealing, efficient, and mobile friendly.</p>
<h3 class="center"><a class="btn btn-align btn-default btn-inline text-center" href="https://hcxwfn.axshare.com/home.html" target="_blank" role="button">Try Final Prototype Now</a></h3>
</div>
</div>
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestarthomepage.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="nextproject">Goals</h3>
<hr class="featurette-divider">
<div class="row featurette marginbottomtop30">
<div class="col-md-5 vcenter">
<ul>
<li>Update the site to match advances in technology. Success will be measured by the implementation of a <b>responsive or mobile-friendly design</b></li>
<li>Make it easier to understand and/or discover different parts of the organization and its offerings. Success will be measured by <b>perceived effectiveness</b> of the site</li>
<li>Provide relevant info for each of the specific audiences (students, catering customers, donors, etc) to fulfill their needs. Success will be measured by improved <b>task efficiency and reduced error rate</b></li>
</ul>
</div>
<div class="col-md-6 vcenter">
<p><b>Rationale</b></p>
<p>The FareStart website is a resource for a variety of audiences with independent needs. The current website, designed seven years ago, lacks a few important features including a responsive/mobile-friendly design.</p>
<p>Additionally, content is not always easily discoverable and visitors may be abandoning the site prior to finding the information they were seeking. In order to accurately reflect all that FareStart offers and to continue to grow the FareStart
community, a site redesign focused on rearchitecting content based on specific user needs is recommended.</p>
</div>
</div>
<h3 class="nextproject">Research</h3>
<hr class="featurette-divider">
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-researchmethod.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3>Key Findings</h3>
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-research.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="nextproject">Design Principle</h3>
<hr class="featurette-divider">
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart_designprinciple.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="bs-docs-featurette-title nextproject">Persona</h3>
<hr class="featurette-divider">
<div class="row featurette">
<ul id="portfolio-demo">
<li>
<a href="#slide1"><img style="max-width: 100%; margin: 0 auto" src="images/farestartpersona-01.jpg"></a>
</li>
<li>
<a href="#slide2"><img style="max-width: 100%; margin: 0 auto" src="images/farestartpersona-02.jpg"></a>
</li>
<li>
<a href="#slide3"><img style="max-width: 100%; margin: 0 auto" src="images/farestartpersona-03.jpg"></a>
</li>
</ul>
</div>
<h3 class="nextproject">Information Architecture</h3>
<hr class="featurette-divider">
<div class="row featurette marginbottomtop30">
<div class="col-md-5 vcenter">
<p>We listed out all the features the current site offered and use <b>Optimal Workshop</b> to have participants do <b>open-end card sorting</b> - grouping these features according to their personal understanding. Then based on this card sorting
results we formed a new information architecture.</p>
</div>
<div class="col-md-6 vcenter">
<img class="example-image img-responsive" src="images/iadiscussion.jpg" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
</div>
<div class="row featurette">
<img class="example-image img-responsive" src="images/cardsorting.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<div class="row featurette">
<img class="example-image img-responsive" src="images/ia.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="nextproject">Design Iteration</h3>
<hr class="featurette-divider">
<div class="row featurette">
<img class="img-responsive " src="images/farestart-prototype-v1.png" style="max-width: 100%;">
</div>
<h3 class="nextproject">Usability Study</h3>
<hr class="featurette-divider">
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-usabilitytestscenario.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="nextproject">Design Changes Based on Key Findings</h3>
<hr class="featurette-divider">
<p>1. Secondary horizontal navigation bar was not intuitive enough. So we changed to vertical sidebar.</p>
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-keyfinding-1.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<p>2. Descriptions were wordy. We rewrote the content to make it simple and concise.</p>
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-keyfinding-2.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<p>3. It was not visually appealing. We improved the visual design.</p>
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart-keyfinding-3.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<h3 class="nextproject">Final Prototype</h3>
<hr class="featurette-divider">
<div class="row featurette">
<img class="example-image img-responsive" src="images/farestart_sitemap.png" alt="image-1" style="max-width: 100%; margin:0 auto" />
</div>
<div class="row featurette">
<h3 class="center"><a class="btn btn-align btn-default btn-inline text-center" href="http://hcxwfn.axshare.com/home.html" target="_blank" role="button">Try It Now</a></h3>
</div>
<h3 class="bs-docs-featurette-title nextproject ">Reflection</h3>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<h3>What I Learned</h3>
<ul>
<li>Data-Driven Design, I used Google Analytics to help make design decisions</li>
<li>Mobile-first is hard, espicially when the majority of current users used desktop</li>
<li>Card sorting is not the end, it's just the beginning</li>
</ul>
</div>
<div class="col-md-7">
<h3>Future Work</h3>
<ul>
<li>Mobile design. It should not be difficult, since during the whole process of redesign we always made sure that the new design was mobile friendly</li>
<li>Furtherly improve the visual design</li>
</ul>
</div>
</div>
<h3 class="bs-docs-featurette-title nextproject">Next Project</h3>
<hr class="featurette-divider">
<div class="row featurette onhover opacity" onclick="location.href='travelens.php';" style="cursor: pointer;">
<div class="col-md-5">
<img class="featurette-image img-responsive " src="images/travelens.png" alt="Generic placeholder image" style="width: 100%;">
</div>
<div class="col-md-7">
<h3 class="featurette-heading ">TraveLENS <br><span class="text-muted">Data Visualization</span></h3>
<p>A travel data visualization that helps travelers and investors find their goals.</p>
</div>
</div>
</div>
<?php include('footer.php'); ?>
</body>
</html>