Problem
Solution
Our team spent around 3 months completing extensive research in order to develop the best possible solutions for our users problems.
We identified four key issues to guide our design solutions:
Ideate
Design System
My Role
To build and input a functional design system for the Grindr app UI redesign.
Grindr's UI had a cluttered and ad-heavy appearance, with minimal color and an unfriendly experience. This is what inspired us to change the system.
The original UI redesign was an exploration, which resulted in the many accessibility issues including:
-low color contrast
-lack of solidified design system
-no proper component and type scale usage
As the design system designer, I was handed off the project to input a design system in an established design style. To improve the accessibility while maintaining the integrity of the original design I decided to:
Adjust and limit color usage for better contrast while preserving UI design integrity
Repopulate design with component cards and buttons
Solidify grid design with exact sizing
In order to make the system as effective as possible, I utilized Figma capabilities to componentize all cards, buttons, and icons as well as enforcing the structure of the UI with auto layout. I embedded a proper type scale and simplified the nav bar while preserving the original aesthetic.
Proposed Features
We divided Grindr into three new modes based on what the user was seeking.
Community
A secure and trustworthy color envoking dependability and peace — the ideal community traits.
Romance
Compassion and warmth, encouraging an emotional softness and gentle affection.
HookUps
A mysterious color that entertains possibilities and intrigues the mind.
To accompany the new modes, the original icon was reimagined into new designs to assist users in navagating the new features.
Each mode has its own color palette and iconography, making it easy for the user to distinguish.
A newly designed nav bar that includes the new available modes based on what type of connection the user is seeking.
A fresh redesign that continues to uphold the functions of the Grindr app and more.
Make connection with the local queer community more accessible.
Incorporating a check up system to provide support for users when they interact with their matches.
Inclusion of short daily personal moments so personalities can shine.
Create a feature that allows users to swiftly find the safest and most convenient routes to travel home.
