Visualizing future fashion trends to improve retailer decision making
Context
Neural Trend is a Saas platform that uses AI and predictive analytics to help retailers discover and assess trends and ultimately determine whether or not to place an order with the apparel manufacturer.
Objective
Each UI designer will develop an individual look & feel for the brand and create a high fidelity prototype that makes it easy for a time-crunched executive to quickly get the information they need.
My Role
UI Designer
The Team
UI Designer (3)
Timeframe
4 Weeks
Platform
Web Application
Problem
The platform is gathering and processing data as expected, but they have regularly received user feedback about the organization and presentation of the data is unclear and confusing.
Deliverables
Branding guide, High fidelity prototype, Design System, Usability Test report.
Step 1
Researching the Domain
To get started, our team met with our client to identify who their target audience and main competitors are.
Target Users
Medium-to-large retailers (Nordstrom, Macy’s, Bloomingdale’s, etc)
Mid- to upper-level management
Familiar with technology, but not considered power users or tech savvy
Competitor Brands
Heuritech
Trendalytics
FirstInsights
Color
Bright, saturated colors are juxtaposed on white/light gray backgrounds to highlight data, notifications, and call off action elements.
Analyzing the competition
We then conducted a competitor analysis, with the goal of identifying visual trends and gaps on the current market.
Layout & Navigation
Left sidebar for primary navigation. Separate data was organized onto individual cards.
Data Visualization
Bright colors, gradients, drop-shadows. Stylish data visualizations make interfaces feel both modern and attractive.
Step 2
Assessing Visual Preferences
We ran a desirability exercise with stakeholders and engineering team to identify their visual preferences and understand any technical limitations when it comes to the UI.
No gradients on data vis.
Because Neural Trend’s graphs would be updating live, engineers felt that it would be too cumbersome on the backend to incorporate gradients and shadows into the graphs.
No Dark Mode
They felt that a dark interface was more appropriate for a platform catered to finance/trading and not inline with an analytics platform.
Keep graphs relevant
The client team liked how certain data visualizations such as radar and speedometer graphs were visually interesting, but felt that they were too complex and inaccessible for their target user.
Step 3
Exploring Brand Identity
Based on the insights obtained from our research, each team member developed three design directions as potential solutions for Neural Trend’s “look and feel”. I created the following options:
Testing for Desirability
To determine which design direction would be best to move forward with, my team and I conducted desirability testing with potential end users of Neural Trend’s platform.
User Preferences
1. Lots of white/negative space
2. Energetic/bold colors to help charts and graphs “pop”
3. Ample labeling of icons and data visualization
Outcome
Based on the user feedback I deciding to proceed with 3rd option for Neural Trend’s look & feel.
1. Light and Modern
1. Editorial and Chic
3. Professional and familiar
Step 4
Applying the Look & Feel
With each of our individual look and feels determined, the next step was to leverage the wire-frames handed off by the UX team, and apply our visual direction on to them.
User Dashboard
Insights - Visualizing Trends
I reorganized the “Next season trends” graphs into a descending list format. This prioritized the top trends, made the labels easier to read, and overall made the data easier for a user to scan quickly.
Brand Insights - Customer Sentiment
I added a “Trend Score“ label for the x axis, to indicate to users what the baseline and numbers mean. Additionally, I included color swatches for the color graph to further communicate the colors being represented. Unlike the top trend charts on the dashboard, I left these formatted as they were in the wireframes to later A/B test them against each other.
For the product trend graphs, one issue I noticed was that there was a lack of labeling to indicate what the numbers meant. Therefore, I added a “Trend Score“ label for the x axis, to indicate to users what the baseline and numbers mean. Additionally, I included color swatches for the color graph to further communicate the colors being represented. Unlike the top trend charts on the dashboard, I elected to leave these formatted as they were in the wireframes. I would then proceed to user test them against each other, to determine which most effectively communicates the data.
Step 5
Validating with Users
With our prototypes completed we then aimed to validate our design decisions and identify any pain points in the user flow through user testing.
Testing Goals
Determine whether insights graphs effectively communicates information to the user.
Identify any additional pain points in the user interaction flow.
Task Scenarios
Find how the color red is trending for the fall 2020 season
Compare brand sentiment for the brands Zara & Everlane
Look up the price history of “Short Knit Dress“ by the brand Balmain
“I really think it’s important that you label everything.””
USER INSIGHTS
Trend Graphs are Confusing
Compared to the top trend on the dashboard, users felt that these graphs were difficult to read. They were also unsure about what information was being conveyed and the meaning of trend score was called into question again.
Brand Insights Lack Actionability
Many participants continued to express the same sentiment about the platform as a whole. More actionability. They want to be able to open a page an immediately know what there next move is. With this in mind I added a few additional features.
“I don’t understand what I’m looking at. What even is a Trend Score?”
“There doesn’t seem to be much useful information here.”
Unclear Navigation to Brands
For both tasks 2 and 3, user were tasked with finding information about the brand Zara & Balmain. When asked this, all participants’ first instinct was to use the side bar navigation to find the brand. The “correct” path would have been to use the header tabs to get to the brand page, but users did not see it as an option.
Step 6
Adjusting to User Feedback
I made strategic improvements to the high fidelity prototype based on the user testing insights. Additionally, I adjusted the look and feel to be lighter and more modern, while still maintaining Neural Trend’s brand guidelines.
Trend Graphs
Navigating to Brands
Users found the trend graphs to be confusing and meaningless. Additionally, the meaning of “trend score” was called into question again. I organized the “trends” into vertical lists, sorted descending by trend score. This I also categorized the insights further by splitting them between a trending up and trending down section. Lastly, I added a tooltip to explain the meaning of trend score.
Understanding Brand Insights
When tasked with finding information about the specific brands, all test participants instinct was to use the side bar navigation to find a “Brands” section. The “correct” path would have been to use the header tabs within the Insights sections. However, users were not able to find this without instructions. “Brands” was added on the main navigation and no longer nested within ‘Insights”. This enabled users to find it much quicker.
The previous brand insights page was difficult to find, confusing to use, and lacked actionable data. I restructured the navigation so users could search for individual brands, making them easier to find. From there, they could view easy-to-scan brand insights, filter them, and compare them against other brands.
Step 6
Testing the Updates
With our prototypes redesigned we aimed to validate our hypotheses through an additional round of user testing.
Testing Goals
Determine whether insights graphs effectively communicates information to the user.
Asses whether site architecture meets user expectations.
Gauge whether users feel dashboard data/content is actionable.
Users loved the redesigned trend graphs. They mentioned that it is much easier to understand and it prioritized what was was important to them - (top trending).
When tasked with finding trends for a specific brand, participants had a 100% success rate in navigating to the proper screen. Prior to redesign there was a 0% success rate for this task.
Additional labeling and tool tips allowed them to fully understand the data presented.
TESTING RESULTS
“There is a good overview for all the information. Images are really important… they just like to look at pictures of the things.”
“Again, I think I like the percentages than the integers or the scores… buyers work a lot with percentages so it’s almost just a little bit more familiar”
“I feel like this give you a good overview where you can dive deeper into it, and it’s easier to maneuver than other platforms.”
Final Designs
Step 6
Hand off to Client
After presenting the final designs and user testing results to the stakeholders and receiving sing-off on the designs our team collaborated on a client hand off document. This consisted of links to all documentation created during the design process of this project; Market research, wire frames, high fidelity prototypes, design systems, and user testing results.
High fidelity prototypes were created and housed in Invision, while the design system was imported used Zeroheight.