Published on <a href="http://ift.tt/2sE8nIQ">| Prototyping: From UX to Front End &mdash; Medium</a> Estelle JIN 
<h3>5 days Design Sprint to Create an Event Finder App Helping People to Declutter and Get Inspired. (UX Case Study)</h3>
<h4>Concept Map, Storyboard, Interactive Prototype</h4>
<img alt="" src="http://ift.tt/2tovB2V">
<h4>CONTEXT</h4>
1st Design Sprint at General Assembly London UXD Immersive program.
My role: I only had 5 days to research, ideate and deliver a low-fidelity digital prototype. I was curious to know the desirability of this app, so I spent 5 days after the course creating a high-fi <a href="http://ift.tt/2sE9nwu">clickable prototype</a>. Feel free to try it and let me know what you think!
UX Tools: User interview, Concept Map, Storyboarding, Wireframing, User Testing, Interactive prototype.
Date: March 2017
<img alt="" src="http://ift.tt/2to8LIm"><img alt="" src="http://ift.tt/2sEHpAD"><img alt="" src="http://ift.tt/2tnPRS5">On the left: Lo-Fi proto. On the right: High-Fi mockups.<img alt="" src="http://ift.tt/2sEL4yv"><img alt="" src="http://ift.tt/2toeCgV"><img alt="" src="http://ift.tt/2sEBMTm">
<blockquote>“THE PROCESS OF CHOOSING IS A PROCESS OF DESELECTING”</blockquote>
We are all busy bees like Zofia, so busy that most of the time we don’t have energy to plan our chill out time.
This app will help user to DISCOVER, PRE-SELECT and BOOK event (API needed).
<img alt="" src="http://ift.tt/2to9klw"><img alt="" src="http://ift.tt/2sExMSM"><img alt="" src="http://ift.tt/2tosA2y">Day 5 achievement: Lo-Fi prototype.
Try it:
<iframe src="http://ift.tt/2sEBR9g" width="402" height="847" frameborder="0"><a href="http://ift.tt/2toszf0">http://ift.tt/2toszf0</a></iframe><img alt="" src="http://ift.tt/2sExn2s"><img alt="" src="http://ift.tt/2tosxnd"><img alt="" src="http://ift.tt/2sEEqIF">
How did we get there?
<h3>RESEARCH — Day 1</h3>
<h4>USER INTERVIEW</h4>
I didn’t know Zofia so I asked her lots of open questions to identify her pain point and better understand her thought process. I wanted to figure out what was important for her and what was not.
<img alt="" src="http://ift.tt/2to7LUV">
Zofia is a super zen person, sensitive and soft spoken. To give her enough space to open up, I tried to leave some comfortable silence, so she could feel free to describe her feelings and emotions behind her behaviours or habits. This is what she told me after some coffees:
<img alt="" src="http://ift.tt/2sF2lYx">practising the art of asking “WHY?” with the busy bee
“I feel overwhelmed sometimes.”
“I don’t really have time to browse art blogs to find new places.”
“I don’t know where to look at.”
“I wish someone knows my tastes (…) and just tell me what to do.”
“It’s frustrating to realise I missed a nice event”
–Zofia
<h3>IDEATE — Day 1</h3>
How to deal with all the informations Zofia gave me during the interview? I decided to use a concept map to frame the problem and prioritise what features to design first.
My creative process for concept mapping:
1- Put all user feedbacks and thoughts on paper in no order or logic.
2- Try to regroup thoughts in logical category.
3- Try to see patterns emerge. If not, go back to step 2.
My first concept map helped me sum up all the feedbacks and ideas from the user interviews. I then created another one that helped me frame key problems and group ideas.
<img alt="" src="http://ift.tt/2tosNCD">Concept map V1<img alt="" src="http://ift.tt/2sERRrV">Concept Map V2
<h3>DEFINE — Day 2</h3>
<h4>3 key issues emerged:</h4>
<ul>
<li>It’s time-consuming to actively look for art events.</li>
<li>Looking for inspiration&#8230;.but where? How to discover new places or artists?</li>
<li>Frustrated of missing events.</li>
</ul>
<h4>PROBLEM STATEMENT</h4>
<blockquote>“HOW TO DISCOVER THE MOST INSPIRING EVENTS IN LONDON IN A FAST &amp; EASY WAY?”</blockquote>
<h4>DESIGN DIRECTION &amp; FEATURES</h4>
<ul>
<li>Pro-active suggestions. Discover new events based on user likes.</li>
<li>Importance of event curation (more than location or the social aspect).</li>
<li>Notifications and Reminders to prevent missing an event.</li>
<li>Filter/Search (Category, Free, Location).</li>
<li>Event Map overview.</li>
<li>Quick look at the event but commit to attend later. Wishlist.</li>
<li>Private message sharing to invite friend.</li>
<li>Location: London.</li>
<li>Look &amp; Feel: minimal, elegant.</li>
</ul>
<h4>STORYBOARD</h4>
To better empathize with Zofia (and also because it’s quite fun) I created a little story.
<img alt="" src="http://ift.tt/2to6Y6g"><img alt="" src="http://ift.tt/2sExOdm">
<h3>DEVELOP — Day 3</h3>
<h4>USER FLOW &amp; HAPPY PATH</h4>
I started to identify 2 contexts: when Zofia is busy and when she is not. In each state, her mindset, expectations and behaviours would be totally different, so I designed the app with this in mind.
<img alt="" src="http://ift.tt/2tosyaL"><img alt="" src="http://ift.tt/2sEJlJE">Initial happy path. In later iteration, I merged the Homepage and Discover according to user feedbacks.
<h4>SKETCHES, WIREFRAMES &amp; USER TESTINGS—Day 4</h4>
I quickly started to sketch my ideas on paper and wanted to create a simple yet elegant app knowing Zofia’s taste for minimal design. I tested the sketches with her and she quickly validated the overall design and simple navigation: HOME/ WISHLIST/ DISCOVER/ CALENDAR &amp; EVENT MAP.
“It’s not too crowded, looks simple to use” — Zofia
<img alt="" src="http://ift.tt/2to1R6g"><img alt="" src="http://ift.tt/2sE4Qud">Early sketches and iterations.
<h4>PAPER PROTO &amp; ITERATIONS</h4>
Based on her feedback, I moved to a paper proto and tested again on 3 other users.
Below a selection of feedbacks and iterations I took into consideration when creating the lo-fi Proto.
<ul>
<li>Sign up and interests selection</li>
</ul>
User testing showed people like the feature tap to select interests. “Allow location” shouldn’t be compulsory, it could be set up later, same for notifications.
<img alt="" src="http://ift.tt/2to1RDi"><img alt="" src="http://ift.tt/2sEBQCe"><img alt="" src="http://ift.tt/2to1Sak">
<ul>
<li>Layout and Interactions. How to not go down the rabbit hole?</li>
</ul>
Well, we all have our obsessions. For me, it’s layouts and interactions. While designing the filter and event description, I could not make up my mind. I was under pressure to deliver a clickable prototype the next day so…I just stop and thought:
<blockquote>“you are not going to reinvent the wheel…unless you make it better. Is it better?”</blockquote>
Not really in fact, so I just sketched a horizontal filter and let the users decide the fate of it. Some users find it unusual and had difficulty to use it, so I chose a dropdown filter.
<img alt="" src="http://ift.tt/2sEPwx7"><img alt="" src="http://ift.tt/2tovBjr"><img alt="" src="http://ift.tt/2sEL5T5">If I had more time I would love to test a slide left/ right overlay
<ul>
<li>“What’s the difference between DISCOVER and WISHLIST?”</li>
</ul>
Both categories were useful: DISCOVER help users find new events, WISHLIST help users pre-select events and decide later.
Solution: I merged HOMEPAGE with DISCOVER. I also decided to differentiate DISCOVER &amp; WISHLIST by changing the screen background in black to contrast with the white background.
<img alt="" src="http://ift.tt/2to1TuU"><img alt="" src="http://ift.tt/2sEK4ua"><img alt="" src="http://ift.tt/2to1UPu"><img alt="" src="http://ift.tt/2sErzpZ"><img alt="" src="http://ift.tt/2sExn2s"><img alt="" src="http://ift.tt/2sEEqIF">
<ul>
<li>Look and Feel: how to deal with UI feedbacks in early user testings?</li>
</ul>
During our testings, people tends to focus on the look rather than usage. So I like to prepare a scenario with a goal to reach to better understand if the UI feedback is crucial or not.
<blockquote>Because of time constraints, I decided to not include in my lo-fi iterations UI feedbacks that didn’t change the app usability. Later on in the high-fi mockups, I implemented them.</blockquote>
<img alt="" src="http://ift.tt/2to1Vmw"><img alt="" src="http://ift.tt/2sE9po6">Paper Proto &amp; user feedbacks
<ul>
<li>“Is the event map link to City Mapper?” “Can I add the event to my Google calendar?”</li>
</ul>
Solution: Sure, API.
<h4>LO-FI DIGITAL PROTO — Day 5</h4>
<img alt="" src="http://ift.tt/2to8LIm">
<h4>HIGH-FI DIGITAL PROTO</h4>
<img alt="" src="http://ift.tt/2tnPRS5">
Thanks a lot for reading this! feel free to leave a comment.
<img src="http://ift.tt/2to1VTy" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2sEBawE">5 days Design Sprint to Create an Event Finder App Helping People to Declutter and Get Inspired.</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

5 days Design Sprint to Create an Event Finder App Helping People to Declutter and Get Inspired.

5 days Design Sprint to Create an Event Finder App Helping People to Declutter and Get Inspired. (UX Case Study)

Concept Map, Storyboard, Interactive Prototype

CONTEXT

Top Stories