A UX/UI Case Study
mood focused Food\events\social app
The Brief
Create a discovery app that will provide an easier way for people to find new and unique activities to do in Toronto based on their current mood and/or desired experience
My Role: UX/UI designer (Teams of two)
Duration: 5 weeks, July 2018
Tools & Methods: Design Thinking, User Interview, User Persona, User Journey, Card Sorting Techniques, User Flow, A/B Testing, Hand Sketching, POP Marvel App, Moqup, Sketch, Adobe XD, Adobe Photoshop, Adobe Illustrator, InVision, Project Management tools, Team Collaboration.
The Task
After initially interviewing 10* users, we confirmed that:
It’s challenging for a group of friends to discover a unique experience (food/event) in Toronto through online searches alone or using available apps, all while trying to agree/discuss/decide in various other social platforms.
Currently, users need to go through a long process of searching on google or available apps and still not finding what they want. In addition, there is no product in the market that uses 'mood' as a search method for discovering a food or event, or has capable in-app messaging for a group to discuss and decide upon chosen place (in our competitor research so far).
*We chose 5 users each based on the Nielson Norman recommendation that more than 5 users for usability testing is a waste.
Our Proposal
When we have so many options for activities, it’s often difficult to sort through them to find new places that actually meet the needs of our night, and then create a cohesive itinerary of events for it. Moreover, how does one even find out about all the cool, new activities available in a city like Toronto and stay up to date across all the various existing social platforms with their friends.
With FOMOnomo:
We want to offer the user unique activities/restaurant choices based on their current moods and desired experiences (ie. relaxed, cultural, energetic, chill, spiritual, happy, tired, inspired)
The app will make planning easier for groups and allow people to decide on where they want to go together based on a collective feeling/mood
The app allows people to look for activities and experiences all in one place as opposed to looking through multiple apps/ websites
We have also allowed the user to search for activities/events without using their mood, if and when they so desire
Design Process
Empathize: User Interview
For this project, we started by doing a quick research on who the target users are and then interviewed 16 of them to gain insights to shape the solution. We defined interview objectives and questions before starting the interviews.
Target users
People aging 20–45 years old, are tech savvy, and comfortable using apps on a daily basis
Young professionals who are curious, adventurous and sociable.
People who enjoy spending time with friends over new and unique experiences
People who enjoy planning and are open to trying new things, but find it difficult to discover new things
Objectives
Find out how users search where to go for nights out/events/food, are they the planner/follower, or is it plan by committee?
What existing apps/methods used to organise events/evenings etc?
Discover users’ journey for event planning, for example a night out with friends: What do they do on their night out? When, where and how do they make their decisions (where to go exactly)? I used the 6W approach (what, when, where, who, how and why) to uncover insights and pain points
How do people categorize their experiences, through expressions of feelings, emojis on social media platforms etc?*
*We realize that to develop the app to its full potential, we would need to undergo an extensive user research period, through card sorting methods etc to differentiate different experiences with different moods, as this was a 5 week project, we did not have the time to achieve this, but would be on a wish list of desires for the future development of the app.
We then organized our interview notes in excel so it’s easy to identify patterns for a same topic:
Define
The interviews helped us justify the problem we had initially identified, that people found it difficult to discover new and unique choices and always fell back to their old safe favourites. By interviewing the different age groups, we were able to discover interesting insights and common behaviors of our potential users. All the insights helped us shape the solution later on.
Insight #1: Users find it hard searching for a new place to eat/drink/go clubbing
They always start by google search, the new feature "Explore This Area" has been an amazing addition to Google maps and people found this really helped with discovering new places. However, they always end up seeing a laundry list of restaurants/clubs and events and they have to check one by one to know where exactly the place is and what type of music it plays, or ambience it is, if they are not already familiar with it. The process is time-consuming and tiring for them.
Insight #2: LOCATION first!
The most important factor users consider when planning a night out is the location! — Where is the party, if it is in a lively area, how far is it from their homes and if there is anything happening in the area they want to go, if it's a concert, is there good food nearby, or will they have to travel again? We want to find a way to help them locate their needs in an easy way.
Insight #3: There's more to a night out than food
Going out is more than just going out for food, it can comprise of a number of different activities. Take a Friday night out, two friends can start the evening by grabbing a bite to eat in a restaurant bar near their work. They think about which bar to go first rather than which club. After having some drinks at a couple of bars, they finally think about going to a nightclub at around 11.30 pm, but can be put off and cut their night short because of long lines/ wrong crowd/ music/ ambience. If they had planned ahead, even while sitting enjoying a drink in the bar, it wouldn't have taken long for them to head to a club that would have been suitable for the mood they were both in.
Insight #4: Users have their own criteria in choosing the places
In order to help them find what they like, We asked the criteria they care about and how important each factor is for them when choosing bars/clubs/events. This information helped us design more advanced filters catered to their needs, therefore, the user can start by selecting their mood but then specify more towards their final decision. They can also bypass the mood feature altogether and solely use the app with the filters to discover more general events/bars/restaurants in various chosen areas
Insight #5: Users are improvisers. They don’t plan!
For a Friday night out, 4 out of 5 users don’t plan where to go in advance. Instead, they decide “at the moment.” At 6pm, users decide which bar to go first when they finish work at office. At 9pm, while at the first bar, they decide which bar to go next. It is at midnight (when they are almost drunk…), when they decide which club to go. This insight helped us catch the touch points and the context of users interacting with our product. Hence the feedback helped us to let users bypass the 'mood' feature and just search within certain areas, by including an in-app messaging feature, this allows for quick and easy communication between friends, no loss in translation because somebody didn't see it on one of the 5 social media platforms they all converse through.
Insight #6: It's tough to consciously categorize different bars/restaurants/events based on moods
As stated above, we realize we would need to undertake significantly deeper research to be able to categorize based on moods. This doesn't even touch upon the fact that what one person finds exciting, another may find not. However, we are certain we could achieve it by gathering a large number of users and having multiple moods for various bars.restaurants etc would also work. You can already view this by looking at the likes of Yelp, where businesses define it under a number of categories, such as; lively, family friendly etc.
User Personas
From the insights above, we created 2 User Personas and defined 5 must-have features in our solution:
Initially have user search through their desired mood/feeling to get inspiration and ideas for bar/restaurant/event
Allow user to skip this process altogether and go straight to filters and maps
See all bars/restaurants/clubs/events on a map so users can easily locate them
Include filtering system and an advanced filter for further specification, so user can find places they really want to go to
In-app messaging service for quick and easy communication
Ideate
working out the information architecture, user flows and a single successful user flow
Post-it notes are perfect for this early stage of the process
Following on from creating the User Personas, we drew up an initial Information Architecture (IA) structure for the app, followed by mapping out the User Flow to visualise the navigation in different scenarios a user may choose to set out how many screens we would need to design.
Once we had completed the IA and a sample User Flow from one of our User Personas, we set about Paper Prototyping and creating a Low-Fidelity prototype with POP app, a paper prototyping app that allowed us to test the initial simple user flow we set out by using our hand-sketched mock-ups.
Our next step was then to recreate these sketches on Moqups, moving towards a more Mid-Fidelity prototype by refining the screens and features to test with users for iteration.
The final stage in the process was to take our prototype to a Mid/High Fidelity level, by integrating the UI aspect of the product and bringing everything we had created so far into Adobe XD and using the Invision App and execute the app as close to the real thing as we could get so as to let users test it out and give us some really great user feedback.
Information Architecture
We initially created the Information Architecture of the app based on best case scenario, after re-assessing and discussing what would be required for the minimum viable product (MVP), we ended up scaling back so we would be able to produce a good functioning and a good looking product for the final hand up of our five week course.
The final Information Architecture for the app is more streamlined and simplified, and if we were to further develop the app, this is the path we would continue on.
User Flow
User Flow: Version 1
Created prior to speccing out the screens, tasks and CTA's.
Follows a linear flow, which is highly unlikely given our type of app.
We weren't entirely sure what screens were required, so we had to start somewhere.
User Flow: Written version
We needed to get a better understanding of which “actions” required a new screen, CTA, or task.
By physically writing out every single action of a created flow for each of the User Personas we created, we were clearly able to see just how many screens would be needed, hence would it be viable to create or did we need to scale back.
Click on image to bring up complete written user flows for both personas
User Flow: Version 2
After analysing the user flow in depth and creating a clear written version, we were now able to understand what screens, tasks, and CTAs that would be required.
As expected, we elaborated on our initial iteration (this seems to be a common theme in the industry!).
We decided to focus on one user flow for the final presentation, so as to achieve the best outcome in terms of design and functionality.
User Flow: Version 3
Final user flow for the user persona we created for 'Hailey Adams'
Non-linear (goes to different tabs).
Retains elements from original user flow (Launch App → Copy link and share).
We learned so much from the various developments and iterations of the version updates.
Paper Prototyping
Paper prototyping cannot be underestimated for quick iteration and instant communication of ideas
Once we decided what our chosen user flow was, we put our visions on paper and sketched out a low-fidelity wireframe.
We focused on functionality and avoided getting distracted with the UI aspect of things.
It was a really great way for us to clarify all the features needed, being able to distinguish essential versus desired but not as important for the MVP.
A/B Testing and Iteration
From hand-sketching to hi-fi mockup, we did several A/B qualitative testings to help us make critical design decisions.
POP Testing (App that turns sketches/images into an interactive prototype)
Once we sketched out the screens, we uploaded and hotspotted them on the POP app.
It was a great way for to refine the User Flow with quick and easy iterations done instantly without any programmes being used.
We also realized that more user flow screens were needed but some screens and features could be combined or eliminated.
This step proved invaluable in the process, it manages to clarify pain points, requirements, etc, and as a team you are able to instantly
Moqup Prototype
Our next step was to develop these sketches using the tool Moqup, bringing our mockup to a low/mid fidelity standard.
Although it was still in low fidelity, we now had a more refined product (screens and features) that we could test on potential users.
However, because members of the group worked on different parts separately there was some inconsistency with the pages, they looked very different and a lot of our content wasn’t finalized.Back to the drawing board!
Usability Testing
To achieve honest, viable results, we created a scenario and a set of tasks for our users, thankfully there is a huge number of excellent resources available online specific to the app you are testing. (template)
After compiling our scenario and tasks, we then conducted 2 usability tests per group member. (results)
Once these were completed we then synthesized the feedback and insights through group discussion and set about compiling a list of the most essential features that required attention and created a 'Primary, Secondary and Wish List' spreadsheet.
This stage taught us that you can never, ever do enough testing (time permitting!) the feedback and insights uncovered proved invaluable in us achieving our end goal and producing a well designed and functioning app within the timeframe and leaving enough scope to develop the app further, if so desired.
Style Guidelines
Final Prototype
Ideally, we would love to continue to develop and refine the product, but for the purposes of the tight 5 week deadline, this was our final prototype:
FOMOnomo Video Run-Through
FOMOnomo Invison Prototype
Feel free to run through the the app, Please be advised there is limited functionality in terms of all buttons/choices working fully, as we focused solely on mvp, considering the time constraints, we wanted to get the best possible prototype completed.
Conclusion
Based on the interviews with participants and people within the food/events industry, we have definitely uncovered a niche way of planning your night out. However, there is still a huge amount of research and development to categorize aforementioned events/bars/nightclubs etc, this would require in-depth user testing, but we could also use data provided by establishments already on google/yelp etc to get us started.
I really enjoyed working on this project, it opened my eyes up to all aspects of app creation and development and gave me a new level of appreciation and understanding that one needs to comprehend all stages, all roles, all that is involved in the creation of an app, let alone a successful app with hundreds and thousands of dedicated users. I learned the power and the complexity of user research and just how multifaceted one user can be to the next, while on the face of it, they appear to be within the same demographic on numerous levels. A/B testing also proved invaluable to us, when we were stuck at a crossroads with a functionality decision, sending it out to the users would usually answer our queries immediately, the power of instant feedback is not to be underestimated.
The onboarding screens for Fomonomo, preparing the user for a great user experience
Learnings
This project gave me an understanding into just how difficult it is to introduce a 'new' app into an already saturated market. The touch points we need to consider before changing a small button on a screen. The importance of really considering a USP and is it worth the gamble, as the later you leave it in the process to change, the more trouble and expense it costs. When in doubt, strip things right back and focus on the MVP versus Wishlist and decide what is viable, given your timeframe/budget/resources.
Early on in the process, I cannot stress how important it is to use the KISS method Keep It Simple Stupid, for example the User Flow, it was so easy to get lost in your own knowledge of existing apps and create a 5 hour long user flow, the reality for your app could be much less convoluted. If you keep it relatively simple and straightforward in the beginning, you can always add more complexity at a later date. We also learned that when working in a group, the importance of over communication and transparency, never presume anything. One person's idea of a button could be completely different from yours, draw it out, explain it, do whatever you need to do to make sure everyone is on the same page and working toward the same goal.
Working closely with my teammates, who we had only just met, forced us to put personality traits aside and focus solely on the product and it was such an amazing experience. I still can't believe we were able to create what we did in the 5 weeks provided (two evenings a week, to be precise!) so I felt extremely lucky to be in such a dedicated, creative and autonomous group. I have enhanced myself in understanding the broad spectrum of design, thinking about the limitations and asking right questions. Communication and clarity is key to success in design and even more so in a collaborative environment.