Work / Neural Trend / 'Designing an AI dashboard for fashion buyers'
This project was for Neural Trend AI, a predictive analytics platform that uses large-scale data mining to help fashion retailers discover and assess trends, project sell-through of products, and make smarter buying decisions.
Design version 1.0 of a dashboard for planners and buyers in retail fashion.
Scope of work
Competitive analysis
User research
Information architecture
Concepting & wireframing
Data visualization
Prototyping & user testing
My role
Research design
Workshop facilitation
Wireframing
Interface design
Prototyping
User testing
Limitations
4-week execution
Remote interviews
1-round of concept testing
1-round of usability testing
Mid-fidelity output & hand-off
Background
As a startup quickly gaining traction with their analytics product, Neural Trend was receiving feedback from pilot clients that while the insights provided were highly useful, they wanted a better way to interface with the data.
At the time, Neural Trend was also running proto-version of their platform - a non-interactive, ad-hoc report that was being delivered monthly to their clients in PDF format. And while the product team had put together a dummy dashboard to demonstrate primary features of the platform, it was built with zero input from fashion retail buyers - i.e., their core users.
The approach
We had to start by having two conversations - one with users, and one with the product team.
A unique challenge to this project was that Neural Trend was still in a stage of refining its minimum-viable-product. It was therefore doubly critical for our team to be in close communication with the product team for a clear grasp of both the platform’s current capabilities and features as well as the short and long-term vision.
Two research tracks
This shaped our entire discovery process, and our approach would have to be two-pronged to uncover both user needs and the platform's current and future capabilities. We found that insights from each would aid discovery sessions with the other.
Understanding our users
We elicited strong user opinions from the onset by putting something tangible in front of them.
participatory design sessions
User insights
Knowing that most of the information we were tasked with organizing could be found on the current dummy dashboard, we made the most of our user interviews by conducting participatory design sessions over Zoom to uncover when and why they would want to use each feature, as well as how they would want to see them organized.
6 buyers and planners participated in these design sessions.
Insights from our users
Three distinct user needs emerged from our conversations with fashion buyers and planners.
"How do you need all of this information organized? What makes the most sense to you? Why does that make sense?"
Digging a little deeper
Were we aimed in the right direction? Were we solving for "intuitive"? We had to make sure along the way.
To confirm we were identifying and solving for the right problem, we conducted a root cause analysis using the 5 whys technique. In each case, we found that they led to one root cause: saving time.
Takeaways from our time with users
"Some of the tools we currently use for insights is really time consuming. I think it would be so much more intuitive if it was organized in the way we like to work."
"For me, 'intuitive' is something that knows how I want to see the information. From a planning perspective, the biggest thing is making it easier to manipulate data."
We found that to fashion buyers, "intuitive" meant finding workflow efficiency through the way information is organized, which further break down into 3 distinct themes.
Information prioritization
Information manipulation
Information simplification
Understanding the product
We interviewed several members of the Neural Trend team for a deeper understanding of the product and a broad perspective.
Stakeholder insights
We held 5 individual interview sessions with the CEO, CTO, product strategist, product manager, and sales director of Neural Trend to better understand how all of the capabilities and features of the platform should come together as a tool for retail planners and buyers.
It was clear that while the ultimate platform vision was to provide use cases for a variety of audiences for various applications, the immediate and primary use case was to aid the buying process for next season, specifically for buyers.
Insights from the product team
The big takeaway: the product's core value proposition is to aid fashion buyers with the process of buying for next season.
This gave us a clear outline for 3 areas to explore in our next round of discovery.
Order of the buying process
Evaluations made
in the buying process
Decisions made
in the buying process
Process discovery
"What's the first thing you do? And then what?"
Equipped with discoveries from sprint 1, the team set out to understand exactly what the buying process for next season looked like - this would inform how we'd prioritize information on the dashboard.
To do this, we conducted a journey map workshop where we had users and product stakeholders arrange a list of tasks that reflect the decision-making process of buying for next season, all selected from a group of possible actions on the Neural Trend platform.
3 buyers and 4 stakeholders participated in individual 30-45 minute workshop sessions
Process insights
While every buyer approached the process slightly differently, the patterns that emerged allowed us to create a composite process-flow as seen below.
Takeaways from process discovery
The buyer's journey provides a clear framework for how we can prioritize information intuitively for the buyer.
We walked away from these workshops with a very clear idea of how we'd start to make design decisions for the dashboard and the features that we needed to build.
Priority features
1
2
Insights review
3
Product review
4
Benchmark review
5
Negotiation & purchase
6
Performance monitoring
Evaluation discovery
"How do you evaluate the information you're looking at?"
After extending conversations with our users during the journey map workshop, we identified two key patterns around the theme information manipulation.
Users' approach to information evaluation
Research notes re-annotated for brevity
More takeaways from our time with users
"When I start forecasting, I want the most high-level, and then I drill-down and then go back up. In planning, we call that top-down, bottom-up."
"First, dashboard view should be at the highest-level - then with the ability to drill-down to the most granular level."
Two, well-established evaluative methods provide a clear model for what information manipulation controls to provide the buyer.
Evaluative methods
Top-down evaluation ("drill-down" approach)
Comparative evaluation ("benchmark" approach)
Concept testing
We tested three divergent concepts with our users.
With several ideas stemming from two weeks of intense user interviews, we sketched and quickly wire-framed 3 concepts to test with 5 users.
Concepts:
Concept 1:
A revenue-centric approach
along with the sales overview, prioritized success metrics like sales goals and monitoring of in-inventory best-sellers, insights that are unique to the business using the platform.
Concept 2:
A planning-centric approach
prioritized inventory trends and data to inform pricing/markdown strategy, geared for decision-making from real-time insights and optimizing for efficiency.
Concept 3:
A buying-centric approach
prioritized most frequently-evaluated categories of trends to inform buying decisions for next season, and quick-filter options to manipulate data at-a-glance.
Concept testing: results
User ratings gave us a clear direction on how to move forward with design decisions.
For each concept, users were asked to rate how beneficial they found the way information was organized, in each of these three sections:
'main dashboard' section
'insights' section
'lookbook' section
Concept 3 earned the highest ratings in each section and overall, which was also supported by the product team at Neural Trend. We would move forward with final wireframes and prototypes based on this concept 3.
User ratings
Preference testing
We preference tested data visualization options with our users.
In addition to concept testing, we used the opportunity to preference test variations on data visualization in order to understand how they need information simplified.
Test 1: assortment
Horizontal stacked chart
VS.
Donut chart
Winner: 'donut chart' (user preference 80%)
While the first option (stacked bar chart) of displaying assortment allows for a complete overview at-a-glance, we found that 80% of users preferred the second option (donut chart) - even though it required additional input from their end.
The takeaway here was that given the number of data points, cognitive load plays a factor in how 'simple' information is interpreted to be - i.e., not everything needs to be displayed all at once.
"Charts are important but with a lot of numbers, it can get overwhelming and confusing."
Test 2: color trends
Ordered (ranked) list
VS.
Vertical column chart
Winner: 'vertical column chart' (user preference 100%)
Given the number of variations and associated data points that would need to be displayed for trends across color, patterns, and product categories, I made the following design decisions:
Maximize the use of horizontal real-estate because:
Variation occurrence in each category is numerous (e.g., blue has 18 var.) and there is a need for all to be displayed at once
User engagement with the platform will primarily be desktop
Display trend values in descending order because:
Users reported more instances of seeking positive trend values over negative (left-to-right reading of data)
It provides an easy and consistent mental model for users to interpret both positive and negative-value data points
It removes the need for additional signifiers like 'green for positive and red for negative' (see option 1) which can create unnecessary visual noise when presenting data around color itself
Middle-align the x-axis because:
Trend presentation needs to be able to account for both positive and negative values
Maximizing potential ± vertical space is critical for when higher trend values need to be displayed (i.e. up to ±100%)
Preference testing: insights
Users expressed very strong opinions for how they wanted to see information visualized and what felt more 'intuitive' to them.
Information simplification is achieved through a reduction in cognitive load, not a reduction in interaction load.
The best way to simplify information is to preference test variations with users and follow up to understand rationale behind their preferences.
Putting all of it together
With a clear understanding of how to address the three core information organization needs, we began implementing insights into design.
Information prioritization
Execution 1: Global navigation prioritization
Execution 2: Dashboard section prioritization
Information manipulation
Execution 1: Filters ('lookbook')
Execution 2: Filters (sales overview)
Information simplification
Execution 1: Trends overview (trend insights)
On the overview portion of the dashboard, trend insights were simplified to 6 total data points (per category) to provide a holistic overview of all three major trends at-a-glance while still preserving the most critical and frequently-sought data points (3 highest, 3 lowest trends) - an approach supported through our user interviews during preference testing. A complete view with all the data points can be accessed from the insights section, or by clicking 'see more'.
Execution 2: Audience look-up by zip code (consumer insights)
In one part of the 'Insights' section, we were tasked with creating a tool to help users find audience insights by zip code. Initial designs for this tool prior to our work was just a list of 'top relevant zip codes' - which users did not understand and was universally disliked.
Our solution was to employ a visual model of the states in the US, with the selected region (left) providing much-needed context to groupings of zip codes (right) for users to break-down the understanding of information presented to them. This approach was also validated through preference testing (user preference 100%).
Personalization
Having addressed 'intuitive' for our user (the buyer), we also wanted to address it for our user (the individual).
In our conversations with users during interviews, workshops, and testing sessions, it became clear that there was another critical aspect to creating an intuitive dashboard - that was individual preference, or customization.
Interface philosophy: modular, flexible, customizable
In the multiple rounds of interviews conducted, we found that individual preference also played a significant role in defining "intuitive" - something we couldn't overlook when designing the dashboard.
With this in mind, I used a 12-column grid layout (offset 128px for navigation bar) and created a card-based interface that structures the dashboard, with major sections separated by section headers.
In this system, users are able to customize their dashboards by adding or moving cards, as well as create custom sections.
Final prototype
We built a final prototype, with a few key use cases in mind.
The original prototype was built using Sketch + InVision, below is one rebuilt in Figma.
Validating the design
Using this prototype, we conducted usability tests as the final leg of this project.
Methodology: a semi-structured, moderated test consisting of a set of 5 tasks to complete, as well as a set of attitudinal follow-up questions after task completion.
8 test participants completed their sessions remotely, over Zoom.
Determining what to measure
To determine the tasks that we wanted users to complete for the usability test, we conducted a Hierarchical Task Analysis to best replicate how users would achieve the goal of making "evaluations to buy for next season".
Of the many subtasks that emerged, 5 tasks were selected and made completable on the prototype for testing.
Quantitative findings
Please locate and evaluate how the color 'blue' is trending for next season.
Please determine which variation of 'blue' is likely to be most well-received by customers. (cont. from task 1)
Please evaluate how the brand 'Zara' is trending in brand sentiment, compared to the brand 'Everlane'.
Using the filters in the catalog of products, please narrow down results to find a floral-pattern dress for the fall season.
Please navigate to the product detail page of this dress, and get a new product score. (cont. from task 4)
Qualitative findings (by task)
Task 1
Drop-down menu at the top of the card is simple to use
Easy to visualize the color swatches
Big headers were very helpful in being able to locate the section for color
Task 2
Visualization makes it easy to see which variation is trending highest
"I kind of wish the font size of the colors were bigger. They are currently difficult to look at."
"Completing this task was very clear and straightforward."
Task 3
Would also like an option to save brands that are frequently monitored
"Super easy. Might also be nice to have trending brands on the dashboard overview."
"I think a search bar could be easier to than the tabs at the top of the insights page"
Task 4
Adding carrots to the right-hand filters would make it easier to locate controls
"It makes more sense to me to call 'lookbook' 'catalog'."
Task 5
"Refresh is clear, date stamp is helpful."
"Instead of a symbol, it might be nicer for it to say 'get new product score'."
Overall satisfaction measurements
At the end of usability testing, we also collected attitudinal metrics by asking 6 users to rate their overall experience with the prototype on a 5-point scale (1 - strongly disagree to 5 - strongly agree).
I was satisfied with the experience of this dashboard.
I thought the dashboard was easy to use.
I am likely to use this dashboard for work.
Task-level satisfaction measurements were also recorded - not represented in this section
"Charts are important but with a lot of numbers, it can get overwhelming and confusing."
"Everything was clear, and easy to navigate. Good user experience."
Next steps
After the completion of this project, we had some immediate next-steps recommendations.
At the time of this project's completion, Neural Trend had 2 pilot clients that had yet to experience interfacing with the data through a live dashboard. After all necessary hand-offs of documentation, assets, and specs, our recommendations were to:
Pilot prototype v1.0 with the 2 existing clients for feedback
Onboard the next UX/UI team and developers to all hand-off assets to iterate for version 1.1
Address the business need of building a vendor-side platform (identified through interviews with product team)
Outcomes
A tried-and-tested framework for future design iterations.
Our research and workshopping delivered a strategically-sound, buyer-centric framework of which its concepts can continue to be applied to the dashboard's design moving forward.
A working demo critical for fundraising and building new relationships.
A week after completion of the project, Neural Trend was able to demo our prototype with a top 3 fashion retailer in the U.S., for feedback and an ongoing, custom use-case exploration. The prototype was also used to demo for potential investors, as well as vendors using a vendor-side version of the platform introduced by our team during the final portion of sprint 3.
The successful launch of platform version one.
Immediately after the delivery of our work, Neural Trend's development team implemented our designs and specs and after a month, launched a live version of the platform.
Final thoughts
User participation in the design process is invaluable.
A large part of why this project was successful was the enthusiastic participation and input by our users. Thinking back on why this was the case, I believe these were the key factors:
Highly-relevant users. My team went through great lengths to secure interviews with the exact target audience of the Neural Trend platform, and their domain expertise really came through in discussion and participation.
Early participatory design sessions. Users had so much to offer in terms of feedback and opinions from day one, with a dashboard to look at -even one that was rudimentary and not yet organized. It really gave a us a seed from which to expand our explorations.
Conducting interviews, workshops, and users tests with the same users over multiple rounds. I think it's extremely helpful for the design process when users to see their own input brought to life through design, and become personally invested in its success and execution.
Leave room for deviation.
After conducting numerous interviews over the course of this project, the most important thing I took away was learning to let go of attempt to keep discussions rigorously structured. The best insights came out of interviews where users felt heard about their frustrations in their workflow or passionately discussed something that would be helpful, and these situations only came about when the conversation deviated significantly from intent.