-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdesignrefinement.html
317 lines (249 loc) · 29.4 KB
/
designrefinement.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
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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE HTML>
<!--
Phantom by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Design Refinement</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]-->
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.html" class="logo">
<span class="symbol"><img src="images/logo.svg" alt="" /></span><span class="title">Wedding Planning</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projectbrief.html">Project Brief </a></li>
<li><a href="consentnarrative.html"> Consent Narrative</a></li>
<li><a href="inspo.html">Inspirational Designs</a></li>
<li><a href="needsanalysis.html">Needs Analysis</a></li>
<li><a href="designdevelopment.html">Design Development</a></li>
<li><a href="heuristicevaluation.html">Heuristic Evaluation</a></li>
<li><a href="designrefinement.html">Design Refinement</a></li>
<li><a href="formalusabilitytestdesign.html">Formal Usability Test Design</a></li>
<li><a href="finalrefinement.html">Final Refinement</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<div class="inner">
<h1>Design Refinement</h1>
<p><a target="_blank" href="https://projects.invisionapp.com/share/H2999IYMN#/screens">Click here to open our prototype in a new tab.</a></p>
<h2>What is your design? How does it work?</h2>
<p>Our design is an app that partners can use to stay on top of wedding planning. After a series of configuration questions to set up the app, users are given tailored, specific tasks that they should complete each day based on what kind of vendors they are planning on having at their wedding, how far along in the planning process they are, where their wedding is located, etc. Users are able to set on which days and at what time they would like to receive new tasks from the app, and the app gives them tasks based on how far out from the wedding they are. For example, venues are usually booked about a year in advance, so if the person using the app has not yet booked a venue and they are less than a year away from their intended wedding date, the app will prioritize tasks regarding booking a venue so that they will be able to get their ideal venue for a reasonable price.</p>
<p>Tasks are grouped into categories such as Beauty, Floral, and Attire, and users are able to add tasks to any category on the desktop interface and are able to add entire categories of tasks if they are looking for something very specific that the app does not currently offer. For example, if you were having a circus themed wedding, you might need tasks such as “Set up interviews with 3 aerialists” or “Confirm the structural integrity of the venue for trapezists” in a category called Circus, which would obviously be a category full of tasks that not all users would need, but would be very important for some people to keep track of.</p>
<div class="box alt">
<div class="row uniform">
<div class="2u"></div>
<div class="3u">
<span class="image fit"><a href="images/designrefinementimgs/2. Introduction.png"><img src="images/designrefinementimgs/2. Introduction.png" alt="" /></a></span>
</div>
<div class="3u">
<span class="image fit"><a href="images/designrefinementimgs/9. Location3.png"><img src="images/designrefinementimgs/9. Location3.png" alt="" /></a></span>
</div>
<div class="3u">
<span class="image fit"><a href="images/designrefinementimgs/TaskListShort.png"><img src="images/designrefinementimgs/TaskListShort.png" alt="" /></a></span>
</div>
</div>
</div>
<p>When users view specific tasks, they are able to do the following things.</p>
<ul>
<li>Add notes about the task at hand</li>
<li>View notes they have added to the app during previous tasks that might be relevant</li>
<li>Mark the task as not relevant to remove it from their list and give the back-end algorithm more insight into what tasks the user is looking for</li>
<li>Mark the task as completed</li>
</ul>
<center><a href="images/designrefinementimgs/TaskPageFloral.png"><img src="images/designrefinementimgs/TaskPageFloral.png" width="350" height="670"></a></center>
<br>
<p>Adding notes to each task will automatically populate a Google drive spreadsheet or document (depending on what is appropriate) with the information they have entered into the app. This is important because the user may want to share this information with the wedding party or others who are involved in the wedding but who are not involved in the explicit details of the planning process which the app provides.</p>
<p>At this point in time, our design is primarily designed for mobile, but after this phase, we believe we need to spend more time developing a desktop version of the app which will include the more complex features we are aiming to build, such as the ability to create new categories and tasks and input specific notes. The desktop prototype is in the works, but we did not yet feel comfortable with the state of it to present it for a heuristic evaluation. We are planning on doing another one of these evaluations during the next phase with the updated desktop prototype. Currently, we have a well refined mobile prototype that will able be further revised in the next phase to incorporate feedback from our heuristic evaluations and better interface with the desktop prototype.</p>
<h2>What changed, and why did you change it?</h2>
<p> <strong>Paper Prototype Engagement with Ellen: </strong>
As we were shifting into the design refinement stage, we had an engagement with Ellen using our paper prototype. This engagement led to us significantly changing our design at the end of our design development phase. We jumped into the design refinement phase with the following changes.
</p>
<p>In our initial sign-up flow, we ask the user for a bunch of information about their wedding but we never fully explain the main interaction of our app, the notifications that we have created for you that appear as often as you indicated in your preferences to help you plan. This was evidenced by Ellen going through our whole sign-up flow under the impression that our app’s notifications would remind her of what day she was getting married.</p>
<p>Throughout the design development flow, we had been adamant that our app was not going to be the place for users to store their actual wedding planning details. We would give them a task such as “Research 3 florists” and the result of that research (name of florist, phone number, hours, etc.) would be stored somewhere else by the user, not in our app. During our engagement, Ellen felt our tasks were too large and instead of looking at other tasks, she expected the app to provide more help text and an area to input the results of the task she was currently on. Without soliciting input from the user as they complete tasks, we were severely restricted in the type of advice we could dispense, bundling vague generic advice that may or may not be relevant into a notification we termed as a “conversation starter”. An example of a conversation starter would be “Have you thought about how weather might affect your wedding day?” but we now have the user input the results of each task and using that data, we can tailor our notifications to be relevant specifically to the user’s wedding day.</p>
<p>One final change builds off of the fact that users will now be inputting the results of each task that they complete in our app. Ellen, during the engagement, did not understand why she was seeing the tasks she was seeing and where they had come from. In our sign-up flow, we presented the user with a massive list of possible categories of tasks and they would then select the ones they wanted. We found that that is a pain point because it overwhelms the user with so many decisions they might not have made yet. Instead, users will be “configuring” one category at a time as they begin to use our app. This would present itself as an initial task to configure “Venue” where we narrow down on what the user has already completed and what the user has to do in terms of booking a venue for their wedding. We hope that this will provide more insight into where the notifications we are presenting to the user come from.</p>
<p>Below is a demo of the paper prototype we had at the end of the design development phase.</p>
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/vkivqHFf3EM" frameborder="0" allowfullscreen></iframe></center>
<br>
<p> <strong>Designing for Mobile and Desktop: </strong>
After conducting a paper prototype walk through, we realized that our application as a simple notification application was not very useful. We decided we wanted to store their information because they wanted to see the data on the tasks we were reminded them about, and we could provide them with more concrete tasks if we had data about their tasks. This was an interesting problem because we wanted to store their data, but we didn’t want to create a storage system or data collection architecture. We looked through our notes at how our users were storing data, and we identified they were storing data with Excel sheets online through Google docs and offline through Microsoft’s Excel. We realized we didn’t have to create a whole new Excel sheet replacement, but rather an integration with Google docs. This was a major aspect to our application that we incorporated during this phase that was not present before.
</p>
<p>We listed out the functionality we wanted to give our users with our application. The core functionality for mobile includes:</p>
<ul>
<li>View task reminders for the day and be able to mark the task as done or not relevant.</li>
<li>View task by category in case they want to see all of the tasks they have to do to complete each section.</li>
<li>View tasks by calendar to see when they will be reminded to do specific tasks.</li>
<li>Change when and how many notifications they would like to see.</li>
</ul>
<p>The core functionality for desktop includes:</p>
<ul>
<li>Add a new category that they would like to include as part of their wedding. By doing this, they will get notifications about tasks in that category.</li>
<li>Remove a category that was previously part of their wedding planning, but they no longer want to include in their wedding.</li>
<li>Add a new task to any of the categories in case there is something specific to them that falls into one of the categories.</li>
<li>Edit the details about any of the tasks such as when they would like to be reminded to do it, the name of the task, and which category it falls into.</li>
<li>Edit the data associated with each task such as any data relevant to the task. For example, if the task is schedule a consultation with the florists you might considering, the user only needs to see the florists the user is still considering, not the ones they crossed off their list. They should be able to edit this information to keep updated.</li>
</ul>
<p>Functionality included in both:</p>
<ul>
<li>Mark tasks as irrelevant to them.</li>
<li>Mark tasks as done.</li>
<li>Type in their data to mark a task as complete and for us to save it for them </li>
<li>View the progress on each category </li>
</ul>
<p> <strong>Franton’s, Aaron’s, and Haley’s Feedback: </strong>
Our first round of heuristic evaluations came from Franton, Aaron, and Haley on Team Badlands. One common theme that all three of our evaluators pointed out is that they still don’t know where these notifications are coming from. Our sign-up flow still does not adequately explain what the point of our app is or prepare the user for the core interaction. We have still not designed the configuration flow and doing so should help alleviate this uneasiness we are seeing when users click through our prototype about the notifications and how they are generated in addition to adding help text to the sign-up flow to clarify expectations for the user.</p>
<p>In addition, we found that the “Done” button which we used to mark as a task as completed was not clear to our evaluators. This could be clarified with an introductory walkthrough when the user downloads the app, which would show an example task, the type of inputs the user may enter, and then mark itself as completed when the user presses the “Done” button. This could also be resolved with more help text or different language used in the app to show that notifications and cards are tasks and marking them as done is the same as completing them.</p>
<p>We have also had a lot of discussions in our team about the progress bar shown on the dashboard page and in what form does the progress bar communicate the most information to our user. Our evaluators pointed out to us that the progress bar is fine but more importantly, they would rather see something that tells the user whether or not they are on track to complete the tasks in this category by their wedding day. Making this change means we would have to discuss how to prioritize tasks for the user and how to deal with constraints when the user can’t complete the tasks they need to for their wedding day at the rate they are currently progressing.</p>
<p> <strong>Sophie's and Jacob’s Feedback: </strong>
<span class="image right"><a href="images/designrefinementimgs/TaskListShort.png"><img src="images/designrefinementimgs/TaskListShort2.png"></a></span>
Another round of heuristic evaluations revealed several key usability issues in our designs for the mobile app, which served as a great starting point for our final refined prototypes. One of the biggest issues dealt with transparency into what the app is doing in the background to curate a personalized planning list, and easing the user into the task completion process. Initially, the user was dropped directly into a list of tasks to complete directly after the signup process without any indication of why the tasks shown were there or where they came from. Based on prior experience using todo lists, users felt uncomfortable having a predefined list show up for them without any direct customization, other than the sign-up process.
</p>
<p>This feedback demonstrated a clear need for more user control over the planning curation process. As part of the process of planning their wedding, we plan on introducing users to categories one by one - going through a quick configuration flow to help us create a set of tasks more relevant to their planning experience. Adding more transparency and opportunity for control will help make the user’s first experience of using the app more intuitive and less jarring.</p>
<span class="image left"><a href="images/designrefinementimgs/TaskPageFloral.png"><img src="images/designrefinementimgs/TaskPageFloral2.png"></a></span>
<p>Another main area of improvement is the interaction the use has with task cards.</p>
<p>In our initial designs, we failed to fully explain and provide more context for what it means to ‘add results’ to a task, or click ‘Done’ at the bottom. Both users testing our designs in this round of heuristic evaluations found the language to be vague and unclear - what do ‘results’ mean? Does clicking ‘Done’ do anything to the task, or does it just exit the page? In light of these usability issues, we plan to rethink and consider more carefully the language and iconography we use to convey different actions and affordances available to the user. For instance, using descriptive icons and more specific text that describes the effect of clicking the button, like ‘Complete Task’, will more effectively describe the affordances available.</p>
<br><br><br><br>
<span class="image right"><a href="images/designrefinementimgs/Categories.jpeg"><img src="images/designrefinementimgs/Categories.jpeg"></a></span>
<p>Another key area that presents a lot of room for improvement is the category dashboard page. Users evaluating our designs had difficulty making sense of two main components - how tasks fit into categories, and what goes into creating the percentage complete statistic listed for each category. Moreover, users expressed discomfort that some of the categories felt like they would overlap a lot (e.g. beauty and attire), and that the list was way too long to navigate effectively. To address these concerns, we’re currently working on prototyping various solutions:</p>
<ol>
<li>Allowing more configuration/customization to help familiarize users with the categories</li>
<li>Introducing grouping/more prominent search to allow the list to be searched more easily</li>
<li>Assigning weights/points to the tasks to give users more transparency into how percentages are determined</li>
<li>Getting rid of the progress bars altogether</li>
</ol>
<p>In general, these heuristic evaluations provided a lot of insight and useful evidence that will help us move forward and continue to improve our designs.</p>
<h2>What key insights did you gain during this phase?</h2>
<p>
<ol type="1">
<li><i>Designing for Different Devices:</i> During this phase, we heavily debated whether or not it was best to design this wedding planner application for desktop or mobile. While we thought this was a mutually exclusive design process after weighing the pros and cons of each, we realized that designing an application can require the devices of both a desktop and mobile phone. On one hand our users can benefit from uploading mobile photos onto the app while they are looking at a venue, or scheduling a flower visit. On the other hand, tasks that involve research or emailing a large group of people require the use of a desktop. We felt that control and flexibility was such a key value in our users that we wanted to design for both in order to accommodate to their various needs. </li>
<li><i>Importance of Categories:</i> Users tend to think of tasks in categories. Originally when we created our design we would indicate the task categories as a simple text title at the top of the task card. As we mentioned before, after talking to Ellen we realized that there was a need to see more tasks in that category and we dedicated a separate section in our mapping dedicated just for looking at tasks in specific categories. In addition, we created icons to represent each category as another way to place emphasis on categories and allows for easier recognition of the different categories.</li>
<li><i>The Importance of Help and Documentation:</i> Help and Documentation is often times overlooked when you have been working on the app for a while. As we mentioned previously, we saw this when Ellen mentioned she was confused what our app was even about when she first used it. We then incorporated her feedback by doing a walk through of what the app provides. However, during our heuristic evaluation we realized that we needed to include more help and documentation in regards to explaining how we preselected categories and tasks based on common weddings. While it seemed like an obvious design choice for our team to immediately provide these categories, we were so invested in wedding planning that we didn’t even think about why or how the different categories got selected. For our next design, we will try to incorporate some way to indicate to users that these categories are pre-selected. </li>
<li><i>Users value a timeline:</i> When speaking to several of our users one of their key values was thinking about tasks in relation to how close it was to the wedding (ex: This task is 4 months away from the wedding). While this was a key insight that we learned last phase, we didn’t necessarily implement this key insight into our design until this phase. When we first designed the calendar section we included tasks in the order of which they were due. However, during this design phase we put more emphasis on our users being able to see a calendar for both categories and a timeline perspective. Thus, if a user wanted to see how many tasks they had to do in a given time or just see what their agenda would look like in the next three weeks, the calendar being placed as a split screen helps to emphasize this control for user.</li>
</ol>
</p>
<h2>What questions do you have now about your project? What shortcomings are you aware of?</h2>
<p>One of design decisions our group was arguing about was how important it was to illustrate the progress of tasks in each category. Our current design showed a progress bar and a percentage that would indicate to the user how far along they are in completing the tasks within a given wedding category. This concern was confirmed during our heuristic design review when our users stated they were confused how the progress bar was determined - what if more tasks carry more “to-do” weight than others? How do you measure that? Going into this next phase we will be thinking about how important progress bars are and how we can better reflect their meaning to our users.</p>
<p>Furthermore, during this design period we were a very fragmented team between mobile and desktop and it was difficult to communicate in order to form a uniform design across both devices Some people individually expressed interest in learning how to design for desktop and others wanted to learn how to design for mobile. While each member of the team learned the difficulties and benefits in designing for both interface, we are unsure of where to best put our efforts: continuing to design for both or focusing our attention on one device?</p>
<h2>Effort Chart</h2>
<table>
<tr>
<th></th>
<th>Annabel</th>
<th>Christina</th>
<th>Zoher</th>
<th>Casey</th>
<th>Patrick</th>
<th>Total</th>
</tr>
<tr>
<td><strong>Project Brief</strong></td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td><strong>Needs Analysis</strong></td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td><strong>Design Development</strong></td>
<td>27</td>
<td>10</td>
<td>12</td>
<td>24</td>
<td>27</td>
<td><strong>100</strong></td>
</tr>
<tr>
<td><strong>Design Refinement</strong></td>
<td>23</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>23</td>
<td><strong>100</strong></td>
</tr>
</table>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<!-- <section>
<h2>Get in touch</h2>
<form method="post" action="#">
<div class="field half first">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="special" /></li>
</ul>
</form>
</section>
<section>
<h2>Follow</h2>
<ul class="icons">
<li><a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon style2 fa-500px"><span class="label">500px</span></a></li>
<li><a href="#" class="icon style2 fa-phone"><span class="label">Phone</span></a></li>
<li><a href="#" class="icon style2 fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
</section> -->
<ul class="copyright">
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.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>
</body>
</html>