Communicating Button States in a Quiz App

Together with programming students, we had designed and developed a coded prototype of a quiz app using data from the Swedish Parliament’s open API. However, during the final usability tests, we discovered that users struggled to understand the app’s feedback.

After the school project ended, I tried to fix the confusing button states while also designing a new UI.

Role UX
Duration 2 days
Prototype of the finished product
Confusing life indicator
No feedback when selecting wrong answer

Key Usability Issues Identified

  • Unclear visual elements: Users didn’t understand that the crowns, inspired by the Parliament’s logo, represented lives in the game.
  • Lack of feedback: When selecting an incorrect answer, users received no indication of their choice.
  • Reduced learnability: In one question type users were immediately moved to the next question, removing learnability in the game.
Five button styles where needed to cover all states
Implementation of feedback when selecting the wrong answer

Mapping States for Clearer Feedback

I started by mapping all possible states for the buttons and their interactions. This enabled me to determine how to effectively communicate feedback to users for both correct and incorrect answers. The design provides three types of feedback for incorrect answers and two for correct answers.

Screenshot of the new UI
Screenshot of the components in the design system

Updating Visual Design

To modernize the UI and improve usability, I made the following updates:

  • Updated button styles to provide clear visual feedback for all interaction states.
  • Incorporated accessible color schemes to enhance clarity and usability for all users.
  • Used universally recognizable icons, such as hearts for lives, to ensure intuitive feedback.

Improved Learnability for Users

The redesigned quiz app now provides immediate and meaningful feedback, addressing the confusion observed during testing. Users can clearly understand both correct and incorrect choices, making the experience not only clearer but also more educational.

Key Takeaways

  • The first iteration provided valuable insights into user needs, and revisiting and refining the design based on that feedback resulted in a significantly better product.