Trivia game / redesign
Top 10 (originally "Pes Vres" in Greek) is an engaging social trivia game that has gained significant popularity, particularly among young adults. This dynamic game transforms casual gatherings into competitive yet entertaining experiences.
The game requires a minimum of two players or teams competing head-to-head. Each round presents a specific prompt, for example "Name 10 songs by Queen". The active team must then identify the 10 predetermined answers within a set time limit.
What makes Top 10 particularly engaging is its blend of knowledge, quick thinking, and social interaction. Teams gain points for each correct answer, creating an escalating competitive atmosphere as the game progresses.
process.
identifying the problem
As someone who's spent countless game nights playing Top 10, I've experienced firsthand both its addictive appeal, but mostly its frustrating design limitations.
The current design appears outdated and fails to meet modern design standards. Throughout the game, users struggle with poor readability as text proves difficult to read. Compounding these issues, various interface elements don't meet the required contrast ratio, creating significant accessibility issues for players, who may have visual limitations.
Additionally, the interface is visually noisy, with excessively bold colors and numerous distracting elements. These compete for the user's attention, making the game less comfortable and engaging to play.
setting goals
- To create a modern interface that is visually simple and appealing to users
- To simplify the layout and reduce visual noise, allowing users to focus primarily on the game process without distractions from secondary elements
- To enhance readability and improve contrast ratios throughout the app, making it more accessible for people with visual challenges
starting the redesign
home screen
The Play button was positioned closer to natural thumb placement for better accessibility.
A diagonal blue-to-purple gradient gives the background more energy, while remaining easy on the eyes.
The logo maintains its personality, but with a cleaner look.
Action icons were redesigned to be cohesive, enhancing the overall user flow.
settings
Decorative icons were removed and clear text labels were used to help players quickly find, what they need.
For better interaction, I replaced segmented controls with number pickers for teams and rounds, and added a difficulty slider that makes game adjustment more intuitive.
I chose aligning every item to the left, making them easier to scan, and divided grouped setting items with dividers for clearer separation.
For the game options, I implemented simple toggles for the four setting items, while keeping the statistics tooltip for new players.
starting a round
I used mainly black color to enhance readability, while accent colors appear only on team names and the "Question" label to guide attention.
Spacing received careful adjustments, eliminating text overflow issues.
The visual declutter happened mainly by removing the oversized exclamation point icon.
The swipe question indicator was transformed into a secondary button with descriptive label, creating a more functional experience.
during a round
Strategic spacing created a more readable experience, with a gap now appearing between questions and the timer.
List items received additional padding between them, making content easier to scan.
The timer now stands out more prominently thanks to an increased contrast ratio, helping players track remaining time at a glance.
Navigation underwent restructuring with redesigned CTA buttons, that guide users more intuitively through the game experience.
what I’ve learned.
As a developing designer, I continued building my Figma skills through persistent self-teaching and practice
I discovered the joy of solving real user problems through thoughtful simplification, improved accessibility, and visual hierarchy
Working through each screen methodically built my problem-solving skills and confidence as a designer