Catmash : Matching App Concept
Role & Service
UX/UI Designer / Web agency
Duration
1 week - 2024
Process used
Design Thinking, UI Kit, Prototypes, Visual Identity
— Project background
If you ask my friends they all gonna tell you I’m a big cat lover. Usually technical test aren’t fun or relevant but in this case it really was.
Catmash is a matching application concept based on Facemash principle where you have to choose between 2 people (which was the first version of Facebook). From this choice, users have access to a leaderboard where every cutest cats are ranked. I started by a clear benchmark before I begun defining ideas for this specific test, from user research to user flows, I wanted to craft a cohesive and useful experience for any users (cat lovers being core users).
Later on, I defined colors styles created the visual identity around a meaningful logo and a big 3d typography for the application homepage.
— IDEATE
After my research, I created a sitemap and user flow for steps any user can go through and every possibility in Catmash. User can complete two main tasks :
User starts the first round
User wants to access leaderbooard
To identify how using Catmash can benefit for users, I focus on options and usability to make it enjoyable instead of a simple choice. I added a system with levels and rounds. Each level has three rounds where the user choose his favorite cats. I’ve decided to block access to the leaderboard until the user starts the first level so its choices are real and not influenced by other votes.
— Lo-Fi Wireframes
Based on my research and ideation, I sketched multiple pages to see how my user flow and functionalities can provide a better user experience than the basic concept. During this process, I thought how the visuals and information architecture will improve the user interest and catch his curiosity. To make sure Catmash is accessible for everyone I built sketches for a desktop and mobile version. My goal is to show that this web app is fun to use. Later on, I reproduce those sketches on Figma to set up correctly my ideas. I created clean wireframes with the mobile screens in mind first (most users gonna use mobile to play).
— Hi-Fi Prototypes
Next part of the process was to turn my wireframes into prototypes. This also involves setting up styles, tokens, variables and workflow based on research and accessibility rules. From those, I made several components and variants with realistic sizes, I added special interactions in each variants to animate my prototypes. This allows me to quickly build interfaces for both desktop and mobile screens. Here’s some example below of Catmash mobile screens.
— After Thoughts
This UX technical test has been a real challenge for me. From research to final animated prototypes, I wanted to try a new approach and managed to produce everything in time despite the short deadline. I was quit overwhelmed at the beginning but I decided to trust the process and my vision with user needs in mind. I am proud I learned new things too and improved my usual process. It was also really important for me to come up with useful functionalities and a strong brand identity for this project so it has an impact on users. I wanted the application to be enjoyable and attractive compared to other existing solutions. It was very interesting to spend more time on prototypes animations and to come up with a realistic user flow that delivers a great user experience.
— UI Kit
Catmash — Styles & Icons
Catmash — All Components & Variants