Pendulum Main Dashboard

Design from the ground up to visualize the market trend for fast fashion merchandisers

Product Design

Team of 4 designers & 7 engineers
New York, NY
August - December / 4 months

Role

Lead designer—
discovery, user research, design, testing, vision, style guide

Tools

Figma / Miro / Ziplin
Jira / Slack
Pencil / Sketches

Keywords

#Dashboard
#0-1 Concept

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.

Project Scope

Data Scope

Impact of our dashboard's design incorporates:

85%

90%

$ 1.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.

Problem Overview

Merchandisers need to respond quickly to the market

Can you tell which of this handbags is popular in the market?
Like you, merchandisers from the fashion industry also often wrong. In order to succeed in a highly competitive fast fashion industry, it is not the job of the fashion designer that makes decisions. There is a role of merchandisers, who are asked to monitor the market trend and provide quick feedback (to designers or marketing)

But they falling behind on versatile market

Manual market research is that deal breaker

Merchandisers spend a lot of time housekeeping.Among all the tasks, merchandisers market analysis is the most time-consuming, taking on average 5-10 hours weekly. his number will be even higher if they do line planning for each season six months in advance.

However, auto scraping data online is not all they ask for ...

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

Solution Overview

Part One: Place and prioritize metrics displayed on dashboard

It provides a comprehensive market overview to merchandisers by presenting a number of metrics in a comprehensive manner.

Part Two: Switch tabs immediately for other fashion categories

Switch freely between different categories, each with its own different metrics, effectively exhibiting in the dashboard

Part Three: Learn more sections

After selecting the metrics of interest, you can click on them to see the historical development trends and customize the options to suit your needs.

How did I get here?

01. Understand

Business Goal:

Use product efficacy metrics to measure Retention

After zooming in the to focus on competitive market research, Our design team had meetings and QA sessions with all stakeholders to clarify current business needs: For start-up Saas products, retaining users to make them notice how the product can help from the very beginning is important. So we identified the use of product efficacy metrics to measure retention; that is, how much a product can improve the efficiency of market research.

Dive into Real Cases:

Why market research takes long but still fails?

Next, I applied different research approaches to further understand the problem. Each research approach has its own specific goals. For interviews, I drafted user interview questions and I conducted competitive analysis. I also studied the layout and filters of several well-known e-commerce sites.

Key Insights

"I spent lots of time scrapping and understand market manually and..."

🤯

Too much information to form a whole picture

98% of them specify that decision making requires a lot to combine

"a lot to consider, Color pallet, print, silhouette, pattern directions. struggling on determining product features."

😩

Conflict of data driven approach & intuitive approach

90% of them claim that decision making always requires guesswork

" Educated guess is still a guess, which leaves a lot of unanswered questions to intuitive way of thinking"

😱

Time sensitive to understand the market

83% of them struggles a lot with analyzing data quickly

We have very limited time for research, needs easy and quick information of product features

😵

Hard to get insights that can benefit my brand particularly

76% participants digging into other vague or broad trend report for insights

"Spending a lot time digging in WGSN & trade shows for trend study
"Only 30% the infomation on those report I can apply to my work"

02. Define

Dolly, the merchandiser

Well informed guess is still a guess 😢

After the research, we learned about the merchandiser group. I composed two scenarios to visualize the task they are facing and where our design has potential to help.

A Typical Work Scene of Her

Market Research Processes are Complex, Manual, and Scattered.

At the same time, we came together to more concretely visualize where the pain points of merchandisers during the two scenerios are focused. I created this map to visualize the current flow which helps facilitate everyone’s understanding of the pain points and opportunities

Prioritization

Solution plan followed after problem recap

For Merchandisers who work for small to medium-sized fast fashion companies, they need a more intuitive and customizable method to monitor market trends, because the current manual research is very time-consuming, and too much noise from the market to pull together actionable insights

With this in mind, I first ran a brainstorming session that listed solutions and opportunities that involved everyone to make a plan. I listed the design opportunities in sequence, prioritize main opportunities that can be addressed in this round of design.

Through Design, How might we ...

🤔

Understand the overview market

How to integrate insights for the overview market since there are too many things to look at?

🥺

Understand the detailed trend

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

03. Ideation

Concept Testing

Is dashboard necessary?

I then invited the team through a brainstorming session to list potential solutions. We debated if dashboard is necessary or we should use a product list or a report list which provides direct product inspirations.

Merge Ideas:

Dashboard plus learn-more pages, Solve problem with the most intuitive method first

Considering user needs, business goals, tech and time constraints, we decided to design a holistic dashboard with a “ learn more” page to provide more data-driven information before we move to build up some fancy collaboration features.

We then quickly agree on the design principles

Organized

Define the layout logically, prioritize the content in order.

Focused

Focus on key information instead of display all

Accurate

Keep data accuracy, clarity and completeness. Remember to Use the correct types of charts. and Explain data definition when necessary.

Scalable

The dashboard design should be able to adapt to the broader fashion genre

Wireframing

Iteratively evaluate design with stakeholders

I mapped out possible options for the dashboard and its detail pages and focused on the contents’ structure first. I had frequent working sessions with other stakeholders to absorb and evaluate their feedback. By wire-framing the dashboard and learn-more pages multiple times, There are updates everywhere including layout, visualizations, and filter details respectively. Below are just a few out of hundreds.

Key Design Decisions

This is the roadmap with things to design in sequence. Start from dashboard to Learn-more page, from overview to details. This following part will mainly introduce how I designed the dashboard. Here are solutions explained by 3 stories:

01/

Dashboard content

Should we “Quickly place some hand bag's numbers and charts”?

why not a minimum

viable

Awesome

product :)

Though timelines are always tight, we believe that we can, and should ship great products. I decided to start visioning from the best experience, where’s the final destination with all problems solved elegantly, and reverse back to the minimum feasible thing to build.

Each merchandiser's function or business domain differs, resulting in different needs for metrics. The project had a tight timeline, and the MVP phase only used handbag data, so at first the PM wanted to directly list all the handbag related metrics to make the dashboard quickly.

Consider all metrics as a start

Keeping scalability in mind， I combed through all the fashion categories by combining interviews and referring to the information architecture of e-commerce sites. I summarized a list of common metrics as key metrics to present.

Survey: Is there any decisive metrics?

In order to have a more effective presentation of these metrics. I used a simple survey to ask users to scale their importance. As expected, although some metrics are more often considered in research, there is no one decisive metric to represent market trends.

02/

Dashboard Layout and Navs

How to create spaces for that many contents?

Efficient dashboard layout that display content well

Next, I am searching for a suitable layout that has the capacity to hold these contents. as mentioned earlier, I discovered that merchandisers need to consider a combination of many metrics, and no single one plays a decisive role. Therefore I choose to make card size more evenly distributed.

Dashboard navigations that have content capacity

I then considered the main navigation and the sub navigation on the dashboard page。main nav for guiding through features and sub Nav for switching between different fashion category data. According to research from the NN group, people’s eye fixation pattern follows a F shape. I’ve come up with three options,.and choose the third one: which is the combination of vertical main nav and horizontal sub nav.

Reasons:

- Equal importance of feature priority

- Normally no cross category comparison, quickly navigate through tabs to targeted one

Customize a bit based on real use cases of fashion industry

With the layout, I carefully built the framework and placed the metrics under the respective grid based on the different types of metrics

03/

Data-vis Decisions

If no fancy charts then what's wrong with a vanilla pie chart?

Match visualizations with data type

Data vis charts are designed to provide a more direct representation of trends and hidden information in numbers. However, merchandisers in the fashion industry are not very savvy to dataviz charts even though they often deal with excel sheets. So there is a balance to be found between the aesthetic and informational efficiency of datavis decisions.

I carefully selected the most efficient chart type according to the data type. The controversy arises from the use of simple lists instead of extra datavis in some categorical metrics such as style/ color /material/print.

Considering edge cases: More charts are not always better

When there are many categories, a simple list is instead the most effective form of presenting data. However, product manager suggested adding some kind of chart to enrich the content. I convinced her to remove unnecessary chart types to avoid misleading and extra information comprehension time.
Take color as an example: as simple as a list can be the best solution, just elaborate more when necessary.

“It looks incredibly helpful at first, but the information is kinda overloaded"

Though happily known that we are on the right track of problem solving, we quickly found that this dashboard is not that efficient in terms of information display.

Refine Part One:
Merge cards by card sorting

Because different merchandisers focus on different metrics, I use card sorting and ask users to help me merge cards of the similar type. In this way, even for a clutter with up to 15 metrics, I can keep the number of cards to less than 10.

Refine Part Two :
Add overview on top heat map

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:
Simplify card display

In order to improve visual hierarchy , I changed the position of the cta part on the card to make it more visible and to show only the top 5 results under each metric, so that users can understand what's going on

Result Test
Efficacy Measurement: Using Dashboard did help !

Recall back to the efficacy metrics mentioned at the beginning, the time to complete the same task in this product was 90% shorter, and 85% of tested users found the dashboard to be very effective in monitoring and understanding market trends.

Quick peek of how I solve the puzzle of filters for specific trends

This flow is mainly the optimization for information display that experience many rounds of back and forth. Details rationale can be found at the link below

Part 2 - Learn more →

Design Handoffs

Responsive Design

Currently in the mvp stage there is no demand on the mobile side, but I have considered the size of different monitors to make a dynamic responsive page.

Style Guide

I initiated the creation of the design library, please see here for details
‍

Handoffs to devs

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. And I took advantage of new tools such as zeplin to provide full specs

Figma to point out users flows, specs, status and links to other design resources

Zeplin to give detailed specs

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

Reflections

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.