Pendulum Learn More Section

A market trend explanation made simpler and more informative for fast fashion merchandisers

Product Design
Team of 4 designers & 7 engineers
New York, NY
November- Feburary/ 4 months
Role
Lead designer—
discovery, user research, design, testing, vision, style guide
Tools
Figma / Miro / Ziplin
Jira / Slack
Pencil / Sketches
Keywords
#Chart and table
#Concept explore
#Filters
Project Scope
Data Scope

Pendulum, a trend analysis platform enable fast fashion businesses to make product decisions accurately and efficiently

Transforming traditionally cumbersome excel tables into a powerful tool, Pendulum has iterated through a lot of validations, and explorations to develop this end-to-end market trend analyzing experience. This project is an elaboration of the dashboard design. For more research details please click below.

Pendulum part1- Dashboard →

Impact of our dashboard's design incorporates:

94.70%
89.55%
$ 2.5m
Users' Satisfaction Rate Reached
Under the same task, completion time is reduced by at least
Engage potential investment about
My Contributions to the Project
🤖 - Developed the key flow of the dashboard and learn-more section by conducting primary and secondary research and efficient meetings.
📉 - Reduced the total time cost for small to mid size fashion companies to monitor the market
🗂 - Established design systems to improve the scalability of the product
🎨 - Designed and iterated high-fidelity wireframes to make the showcase the trend
My Impact on the team
🖥 - Improve the workflow by developing design plans
📒 - Efficient design deliverables: minimizing back and forth meetings between the design team and developers by anticipating their needs
😊 - For the team: introducing new tools to improve work efficiency, focusing on the team vision and goals to keep the product on track.
Overview
01. Design Decisions
02. Deliverables
03 Next Step
Problem Recap

For Merchandisers who work for small to medium-sized fast fashion companies, there is a need for a efficient and customizable method to monitor market trends. because the current manual research is very time-consuming, and is polluted by too much market noise to put together actionable insights

Through Design, How might we ...

🥺

Understand the detailed trend

How to help to understand a particular trend framed around their own needs?

Proposed Solution

Merchandisers often complain that the current trend reports on the market are too vague, and merchandisers often struggle with how to find specific trends and understand the trends. So the learn more page provides the dashboard with market history and details breakdown: 

Key design decisions

blabla

01/
Page Layout

Give flexibility back to merchandisers

blabla dashboard see result, learn more gotta explore
List them all directly
If the content is displayed directly according to the above brief, a particularly long page will appear  with overwhelmingly crowded information. Even without the usability test, the problem with this page is very obvious:
Merchandisers often complain that the current trend reports on the market are too vague, and merchandisers often struggle with how to find specific trends, and understand the trends. So the learn more page provides the dashboard with market share history and details breakdown.
Forever Scrolling alert
Crowded information
The top five results are listed in a side-by-side manner. 
Chart and table do not correspond
Need to hover over chart to see specific information

How about turn it into a Collapsable Table?
The easiest way to improve the redundant layout was to turn the details breakdown table into a Collapsable one. But the problem is still severe:
Limited detail breakdown and history data
- merchandisers cannot combine more than 2 metrics
- no historical information provided for detail break downs
Visual Hierarchy:  not easy to read table
- Doesn’t help with adding simplicity and cleanness to the UI
Mix detail breakdown with market history together
shangxia duiying
Crowded information
The top five results are listed in a side-by-side manner. 
filters+ chips jueding breakdown
kanbuqing lishixinxi

02/
Horizontal or Vertical filter bar

More use cases doesnt mean its good

Market benchmarking
Through research I found that most of the e-commerce sites on the market have left and right filters and content, but the traditional one is not the most suitable. In this case, I decided to use the horizontal filter bar for the following reasons.
Choose horizontal filter bar because
- Equal importance of feature priority
- Normally no cross category comparison, quickly navigate through tabs to targeted one
- Normally no cross category comparison, quickly navigate through tabs to targeted one
Tree testing: Organize the content into frames
With the layout, I quickly built the framework and placed the metrics under the respective metrics. I used tree test to see whether users can find the target metrics, basically clarified the rationality of the classification, and started to enrich the content details.
Feedback from users and devs: This solution is both powerful and simple to develop
Users
be compatible with complex data and also easy to customize
Dev
This solution improves the efficiency of the page, because it does not need to load all the data each time. And there is no need to deploy the learn more page for each metrics separately. Instead, it's all done on one page.
“Have no idea where to click first"

blabla

Refine Part One:
Add walkthrough intros
blabla
Refine Part Two :
Clean visual display
By looking at the prototype heat map, I found that regardless of whether there are more or less metrics, the user's attention is mostly focused on the top half of the page, especially the top of the page, so I suggested add an overview tab at the top, using the product's algorithm to summarize the most trendy trends。
Refine Part Three:
Edge Case scenerio
 What if the filter is too specific? I have three suggestions for the current filtering behavior: change the time frame of the search, change the search criteria, and contact the product team to add interested retailers or brands. The second part is to attach common links to guide users to continue browsing.
Result Test
Efficacy Measurement: Using Dashboard did help !
Recall back to the officacy metrics mentioned at the beginning, the time to complete the same task in this product was xx% shorter, and xx% of tested users found the dashboard to be very effective in monitoring and understanding market trends.

Deliverables

Design Handoffs

Previously, the designs were all in one file. I organized them by feature, recorded the process clearly, and kept the latest designs in one page for easy handover to the dev team.

I also prepared skeleton screens as transitions when loading data.
‍

Next Step

Continue working on...

particular needs, product collections
‍
 

Some thoughts

Unlike previous data vis projects, this project required me to balance business value, dev efficiency and design stategy from 0-1, and I encountered many problems at first.‍

⛰ Steep learning curve to understand fast fashion ecology
😵 New product with definition/feature/navigation opaqueness
🤦♀️ Unorganized research resources
🚫 Wide design space from PM’s requirements‍

At the same time, as a whole remote team, it caused me some problems at first. Here are some of my main takeaways‍

Deal with limitations‍

In the design process, many features or designs need to be adjusted according to the actual situation, this time to learn to communicate with different teams, to clarify the reasons for the problem, whether there is a reason and plan b to validate design. In what case I need to take on design, over all this is design rather than decoration.‍

Communicate early, often and clearly‍

Exchanging thoughts with stakeholders mentioned above early and often allowed me to see the limitations faster and adjust my design in time. For example, in the build of learning more, the dev has been struggling for a long time because of the previous version of the design, and later we iterated the design to make the data architecture clearer, if we communicate early, we can reach that sweet point sooner

Achieve impact by building trust‍

Being a new member in the team, it’s important to show that I care about the team. So when I tried to use some novel methods and asked for resources. For example, I use maze for the usability test combined card sorting in between, I would explain why and keep the supporters updated with progress I made to enhance participation feeling.

More Case Studies

Pendulum-Dashboard

Senscity

Smithsonian

Boba