Neural Trend

Neural Trend is an analytics platform that uses AI to help retailers discover and assess fashion trends, project sell-through, and ultimately determine whether or not to place an order with the apparel manufacturer. Neural Trend is gathering, collecting, and processing data as expected; However, they have regularly received feedback from clients that the data is difficult to understand.

Project Goal: Redesign Neural Trend’s interface to make their data easy to understand & more actionable.

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

Competitors

Heuritech
Trendalytics
FirstInsights

Visual Trends

Color: Bright, saturated colors are juxtaposed on white/light gray backgrounds to highlight data, notifications, and call off action elements.
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.

Assessing Visual Preferences

To kick off our research we ran a desirability exercise with stakeholders and engineering.

Methodology

We presented the client 12 individual images of interfaces/dashboards, with a heavy focus on data visualization. For each image, the client was given only 1 minute to say everything that came to mind when presented with each individual design.

Takeaways

No Gradients on Graphs - 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 Simple - 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.

Visual Exploration

Based on our research insights and stakeholder preferences I developed the following three design directions as potential solutions to finding the right “look and feel” for the platform.

Option 1

Option 2

Option 3

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.

Methodology

Testing sessions consisted of our team presenting all 9 of our style tiles to participants. For each style tile participants were asked a series of questions regarding how the design made them feel and its appropriateness to the fashion analytics market. Additionally, each presentation slide was accompanied by a list of adjectives to help the participants find wording if they were struggling to get started. To eliminate any bias the order the designs were revealed was different for every interview session.

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

Final Decision

Based on the feedback I received during desirability testing and the goals of Neural Trend I decided to move forward with elements from both the 1st and 3rd design directions.

Overhauling the UI

With our individual visual strategy determined, our next step was to leverage the wire-frames handed off by the previous UX team, and apply our visual direction to them.

Rethinking the Layout of Trend Graphs

The goal of these trend graphs on the dashboard is to provide quick insight into what the top trending colors, patterns, and clothing categories are. The issue with the previous layout was that the use of a percentage without the context of a baseline did not communicate the value of the trendscore. Additionally, with the section header named “Next season trends” it didn’t make sense to include what wasn’t not trending in the coming season.

To improve/recenter this graph’s actionability, I reorganized each graph into a list format that only includes the top trends of that category. Additionally, having top trend in a list format improved “scannability”.

Before

After

Charting brand insights

In the original brand sentiment graph I noticed a few issues. There was no clear way for a user to remove brands once they had been selected. Additionally, the graph lacked any sort of customization/filter. My solution for this was to clearly label the currently selected brand and include a x mark button on each to allow the user to remove them. I also included a time range filter on the graph, to allow users the option to hone in on more specific results.

Before

Product trends graphs

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.

After

User Testing

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.

Methodology

In each session we asked participants to complete a series of tasks, based on potential user flows. While completing each task, my team observed and recording any interesting decisions made by the participant. Once a task was complete we would ask participants if there were any times they felt confused or unsure what to do, and then have them rate the difficulty of the task from 1-5 (5 being very easy).

Task 1: Find how the color red is trending for the fall 2020 season

Task 2: Compare brand sentiment for the brands Zara & Everlane

Task 3: Look up the price history of “Short Knit Dress“ by the brand Balmain

User Frustrations & Solutions

“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.”

The Problem: 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.

The Solution: To improve readability I reformatted the the graph to a vertical list, which allows for larger text and establishes a stronger hierarchy between those trending up and down. 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.

Before

After

Confusing Navigation

The Problem: 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.

My Solution: To ease the “Brands” was added as a main nav section and no longer nested within ‘Insights”. This enabled users to find it much quicker. Additionally, user originally had to school in order to find specific brands; therefore, I incorporated a search bar into the brand page to improve that process.

After

Before

Additional Asks & Solutions

In addition to some specific feedback we received when testing our prototypes, 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.

Promoting top performing brands

I wanted to show top brand insights, similar to the top trends, that wouldn’t require the user to go find a specific brand and look up their performance. I solved fro this by designing a top trending section for brands that could be filtered based on different demographic and other criteria. Now retailers would be able to get a quick glimpse into the top brands that they may want to consider when putting in their next order of clothing,.

After

Instantly know a products value

I made the decision to include a “product score” on all product cards. This enables retailers to instantly recognize whether or not it is a good decision to purchase a specific clothing item. The higher the product score, the greater the item’s potential for sale, for the selected season would be.