My Role
-
UX Research
-
User Flows
-
Wireframing
-
Prototyping
Tools Used
-
Figma
-
Wix
-
Miro
The Problem
The previous app design was a location centered platform and assumed users cared most about the proximity of events around them - this is not the case.
Students care about who's attending and worry about their safety. These are needs that the current app failed to meet.
ORIGINAL APP SCREENS
My Process
Empathize & Discover
Define
Research & Synthesize
Ideate & Evaluate
Design
EMPATHIZE & DISCOVER
The Beginning
I joined this project when the design team had begun a redesign of the previous concept. They were running into usability issues and the lead designer decided it was best to start over.
User Interviews
The team had collected user surveys with over 1.7K students to gain insight on how they attend social events.
When asked what would convince them to attend or not attend an event our survey of 104 students found that 51% of students reported if their friends were going, and 25% reported the safety of the event.
The previous design took a geographic approach, which centered around a map and made the assumption that students cared most about their proximity to the events. This survey shows us that the importance of proximity of the event to their location only effected 16% of students. These stats lead our team to shift our focus on social and safety rather than location.
Market Research
I was in charge of researching popular social media apps which included Instagram, Snapchat, and Facebook Messenger.
I also researched Eventbrite and Facebooks Events to see what industry standards work for other event platforms.
EVENT SCREENS
MESSENGER SCREENS
DEFINE
Persona
Using the results from the surveys and interviews we created a Gen Z persona named Rachel.
IDEATE
User Flows
Before we began drawing up wireframes we wanted to establish the functions of each screen. The creation of user flows helped us prevent missed opportunities or easy mistakes before we start building lo-fi screens.
ONBOARDING FLOW
Mood Board
During our surveys we learned that 72% of participants use dark mode. We leaned into that and decided on dark colors with fun bright accents.
Solution
Togathre accommodates Gen Z's social planning needs to feel safe in their local community while making it easy to keep in touch with their peers.
RESEARCH & SYNTHESIZE
A/B Testing
A set of lo-fi designs and prototypes were quickly created and tested.
Below are 2 versions of the Create Event screens. Testing was inconclusive for a winner and both designs received iterations. Ultimately we decided V2's design was more cohesive with the rest of the app.
V1
V2
User Testing
We tested the final prototype to make sure users were able to use the app with ease and to see where they got stuck. I conducted in person testing with a high school student and she was able to use the app fairly easily. She gave us feedback of wanting a calendar view of events, which is a great feature for us to consider.
DESIGN
Wireframes
In response to industry trends and usability testing, hi-fi iterations were completed with a focus on improving contrast and increasing readability and accessibility.
All students 9th grade and up should easily be able to use this product.
V1
V2
FINAL
UI Iterations
We worked on 3 different main iterations until we were able to produce a final product. Below you can see the style and branding progressions to make the app look less techie and more personable and fun.
V1
V2
Final
FINAL SCREENS
Mobile
Below is a user flow for how a student would login, view an event on their homepage, respond to a comment on the event page that their friend left them, and then find the event on their profile page once they mark themselves as attending.
Final Design Guide
Future
We are launching soon!
Development is underway as we continue to build for all available use cases.