Credits Redeem Redesign

During my UX design internship at Sogou in summer 2018, one of my projects was redesigning the Credit Redemption page. The purpose of the redesign was to provide users with clear information and a streamlined redemption experience. I was the only UX designer on this project and also participated in some of the UI discussions.

Methods: Information hierarchy, interaction design, usability testing

Team: PM, UI designer & Engineer

Time: 4 weeks

Old Version (translated)

New Version (translated)



Credits and SoBeans

Sogou App users, especially the app's novel readers, frequently use credits to redeem SoBeans for buying novels.

Old Design's Usability Issues

I analyzed the old design and conducted usability tests with 5 users. I found the old redeeming page failed to provide key redeeming information and an efficient redeeming process.


Primary Goal

Enhance information hierarchy and user flow of each redemption stage

Secondary Goal

Enable users to access related pages quickly


Since displaying prioritized content is the primary goal for the project, I started by prioritizing existing content. I also discussed with PM about potential content or quick links to go onto the page, which was listed as our secondary goal. I came up with the prioritization table below:

With the information hierarchy, I created 3 iterations of wireframes based on team feedback.

Final version of the wireframe (translated)

Highlighted Wireframe Iterations

Version 1 (translated)

Version 2 (translated)

Final Version (translated)


Feedback from users

To discover potential usability issues, I tested with colleagues who were not involved in the project. I aimed to evaluate:

  • information hierarchy
  • interaction flows
  • key functions
  • the “recommendation feature”

Key Findings Considered for Iteration

2 out of 5 Users wanted to get confirmation of redeemed SoBeans amount in the toast message.

One user asked:
"What is 'auto-redeem'"?

2 out of 5 users said the info of the SoBeans should not be muted.

Highlight: Involving PM and Engineer

I learned a great deal by involving the engineer and PM in the iteration process. As a team, we iterated the design and made it better.

Discussion with Engineers

PM's feedback

PM suggested me considering edge cases such as failing to redeem due to system errors.

High-Fidelity Mock-Up

Though I was not responsible for UI design, I actively involved in the discussions of hi-fi prototype iterations.

Selected final screens
(translated, credit to Chen Qiu)


Specification for different screen sizes

Technical logic explanations


Think Broader than Key Use Cases

This real-world project provides a valuable opportunity for me to think beyond key use cases and design for every scenario users may encounter -- including edge cases.

Think Deeper on Interactive Flows

Being able to design for real users pushed me to think carefully of every user touch point, and how I might make the interactions intuitive. Some of my strategies to achieve this is to come up with multiple ideas, carefully validate them, and conduct extensive research.

Think within a Design Ecosystem

Figuring out how to align my design to the larger product ecosystem requires me to ponder on interaction, design, and engineering logics holistically. Communicating with and syncing up frequently with PM could save a lot of effort in this process.

Be Flexible

Working with PMs and engineers enable me to design within constraints. It is always good to be flexible and come up with several ideations with their pros and cons, especially when I am not sure of what the constraints might be.