Catmash : Web App Concept
Role & Service
UX/UI & Graphic Designer / Technical Test
Timeline
June 2024
Process used
Research, Ideate, Prototype, Visual Identity
— Project background
Catmash is a web application concept I had to make for an UX technical test for l’Atelier. Based on Facemash concept where you have to choose between 2 people (which was the first version of Facebook), the fictional client wanted a web app where the user needs to vote for the cutest cat. From this vote, users have access to a leaderboard where the cutest cats are ranked. I used some design thinking parts for my UX process and began by defining ideas for this specific test before going straight to prototype phase. Later on, I created the visual identity and different pages for this application. The project deadline was one week. Since I didn’t get the job for this test in the end, I decided to share it so I can share my process, set of skills in the UX field and even more.
— 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 round 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. After that, I had the idea to render this huge 3d typography (you can see it above) on the homepage, 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.
— Hi-Fi Prototypes
Next part of the process was to turn my wireframes into prototypes. This also involves setting up the styles, visual identity 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 for the animated prototypes part. This allows me to quickly build interfaces for both desktop and mobile screens. Below are the screen made for the mobile version.
— 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.
— Components Kit
Catmash — Styles & Icons
Catmash — All Components & Variants