-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcase_study--visitor_registration_app.html
180 lines (160 loc) · 11.8 KB
/
case_study--visitor_registration_app.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Visitor registration iPad app | by Vedran Arnautovic</title>
<link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/app.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto' rel='stylesheet' type='text/css'>
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'/ >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="public"/>
</head>
<body>
<!-- NAV -->
<nav class="nav nav--on-light-bg noselect" id="nav">
<ul class="nav__list">
<li class="nav__item"><a href="index.html">Home</a></li>
<li class="nav__item"><a href="about_vedran.html">About me</a></li>
<li class="nav__item nav__item--selected"><a href="vedrans_design_work.html">My work</a></li>
</ul>
</nav>
<!-- Make nav sticky on scroll -->
<script type="text/javascript" src="/js/sticky_nav.js"></script>
<script type="text/javascript">formatStickyNav("@colour-light-gray");</script>
<!-- lazy load images -->
<script src="js/lazy_img.js"></script>
<!-- CASE STUDY INTRO -->
<div class="section section--medium">
<div class="section__content section--top-of-page section--last-in-section section__content--allow-wide">
<h1 class="h1-heading">Visitor registration app</h1>
<p><a class ="link link--on-light-bg link--inline" target="_blank" href="http://gymsales.net">GymSales</a> are a provider of lead and member management software for gyms and fitness centres. They wanted to extend their product set to include an iPad application for management of visitor registrations.</p>
</div>
</div>
<div class="section section--light ">
<div class="sub-section__content sub-section--first-in-section">
<h2 class="h2-heading">The challenge</h2>
<p>Gym receptions are busy places. Multiple instructors are meeting their students, loud music is playing, phones are ringing.</p>
<p>GymSales wanted to provide gym visitors with a quick and painless way to register as visitors, while meeting gyms’ data and legal requirements. Therein lied the biggest challenge for the project: how to collect all the data required, while keeping the process of registering quick and simple?</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Research</h2>
<p>I hit the streets and walked to three different gyms where I signed up as a visitor in order to experience the registration process. The main learnings were:</p>
<ul class="list">
<li class="list__item">They all used paper forms</li>
<li class="list__item">The forms often did not allow enough space for the required information</li>
<li class="list__item">The space allocated to completion of forms was inadequate</li>
<li class="list__item">The amount of information asked for was overwhelming</li>
</ul>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Simplify from the start</h2>
<p>Before starting to design, I talked to the client about minimising the amount of inofmation we collect.</p>
<p>The principle we ended up agreeing on is that if the information was not required during the 'visitor' period, we did not need to collect it with this app. Any information that was required for full members would be collected once (if) they signed up as full members.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Animation and the perception of effortlessness</h2>
<p>I was keen for the process of registering to feel as effortless as possible. Once the amount of information was minimised, I turned to animation design, using <a class="link link--on-light-bg link--inline" href="http://principleformac.com/">Principle</a>, in order to come up with screen transitions which gave the impression of speed, smooth movement and progress.</p>
<div class="sub-section__content sub-section__content--no-margins">
<h3 class="h3-heading">Elements logically morph into each other</h3>
<p>Where it makes sense, elements morph into each other. This is preferred to elements dissapearing and new ones appearing as it enhances the feeling of continuity.</p>
<div id="buttonmorph-img-container" class="animation-example placeholder" data-large="resources/images/button_morph_animation.gif">
<img id="buttonmorph-img-placeholder" class="img-small" src="resources/images/button_morph_animation_PLACEHOLDER.gif">
<div style="padding-bottom: 133.42%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('buttonmorph-img-container','buttonmorph-img-placeholder',"Animation showing button morphing");</script>
</div>
<div class="sub-section__content sub-section__content--no-margins">
<h3 class="h3-heading">Object origin</h3>
<p>Objects don’t just appear on the screen. They have a point of origin, and a destination. This allows them to enter and leave the screen in an orchestrated manner.</p>
<div id="elements-img-container" class="animation-example placeholder" data-large="resources/images/elements_appearing.gif">
<img id="elements-img-placeholder" class="img-small" src="resources/images/elements_appearing_PLACEHOLDER.gif">
<div style="padding-bottom: 133.42%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('elements-img-container','elements-img-placeholder',"Animation of elements appearing on page");</script>
</div>
<div class="sub-section__content sub-section__content--no-margins">
<h3 class="h3-heading">Animation continuity</h3>
<p>Movement of individual elements overlaps by a 0.2s, in order to create a sense of smooth continuity.</p>
<div id="overlap-img-container" class="image--medium placeholder" data-large="resources/images/animation_overlap.png">
<img id="overlap-img-placeholder" class="img-small" src="resources/images/animation_overlap_PLACEHOLDER.png">
<div style="padding-bottom: 45.51%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('overlap-img-container','overlap-img-placeholder',"Showing animation overlap");</script>
</div>
<div class="sub-section__content sub-section__content--no-margins">
<h3 class="h3-heading">Breaking animation consistency for emphasis</h3>
<p>All animations use an ease-in/ease-out curve with the exception of error messages. Error messages spring onto the screen in order to create emphasis.</p>
<div id="error-img-container" class="animation-example placeholder" data-large="resources/images/error_animation.gif">
<img id="error-img-placeholder" class="img-small" src="resources/images/error_animation_PLACEHOLDER.gif">
<div style="padding-bottom: 133.42%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('error-img-container','error-img-placeholder',"Animation of error message appearing");</script>
</div>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Oversized input controls</h2>
<p>From my research, I knew that the existing forms were physically cramped and difficult to fill out – I didn't want this application to feel like a form, hence I opted to use large, oversized elements, such as the input fields, action buttons and links.</p>
<div id="input-img-container" class="image--medium placeholder" data-large="resources/images/input_element_dimensions.png">
<img id="input-img-placeholder" class="img-small" src="resources/images/input_element_dimensions_PLACEHOLDER.png">
<div style="padding-bottom: 76.30%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('input-img-container','input-img-placeholder',"Showing oversized inputs");</script>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Usability testing</h2>
<p>I improvised in order to recruit subjects for my usability testing – I reached out to friends and acquaintances who joined a gym within the last year. I managed to find three people very quickly and tested the app prototype.</p>
<div id="user-img-container" class="image--medium image--with-caption placeholder" data-large="resources/images/visitor_registration_user_testing.JPG">
<img id="user-img-placeholder" class="img-small" src="resources/images/visitor_registration_user_testing_PLACEHOLDER.JPG">
<div style="padding-bottom: 66.8%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('user-img-container','user-img-placeholder',"Usability testing with a friend");</script>
<div class="image-caption">Usability testing with a friend</div>
<p>The key change made after the usability testing was to provide explanation as to why the phone number was needed – some people were uncomfortable with providing this information.</p>
</div>
<div class="sub-section__content">
<h2 class="h2-heading">Branding customisation</h2>
<p>Finally, I had to make sure that the visual design can accomodate different branding, as this app was to be used by different gyms.</p>
<p>I created a set of guidelines to make sure that different colour schemes could be applied to the app, while keeping text accessible and maintaining the app‘s visual identity.</p>
<div id="branding-img-container" class="image--medium placeholder" data-large="resources/images/branding.png">
<img id="branding-img-placeholder" class="img-small" src="resources/images/branding_PLACEHOLDER.png">
<div style="padding-bottom: 66.89%;"></div>
</div>
<script type="text/javascript">lazyLoadImage('branding-img-container','branding-img-placeholder',"Branding for different gyms");</script>
</div>
<div class="sub-section__content sub-section--last-in-section">
<h2 class="h2-heading">The outcome</h2>
<p>The app was finished in May 2016 and has been rolled out to over a thousand gyms around the USA, Canada and the UK.</p>
<p>A further sign of success was that the major client, Snap Fitness, requested for the app to be extended to cover their entire member signup process.</p>
</div>
<div class="section section--medium section--nav">
<div class="sub-section__content sub-section--last-in-section">
<a class="link link--on-light-bg link--case-study-nav" href="vedrans_design_work.html#VisitorRegistrationApp">Back to ‘My work’</a>
<a class="link link--on-light-bg link--inline" href="case_study--design_sprint.html">Next case study</a>
</div>
</div>
</div>
<!-- START FOOTER -->
<script src="js/clipboard.min.js"></script>
<script src="js/copy_email.js"></script>
<div id='footer'></div>
<div class="footer section--dark footer__content">
<div class="section__content noselect">
<div id="email-bttn" class="bttn bttn--almost-black bttn--email">
<span class="bttn__label" id="email-label"
onmouseover="mouseOver('email-label')"
onmouseout="mouseOut('email-label','[email protected]')"
data-clipboard-text="[email protected]">
</span>
</div>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://twitter.com/vedranio">Twitter</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://medium.com/@vedranio">Medium</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.linkedin.com/in/vedran-arnautovic-716a1b128">LinkedIn</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://github.com/vedranio">GitHub</a>
<a class ="link link--on-dark-bg link__footer" target="_blank" href="https://www.instagram.com/vedran_arnautovic/">Instagram</a>
<script type="text/javascript">copyEmailToClipBoard('.bttn__label','email-label', "bttn__label","[email protected]");</script>
</div>
</div>
<!-- END FOOTER -->
</body>
</html>