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
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.
Enhance information hierarchy and user flow of each redemption stage
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.
Highlighted Wireframe Iterations
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 suggested me considering edge cases such as failing to redeem due to system errors.
Though I was not responsible for UI design, I actively involved in the discussions of hi-fi prototype iterations.
(translated, credit to Chen Qiu)
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.
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.