Wish is an online e-commerce platform that makes affordable products accessible to everyone. I redesigned Wish App's Community TV for 2 days for the purpose of Wish Interview process.
My role
Task Analysis
User Experience Design
Visual Design
Interaction Design
Results
I learned Wish's design system & patterns, the logic behind current design solutions & how to ensure my design aligns with business goals.
Creating a customized Community TV exploration experience
​
Users can view collections of product review videos, making their shopping experience easier.
Swipe left to view the next product review video
​
First time users will have a short onboarding animation. This will teach them to swipe left to view the next product visual. This lets users know that they have options.
Content Filters
​
When customers filter content, Wish can capture shoppers' behaviors.
This benefits both customers and Wish.
Challenge
​
The prompt for this design challenge is: "Dive deeply into one problem you find in the Wish mobile app and design a solution. How can your solution be an impact on user acquisition, retention, engagement, sales or other attributes?"
My personal goals are:
1. Develop a comprehensive design solution within 3 days
2. Learn Wish's Design System
3. Seek feedbacks from Wish's designers about my design
Design Process
Research
​
Understand business goals & target customers
To learn the context of Wish app, I watched Wish's CEO & co-founder Peter Szulczewski's talk and interviews. This helps me learn why the app is behaving in a certain way (e.g. multiple top tabs, non-obvious search bar), as well as business goal and its target customers.
​
-
Business goal: Enhance navigational shopping experience to increase transaction amount
-
Target customers: Prioritize the price over brand, packaging and fast delivery
​
Try to learn pain points through customer reviews
To observe if there are any frequent issues with Wish app's performance, I read positive & negative reviews about Wish app from App store, Trust Pilot & Reviews.io. Most of the positive reviews resonate with Wish's value propositions: customers find addictive, affordable and fun to shop at Wish. Most of the negative reviews center around post-checkout experiences, like irresponsive customer service and poor quality products. The impact designers can make through redesign is low on these issues.
​
This failed tryout made me realize: unless a factor fails users' final goals, users wouldn't reveal some important factors that affect their in-app experience. (peak-end rule) It's up to the product, data and marketing team to figure out these factors.
Problem Finding
​
With the business goal in mind, I examined each feature from a user's perspective and evaluated whether this feature helps users to navigate and find what they want to buy.
I found Community TV has a lot of potentials to improve. After testing the feature with my friends, I listed some major user problems.
With that being said, I also tried to see these issues from the product development side. Some of my guesses are: the current version is used to test user's click rate in each video; Maybe the feature is conducting an A/B test; the system doesn't have enough video or photo reviews to curate customized collections.
Design Goal
​
Improve Community TV Experience to Help Navigational Shopping
​
​
-
Make customized community TV collections—The collection should help customers with product discovery as well as their purchase decision.
-
Surface users with the option to start their continuous browsing of other user-generated content about the products
-
Give users the option to filter the content they want to see
Rearrange User flows
​
Before going to the wireframe, I think it's important to see the flows from a system level. Therefore, I first mapped out the current user flows, which helped me learn information architecture, what's already been built and how this feature works. After analyzing the current user flows & comparing a few design solutions, I came up with the new user flow that would better serve the purpose of navigational shopping.
.png)
Design Solutions
​
Create a customized collection of product review videos
For Community TV page, I developed 2 solutions. I went with solution 2 because it conveys a similar contextual meaning of the current top tab, and gives customers easy access to the product review video that they liked, which can help them making purchase decisions.
Solution 1
Inspired by Instagram Explore, I put filter pills below the top navigation bar.
Gain: Quick access to filter the contents
Loss: People don't use filter pills that much. "Liked"filter pills conveys a different contextual meaning from the top tab.
Solution 2
Inspired by TikTok Discover, I put each content item into the collection carousel.
Gain: Users can easily access the product review video they liked. It encourages both vertical & horizontal scrolling to find other collections.
Loss: Users need to scroll down to explore other collections.
Product Review Modal : Compare Compositional Flows
One thing that I really like about design challenge is: I can challenge my design skills and learn the reasoning behind the current design. After experimenting with different compositional flows for the components, I found the original compositional flow worked the best. I decided to leverage this compositional flow. I increased the lines of review texts in the collapse state, added "More" button, and put a gradient overlay behind components to make sure the components are visible no matter what the background is.
Z-shape diagram
Eye sweeps in the z shape direction.
Gain: Users would quickly associate the review with the product.
Loss: in the review text collapse state, it might break the visual balance;
we are creating new patterns; the progress bar on top would distract users from the product.
Gutenberg diagram
Eye sweeps from the top-left to the bottom-right.
Gain: Same patterns that users has been used to. Product item is the main focus. It direct users smoothly to different tasks in the page.
Loss: For users, it might take a while for them to learn what's going on.
Visual Design​
​
To make sure my visual design aligns with Wish's design system, I created a small design system of components, visual assets, typography and colors in Figma.
Reflection
​
1. I learned part of Wish's design system and how it helps convey the branding.
2. It's challenging to make an effective design proposal without knowing the roadmap, technical constraints, and story behind design iterations.
3. This design challenge inspires me to de-construct features in different apps and evaluates their effectiveness in terms of meeting business goals.
4. I am wondering: how can Wish make a reward system that encourages users to create more visually pleasing content, like TikTok and Instagram.