My Process
Users / Audience
Age: 21 to 50 years old
Annual income: $30,000 to $120,0000
Location: Large Urban Areas, United States
Interests: Food Tours, Bar Crawls, Trivia Nights, Hiking, Festivals, Block Parties, Art Walks, Sports, Nightlife, Concerts, Board Games, Family Friendly, Bowling
Attitudes: Optimistic, Social, Seeks Spontaneity
Challenges: Social Isolation due to Urban Culture, Lack of Time and Organization for Family Outings, Friends are Picky
UI Inventory
I created a UI inventory of the elements from the website's wireframes and information architecture. This artifact helps to ensure all relevant components are included within the design and that they are consistent.
Competitor Analysis
I research similar companies and products to see how the competitors used UI patterns to solve their app problems.
Benchmarking
Using Benchmarking, I identify the correct usage of the design patterns seen in existing products to remix for my design.
What they did well:
Allows personalization - by letting the user define their interests.
Search filter - Allows the user to narrow query results.
Card design pattern - organize and contain event details with multiple data types (images, text, interaction). Ensure consistency.
Carousel design pattern - Reduce cognitive overload by allowing the user to concentrate attention on a few items at a time.
Solution sketches
I start coming up with solutions to the problem statements by sketching. This process allows for quick and iterative explorations.
I did sketched the onboarding flow, event feeds, user profile, and other UI components like cards and micro-interactions.
These sketches are the foundation for the wireframe creation in the next step.
Lo-fi wireframes
Using the sketches as a guide, I created lo-fi wireframes to test flows and information architecture.
Style tile
Using the provided moodboard, color palette, and logotype, I created a style tile that reflects the direction I plan to design the UI.
UI components & Interaction design
I created the UI components based on the wireframes and the style tile. These are the components that make up the high-fidelity mockups.
Hi-fi mockups
I designed the screens of the mockups using UI components developed in the previous stage.
Prototype
I created the prototype to test the visual design and the flows of the app.
View Prototype »
Guerilla test
I conducted guerilla usability testing to get feedback on the design solutions. Due to the Covid pandemic, I ran the test through Zoom.
Read the result detail »
Result sumary
Positive feedback
The participants found the design to clean and the flows make sense, and the animation used in micro-interaction is fantastic and is a nice touch to bring delight to the users.
Opportunities to improve:
It was not evident to the participant how they may edit their interest preference in the user profile. This issue may be due to a proximity issue.
The participants didn't understand the purpose of having a contact button in their profile meant for them to see.
The interest section in the user profile wasn't as evident to the user.
Taking the guerilla test's feedback into consideration, I made changes to improve the app's design.
Outcomes & Results
The final design is the result of iterations based on usability test insights. The next step would be to validate the changes made before delivering the product to the client.
Personalization Through Onboarding:The onboarding process provides an opportunity to understand the users' preferences. This information helps the app find fun events tailored to the users' interests.
Give the user control through customization:The app gives the user control over their preferences by allowing them to edit their interests and, in turn, their event feed.
Keeping users engaged:Setting and editing event interests and micro-interactions provides personalized information that makes it more relevant to the user and more interactive and fun.
