What You Doin? A UX Design Case Study.
When this project was brought to us, the original app concept ‘Gravity’ is a map-based social networking app that allows users to see what their friends’ plans are and to communicate their plans to their friends. The end-to-end user experience is basically finding an ‘event’ in-app and attending it in-person. The primary interface of Gravity is the map, and the primary focus of Gravity is the event creation. Events appear as pins on the map. Users can tap on pins to see event details, and to join events.
The Team
Our Team consisted of four great designers. Richard and Veronika were in charge of the UI team, and did an amazing job. On the User Experience side of things, the team was comprised of Tim and Myself.
Project Kickoff
Initial Meeting
We met with our client James to determine the project scope, as well as the business frustrations and goals, and of course to get some insight on the minimum viable product (MVP). It was crucial that we get some detailed information and ask some probing questions in order to have clearly defined business, project, and user goals.
We were able to clearly determine the following:
Business Goal: To have a well designed MVP for their app so they can enter the market place and to ensure their users have an extremely effortless and positive experience.
Project Goal: Clean and simple MVP and super easy on-boarding process for users.
Because our client came into this meeting with a very strong understanding of the marketplace for his app’s niche, and had a clear idea of what he wanted for his MVP, we had him do some feature sorting for the MVP. We added one feature per PostIt, and had our client sort them into three buckets:
Must Have, Nice To Have, and Reconsider.
Once we wrapped up our meeting, we had conceptualized our MVP:
- On-boarding process where users create accounts
- App permissions to access user’s contacts and location
- Use the google maps API
- A friends list
- Placing of map pins which are visible to friends
- Push notifications
- Easy creation of events
- Focus on private friends only (invite bases)
- People should spend less time on app and spend more time with friends
Research
With a clear understanding of the business & project goals, it was time to get digging and learn our users. We conducted surveys, interviews, and domain/competitor research in order to get as much information as possible and find out the frustrations for users of similar apps, and to find out what we can leverage against our competitors.
Survey
We conducted a survey that generated 100 responses, aimed to get information from users to collect data on frustrations, things they like, and features they expect or could do without when it comes to event creating apps & planning hangouts with friends.
Key Survey & Interview Findings:
Majority of users are from 18 to 30. Second Majority, 31 to 40.
Time, People & Type of event are among the most important deciding factor for people to attend a friend’s hangout/event
Majority of users like to use email or username as a method of adding friends
A majority would want a map view for location-based apps. However, people also prefer to have options for both depending on the information being displayed on the screen.
A majority of people are currently using texting, phone calls and chats (WhatsApp, messenger) to invite friends to hangouts/events.
There is an overwhelming amount of users illustrating frustrations with planning hangouts and events:
- Information Overload (Too many notifications and everything is too spread out on different platforms)
- Concrete headcount
- Responsiveness
- Expectation
- An all in one system for hangouts
Domain Research
Now that we have a good grasp of the problem, minimum viable product, and user frustrations, we wanted to dive more into the market and see if there are any significant competitors. In our initial research, there were two major large competitors. However, later on during our planning phase we stumbled upon a another very similar competitor.
Facebook Local
The aim of facebook local is to discover places to go to and for a user to explore events happening near them. When we dove into the app, we have noticed the amount data Facebook has for being a tech giant and having millions of active users. Although, it may seem like a positive factor one major problem we found is information cluttering which can affect a users cognitive experience of using the app.
“It is good that Facebook can collate public and private events to be in one app for users to see what events or hangout your friends are going to, but at some point, there are too many things going on in one app.” — Team Analysis
Eventbrite
Eventbrite allows anyone to create, share, find and attend new things to do that fuel their passions and enrich their lives. Music festivals, venues, marathons, conferences, hackathons, air guitar contests, political rallies, fundraisers, gaming competitions.
Eventbrite can be considered to be an indirect competitor. Unlike Facebook Local, Eventbrite focused on public events only. Users can buy tickets and discover events in their city. However, creators would need to pay Eventbrite to have their event on the platform.
Mappen
Mappen helps you plan your social life by showing you where friends are and what they are doing so you can get together. Mappen is considered a direct competitor to Gravity.
When testing Mappen, we have discovered some problems:
- A recognized dark pattern where people are perceived to be following someone, but in fact your sending an invitation for people to join Mappen.
- Privacy was not built in mind, as your location is tracked live in conjunction with your other friends.
- There is no real emphasis that the app is designed for hangouts and meetups
- Feels like a tracking app
Then theres us. What You Doin.
Gravity aims to have a fast onboarding experience and to nail our MVP down. Gravity is a private map-based social networking app which allows users to create hangouts for their friends to join. Friends will be able to quickly find the events that matter to them and focus on attending hangouts.
The things that set us apart from our competitors are:
- It is designed to have allow users to create and join hangouts quickly
- Designed with privacy in mind, no tracking of your location or stalking, the only location placed is the event of the location
- We want users to spend less time on the app, and spend more time with friends
Planning
Affinity Diagram & User Persona
Once we have collected our data from our interviews and surveys we started our Affinity Diagram
An Affinity Diagram is a tool that gathers large amounts of language data (ideas, opinions, issues) and organizes them into groupings based on their natural relationships
We combined the data points from our interviews and survey to help us organize crucial categories to help declutter the amount of data that we had. We then analyzed the group of data and made necessary changes together. From this, we created a user persona.
A User Persona, is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.
User Scenario
Once we had our User Persona, we put in place a typical User Scenario in order to help us start putting together a plan of action to create the best possible experience for our users, and help relieve their frustrations.
The Userflow
While the UI team was busy with their design inceptions for rebranding gravity studios name and logo, we focused on the functionality of the app.
The design of the final user flow was done by combining several tasks flows together. By creating task flows, we are able to focus on one specific start and end point when the user is using the app. We then combine them into one streamlined user flow from the moment of the app being open the first time to the user finishing their desired tasks. We put a lot of focus on creating the most simple flow for users in order to give them a truly seamless experience.
Design & Testing
Once our planning phase was done, it was time to get into the fun stuff.
Design Studio
A design studio is a workplace for designers and artisans engaged in conceiving, designing and developing new products or object.
After testing our paper prototypes we got together with the UI team to work on key screens that we wanted additional perspectives on. Design studio allows us to collaborate and discuss designs in order to design the best possible product we can.
“This was very valuable to the UX Team, essentially we can combine four peoples ideas into something new and innovative. The UI Team is also able to give us another perspective and help us feed in new ideas that we may have missed previously” — UX Team
Wireframes & Paper Prototype Testing
Once we had our agreed upon screen designs, we got to work on some wireframes in order to create a paper prototype to test users with. The purpose behind this is to simply observe users when they are given a specific task, and watch for user’s hesitations and clicks to see just how intuitive our design is.
Key Findings:
- The add event call to action is not intuitive enough
- Join call to action on create event card is not apparent enough (later obvious in higher renderings)
- Bottom Filter options moved to the side with a label (timeline) for natural right hand accessibly.
Handoff to UI
Once we have done our design studio and discussed and agreed on the screens, we started on Mid-Fi renderings. During Mid-Fi rendering we have also use Invision to verify further if changes are needed and conducted A/B testing. One tested the UI team worked on the Hi-Fi screens. Once the Hi-Fi screen is done, we used Invison to do final tests and changes before we concluded to be a prototype.
“You guys have clearly understood the MVP and have made changes that made it easy for users. I especially like the innovative timeline feature where you were able to solve the problem of a list view where it may not be suitable for a map-based app.” — James Strieb (Client)
Future Considerations
During our design process, we often had ‘aha moments’ where we wanted to implement more ideas. However, due to the scope and time constraint of the project we focused on the core features.
Public Events
Currently, we focused on private events where only friends you add can be invited. Once there is a base of users using WYD, Gravity Studios Inc can consider adding public events. From our initial thoughts, we thought this should be a toggle to prevent information clutter. More testing should be done to see if this is a viable option for Gravity Studio Inc.
Offline
Offline mode is for situations where users do not have mobile data or wifi. The app will still operate as usual. Users should be able to add events and browse existing events that were previously fetched from their last connected session. The app should update automatically once the user has access to the internet.
Built in Chat
Currently, there is no chat option built into the app. Users will have to have use third-party chat platforms if they have more detailed questions. More testing and research is needed to determine the viability of having a built-in chat and whether it would fit with WYD’s user experience.
Colour Coding
This idea was thought of when we thought of adding public events into WYD. With more users and more event/hangout content, users will be faced with information cluttering. In the future, colour coding can be considered to help users differentiate the type of event/hangout. Further research and testing would be needed to determine how colour coding can be implemented.
Reflection
It was great to work with a team of such highly skilled designers on a great app concept, and getting to design an app that I would actually use! I have to say, the UI team were a couple of rockstars. Veronika and Richard are amazing at what they do. My UX partner Tim was also a total asset to the team and is an unreal designer. I didn’t think I would enjoy designing an app as much as I did, and it was a great learning experience!
