Chomp

Quick UI/UX redesign project for Chomp’s changing business model

What this case study showcases:

Feature Redesign, UI/UX, Freelance Project

Project Timeline:

13.5 hours in February 2025

Tools:

Figma

CONTEXT

Chomp is a trivia/quiz app launched by Gator Labs in June 2024. They're a small start-up, and they hired me as a freelance UI/UX designer to help redesign the app's UI before going into fundraising.

HOW CHOMP WORKS

Chomp users can win crypto by answering trivia questions and betting on other users' answers. After a set time, questions expire, and users pay to reveal questions to see whether they won money for their answers.

DESIGN CHALLENGE

Chomp’s business model is changing, and they needed a new Question Card design to better suit their needs. Under the new business model, instead of requiring users to pay to reveal questions, users will pay to answer questions and all the answers to questions will be revealed after a specific amount of time.

I was asked to design a hi-fi version of Chomp’s Question Card that resolves these critical issues:

Question Cards disappear once they have been revealed
“Revealing” will soon be irrelevant as an affordance as users will no longer have to pay to reveal expired questions

PROJECT GOALS

Update cards to fit new requirements
Maintain consistency with the rest of the app’s UI
Make design fun and engaging

QUESTION CARD DOCUMENTATION

WHERE I FOUND INSPIRATION

Card designs in other apps on Mobbin and Dribble
Competitor research of Polymarket
But the best UI inspiration came from Chomp itself

PROPOSED DESIGN DIRECTION #1

PROPOSED DESIGN DIRECTION #2

GARNERING FEEDBACK

I met with Yihwan, Chomp's PM, to present the two design directions after about 12 hours of work. He preferred the 2nd design direction, as he appreciated the design's directness and use of icons and color. In the 1st design direction, he appreciated the purple circle as an "unseen" indicator and said he would be interested in exploring that in the future.

In our conversation, we decided to add more specific icons to the correct and incorrect question cards to enhance clarity and consistency. Additionally, he suggested making the text the same for all the buttons, as they ultimately lead to the same destination.

HANDING OFF DESIGNS

To incorporate Yihwan's feedback, I standardized the button text to "See Answer" and added a check icon to the correct Question Cards and an x icon to the incorrect ones. I also resized all the icons to better fit the x-height of the type (in the same way I had with the initial clock and present icons) and moved them to the front of the words.

Then, I created a Figma component of the Question Card (with the 3 variants) and created an interactive prototype of the final design (shown below).

Finally, I wrote full documentation of all the design changes along with spacing, font styles, hex codes, icons, etc., for the engineer to implement the design.