-
Notifications
You must be signed in to change notification settings - Fork 0
/
flex.html
156 lines (121 loc) · 8.46 KB
/
flex.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78702312-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-78702312-1');
</script>
<meta charset="UTF-8">
<title>Evan Feng - Flex</title>
<link rel="stylesheet" type="text/css" href="css/evan_style.css" >
<link rel="stylesheet" type="text/css" href="css/flex_style.css" >
<link rel="icon" type="image/png" href="favicon.png" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.parallax-scroll.js"></script>
</head>
<body>
<div class="nav_bar"></div>
<div id="flex_header" class="story_header_img story_header_hidden"></div>
<div id="story_first" class="story_container story_first_hidden">
<div id="story_title_box">
<h4 style="color: black">Flex</h4>
<div id="story_title_year">2019</div>
<h1>Designing for a Journey of Transformation</h1>
</div>
<div id="story_info_box">
<div class="story_info_col">
<div class="story_info_title">Team</div>
<div class="story_info bold">Evan (UI/UX Designer)</div>
<div class="story_info">Amin (Product Owner)</div>
<div class="story_info">Amol (ML Researcher)</div>
<div class="story_info">Connor (Fitness Specialist)</div>
<div class="story_info">Goldee (Backend Lead)</div>
<div class="story_info">Hassan (Data Scientist)</div>
<div class="story_info">Jacob (iOS Lead)</div>
<div class="story_info">Pouria (Software Engineer)</div>
</div>
<div class="story_info_col">
<div class="story_info_title">Tools I Used</div>
<div class="story_info">Sketch</div>
<div class="story_info">Origami Studio</div>
<div class="story_info">After Effects</div>
<div class="story_info">Affinity Designer</div>
<div class="story_info">Zeplin</div>
<div class="story_info">Atom</div>
<div class="story_info">Jira / Bitbucket</div>
</div>
</div>
<div class="story_content_box">
<p>Designed for people who’re serious to achieve their fitness goals with limited or no experience, Flex is a tool offers professional fitness guidance and powerful customization. The app is built to be a simple and engaging product that accompanies the user through their fitness journey.</p>
</div>
</div>
<img class="story_img_inline_larger" src="src/flex_hero.png">
<div class="story_container">
<div class="story_content_box">
<div class="story_chapter_title_box" style="margin-bottom:0">
<h2 class="story_chapter_title">Lower cognitive load</h2>
<h2>Remind people working-out is delightful</h2>
</div>
<p>Start working-out can be a hard decision to make, and stepping inside a gym for the first time is usually intimidating and overwhelming. Low cognitive load, which I think would be beneficial to any human-being, is especially important for this app working in this scenario.</p>
<p>I envisioned a welcoming, honest environment that encourages intimate interactions. I wanted the app to be “transparent” supporting the content and features we offer, instead of having a visual style makes it look “tough” and “masculine”. What I learned from people, is that they have different goals and expectations for their bodies, and an unbiased visual foundation respects people with not being assumptive and thus intrusive. This “transparency” eliminates unnecessary load added to user’s mental space and enables a possibility of having comfortable interactions.
</p>
</div>
<img class="story_img_inline_larger" src="src/flex_plan suggestion.png">
<div class="story_content_box">
<p>The strategy of lowering cognitive load extends from the look and feel to the UI flows. For example, a step-by-step plan suggestion flow with an animated avatar is designed to on-board the user comfortably without overwhelming them with too many options at once. </p>
<div class="story_focus">Simplicity not minimalism</div>
<p>However, lowering cognitive load doesn’t simply mean removing stuff. For us, it’s more about the pace of educating the user, as to bring order to the complexity comes from the nature of our use cases. The key is to make the core experience simple and develop easy-to-learn interfaces for advanced tasks.</p>
<p>For example, user can choose a workout plan for their goal, start a workout, and be guided through it pretty easily. The interfaces and flows related to these tasks are often linear, with single, distinguishable main interactive elements.</p>
</div>
<img class="story_img_inline_larger" src="src/flex_simple.png">
<div class="story_content_box">
<p>As the user progresses through their fitness plan, they wants more control and tweak their workouts more often, and lots of features built for those needs are often learnt from exploring. So I tried to create a safe and convenient environment with easily reachable and learnable features, based on consistent UI and behaviours. With trust built on a simple yet powerful foundation, people will reward us with a more open mental space.</p>
</div>
<img class="story_img_inline_larger" src="src/flex_advanced.png">
<div class="story_content_box">
<p>Also, most actions in those advanced tasks such as modifying exercises, creating custom sets, or logging weight values with plate calculation are easily undo-able. All these to make sure that people get things done and gain more knowledge in this process without having the chance to blow things up.</p>
<div class="story_focus">Enhance the moment</div>
<p>There’re some emotional highlights in the user journey, and I wanted to enhance these moments to build positive connections between the user and our app. For example, a set of data will be visualized to show how much they’ve achieved when the user finishes the entire plan. The avatar with subtle movements and playful transition animation is also to make the start of the journey more exciting.</p>
</div>
<img class="story_img_inline_larger" src="src/flex_moments.png">
<div class="story_content_box">
<p>With a mind of restraint, we could also encourage people to do certain things more easily when we put our app as part of those emotional peaks without being intrusive. Like how I added a shortcut for sharing the app in the workout summary screen after the user finishes their exercises. The view is also designed with encouraging and smooth transitions, sound effects, and haptics, to make the moment more engaging.</p>
<!-- <img class="story_img_inline" src="src/flex_session finish.png"> -->
<p>Flex helps people to start their fitness journey stress-free, and not feel limited or powerless as they grow. The simplicity design makes sure cognitive load is always low, letting users focus on their fitness tasks. With delightful moments and constant emotional rewards, the whole experience will be engaging and enjoyable.</p>
<p>Flex for iOS is now in public beta on Apple TestFlight.</p>
</div>
</div>
<img class="story_img_canvas" src="src/flex_sgs.png">
<div class="story_container">
<div id="footer_nav">
<a href="dbrush.html"><div id="footer_nav_pre">
<h5 class="footer_nav_title" style="font-family:'SF Normal'">Previous</h5>
<div id="footer_nav_pre_cell" class="footer_nav_area">
<div id="flex_footer_tn_pre" class="footer_nav_thumbnail"></div>
<div id="footer_nav_pre_text" class="footer_nav_text">
<div>Gallery: DBrush</div>
<div style="font-family:'SF Normal'">Bringing traditional Chinese calligraphy to the digital platform</div>
</div>
</div>
</div></a>
<a href="huawei.html"><div id="footer_nav_next">
<h5 class="footer_nav_title" style="text-align: right; font-family:'SF Normal'">Next</h5>
<div id="footer_nav_next_cell" class="footer_nav_area">
<div id="flex_footer_tn_next" class="footer_nav_thumbnail"></div>
<div id="footer_nav_next_text" class="footer_nav_text">
<div>Huawei</div>
<div style="font-family:'SF Normal'">Simplifying the Workflow for Professional Users</h4>
</div>
</div>
</div>
</div></a>
</div>
</div>
<div id="footer"></div>
<script src="js/story.js"></script>
</body>
</html>