Survey Result Page Redesign

Grouped 20+ survey questions with clear unread marks and a top tab bar for easy switching, improving mobile experience.

Grouped 20+ survey questions with clear unread marks and a top tab bar for easy switching, improving mobile experience.

OVERVIEW
OVERVIEW

Brief

Play Verto, a UK-based gamified data collection platform. The main goal of the redesign project was to enhance the survey results page for mobile devices by streamlining multiple questions, providing richer insights, and making personal vs. public data comparison intuitive on a limited screen.

Role

As UI/UX Designer, I analyzed client goals and reframed them into user-centric problems. I designed a mobile-friendly layout, restructured content for better usability, readability and discoverability.

Period

5 months

The screens shown in this portfolio are for illustrative purposes only and do not represent the actual project interface. All rights belong to the original owner.

NEEDS → HEURISTIC EVALUATION → PROBLEMS → SOLUTIONS
NEEDS
→ HEURISTIC EVALUATION
→ PROBLEMS
→ SOLUTIONS

Need #1

Need #1

View multiple questions for mobile

Need #2

Need #2

Optimize filtering feature

Need #3

Need #3

Get insights for data

Heuristic Evaluation

Heuristic Evaluation

Flexibility & efficiency of use

Problem #1

Problem #1

Excessive scrolling
loss of context

Heuristic Evaluation

Heuristic Evaluation

Visibility of system status

Problem #2

Problem #2

Hidden filters
unclear applied state

Heuristic Evaluation

Heuristic Evaluation

Match between system and real world

Problem #3

Problem #3

Sync icon
misleading interaction

Solution #1

Solution #1

Chunked Questions with Unread Cues

Broke down questions into digestible chunks and displayed unread indicators to reduce cognitive load.

Solution #2

Solution #2

Exposed Key Filters with Clear States

Exposed frequently used filters at the first level and provided clear feedback on active states.

Solution #3

Solution #3

Clarified Data Access and Drove Exploration

Replaced the ambiguous sync icon with a Me / Others toggle and added preview insights to drive exploration.

Efficient Survey Browsing for Mobile

A top tab bar for quick switching and grouped 20+ survey questions with clear unread marks.

Problem

Users on mobile devices found it difficult to view and navigate through multiple questions, leading to cognitive overload and lower completion rates. Additionally, incomplete visibility of questions and lack of clear progress indicators reduced clarity and engagement.

Challenge

Early wireframes featured eye-catching cover photos for each chart and bundled related questions to intrigue users. While this improved the emotional appeal, it brought major downsides:

  1. High manual effort for content curation

  1. Increased development complexity and cost

Solution

Redesigned the survey results page by replacing the dropdown menu with grouped tabs, breaking down 20+ questions into digestible chunks. This reduced vertical scrolling and cognitive load while enhancing clarity with full question text and unread indicators that guided users toward unexplored areas.

Simplifying Complex Data for Seamless Insights

Optimized filters and a comparison feature to ensure clear, scalable insights across all devices.

Problem

The variety of data types made it hard to read results and extract insights, while users also needed to compare across multiple valuable datasets.

Solution

Adjusted surface filters to make selected options clearer, introduced a one-click comparison and preview insights to highlight key differences, refined the button hierarchy to emphasize the primary action, and recommended changing the primary button label from “More information” to “Share result” to better align with the product’s goal of sparking user curiosity and encouraging data engagement.

LEARNING
LEARNING

Recognizing redesign constraints—such as existing materials or technological limits—is key to smooth development. In brainstorming, generating multiple ideas and presenting at least two proposals helps stakeholders compare approaches; even if not all are adopted, strong elements can be combined to inspire better solutions.

five person by table watching turned on white iMac
five person by table watching turned on white iMac

Let's work together as UIUX partners. Welcome to share and exchange ideas!

Let's work together as UIUX partners. Welcome to share and exchange ideas!