Stada is a customer feedback platform to help retailers easily reference customer and employee insights by allowing shoppers to rate their interactions with store associates.
By measuring individual associate performance through ratings and pre-populated tags, the product offers actionable insights that retail managers can leverage to train employees and improve customer experience.
I was part of an all-remote team of four UI designers with occasional support from an internal design director. With previous experience managing a team, I also took the lead as project manager on most tasks to keep things flowing. As a team, we coordinated all facets of the design process including visual, product, and prototyping as well as conducting all user research through remote interviews and surveys. However, each designer individually provided their own version of the final deliverables.
* * *
THE CHALLENGE
DESIGN A DIGESTIBLE DATA MANAGEMENT DASHBOARD
To differentiate their platform, our UI team needed to design a more refreshed look and feel for the manager administrative dashboard to easily reference associate and transaction insights at-a-glance while determining employee training opportunities.
Our team was given 4 weeks to complete our project and provide the final deliverables which include hi-fi screens for the administrative portal and a design system to leverage future build-outs of the platform. An outside UX team provided us with iPad wireframes, annotated wireframes, a basic customer feedback sitemap, and a simple problem statement and two user personas. Unfortunately, the UX team was no longer participating in the project prohibiting us from getting answers to any UX items we may have.
USERS & AUDIENCE
The target users of Stada are regional store managers and boutique store managers at a variety of small- to medium-sized retail chains that rely on quality customer service as a brand differentiator.
Working with the UX provided persona, we’re able to focus on someone like Jackie whose a boutique manager that needs glanceable data about store performance and actionable and specific feedback when provided.
HIGH LEVEL GOALS
* * *
THE PROCESS
DESIGN ISN'T A STRAIGHT LINE
* * *
THE DISCOVERY
RESEARCH, INSIGHTS & TAKEAWAYS
EVALUATING THE DATA VISUALIZATION LANDSCAPE
To evaluate leading data visualization software as well as popular retail performance dashboards our team conducted a competitive analysis report on 5 direct and 2 indirect competitors. This allowed us to gain a deeper understanding of opportunity gaps, what makes leaders in the market place, and how data is handled and portrayed for easy readability and graph portrayals.
Key Insights:
- Data management market is very large forcing us to find ways to be unique to stand out as well as make sure we’re engaging positively with our users.
- The overall focus is on easy to read performance results and the uniqueness of how each contributed to the company’s growth.
- From a UI perspective, simple and clean layouts by utilizing whitespace, readable sans serif typography, and a clear separation of layout cards dominated the marketplace.
- Interestingly enough, blue was the most defining color on all that we researched.
USER INTERVIEWS OVERALL PROCESS
To gain additional user research and validate our designs throughout the process, three rounds of remote 1-on-1 interviews with potential users were performed. Combining both qualitative and quantitative information, this allowed us to better understand what data needs are the most important, detail managers’ needs and test methods on successful ways to make data glanceable and not intimidating.
The results and what we learned was used to advance each design direction to the next level. Below are the methods used and what was tested for each round.
ROUND 1 : Desirability Testing | Style Tiles
ROUND 2 : Desirability / Usability Testing | Hi-Fi Designs
ROUND 3 : Usability Testing | Completed Prototype
Screenshots of a few remote interviews
DESIGN PRINCIPLES
LAYING A FOUNDATION FOR SOLUTIONS
By reflecting on our data management research findings and thinking of our range of retail managers, we created a set of design principles as guidelines that allowed us to establish alignment across design decisions.
BE SIMPLE
Don’t overwhelm users. Present the right amount of data and be clear on what it’s trying to solve.
PROVIDE GUIDANCE
Guide managers with the critical information they need to solves their problems
PRESENT SOLUTIONS
Present solutions to managers problems or context for why the problem may be occurring.
STAY CONNECTED
Despite division in age and experience, products should still be easily navigable for use and legibility.
* * *
IDEATIONS
EXPLORATION FOR A DESIGN DIRECTION
Finding inspiration work from designers is one of my favorite things to do when I start a new project. Pulling images from Dribbble, Designspiration, Skechappresource, and Pinterest provided a diverse range of data visualization trends to get the creative juices flowing. Gathering a few designs similar to the visual feel I’m aiming for, I created a few moodboards to use as inspiration and visual focus while starting to think about UI direction.
MOODBOARDS
Moodboard themes: "familiarity combined with a unique aesthetic" and "bringing color and life to a boring data world"
STYLE TILES
To have a better understanding of how can I guide a users’ focus, which graph styles and colors displayed information the best, and what elements allow for quick and glanceable information - I created two divergent style directions to test in our first round of interviews.
Style Tile A
Users unanimously felt this was clean, clear, and well organized as everything pops out while allowing for easy viewer focus and visual direction. Good indicators and the use of green and red colors make it clear what’s positive and negative. 72 in the circle was mentioned multiple times as what stood out first which will be helpful to guide users to focused KPIs.
Style Tile B
Although visually stimulating - my colorful version was questionable as a professional dashboard due to colors and my choice in icons and avatars. Users expressed greatly that graph arrows were extremely helpful. Blue CTA’s were well-liked and that the diversity of my colors made it easier to visually separate graphs and data.
Our desirability test results showed me to move forward with the modern look of Style Tile A. My color choices showed that the heavy contrast and attention-getting gold did direct users' focus. However, I need to address a few accessibility issues when designing my Hi-Fi screens.
* * *
THE SOLUTIONS
DESIGNING TO SOLVE OUR HIGH LEVEL GOALS
USER INTERFACE DESIGN
With a clear focus on design direction, I thought about Jackie’s needs and our newly established design principles, but also really trying to identify what makes a good data dashboard. All three are pretty much connected with the same traits…..simplicity, clarity, and emphasis on critical information. This was accomplished by high contrast colors, clear indicators, familiar graphs, and gracious amounts of white space.
Using our supplied wireframes as a starting point, I created these finalized screens.
OVERVIEW PAGE
The overview page was the most complicated screen to organize as its purpose is to provide management a compelling overview and make it easy for them to make the right call. Therefore it needed to be clean and easy to read.
The Overview page is meant to be your one stop shop to see the big picture.
I made bar graphs bold and dark with informative numbers and easy to read indicators for quick and glanceable information. High priority KPI’s such as conversion rates have enlarged numbers, use primary colors and key data indicators to make it less intimidating.
Two rounds of desirability tested proved that users felt this page was very successful in making the data glanceable and not at all intimidating. However our expert subject matter users expressed how we were missing a few beneficial KPI’s if this was to be a true overview page.
I believe that our users like Jackie would benefit more if the design more closely resembled an analytical dashboard that combines both operational and strategic dashboards.
TODAY PAGE
The today page was a struggle for me in earlier renditions as I began to overdesign elements which resulted in me pulling away from our main goals. Round 3 user testing of our Hi-Fi screens revealed that inconsistencies in my line widths and color meanings really confused users in a few areas.
Earlier version of Today page which was a failure.
My “sales by executive” section in the above screen didn’t provide enough context to make it clear what was actually being shown. Users were also confused on the color relationship as it resembled the team schedule to closely.
All this feedback was vital on bringing my designs back on track and luckily I was able to quickly resolve these issues for my final screen design shown below.
My resolved Hi-Fi screen of the Today page after listening to critical user comments.
COMPARE PAGE
I made changes to the original wireframes as after doing further research on compare pages.
Compare page
I added a daily, weekly and monlthy sales section as these were the top rated KPI’s required in our research. To be able to compare I included past data, indicators, and more detailed information for each area provides the analytical context needed for that high level overview that we’re trying to achieve. All this was missing in the original wireframes.
EMPLOYEE
This page needs to show managers fast, real time insights into your employee’s strengths and weaknesses.
Employee page - main
For the main page I kept the data glanceable by using bold simple graphics to highlight employee strengths, large easy to read customer ratings with corresponding color coded indicators.
Individual employee page
On individual employee pages, customer feedback insights into circle graphs with the percentages called out made users say they could easily review employee performance.
Users noted how the strengths graphics were the first item they noticed and felt it was a good way to see information quickly, however some questioned if it would be well received in a professional setting.
INTERACTION DESIGN
To make the platform feel more interactive and engaging I incorporated some springy animations and micro-interactions such as the expanding search menu. Date select drop-down menu, and active side navigation are all in gold provides guidance to critical areas.
I found the high-fidelity interaction prototypes to be extremely useful in gathering valuable feedback in our last round of user interviews. When tested participants found the app easy to use and really enjoyed the interactive elements and the ability to customize areas. I did learn that some users struggled with the navigation to figure out where to go due to the grouping of these related metrics not being in the same area, thus making it harder to find.
OVERVIEW
A product/department tab with engaging microinteractions keeps data from being intimidating.
TODAY
Interactive elements such as isolating employees by their shifts, along with pup up tips like in the employee section and sales graph, were intended to provide the right amount of data based on Jackie's needs at the moment.
COMPARE
Graph customization options help her to process the data in a way that she feels the most comfortable with. I included pop up tips when hovering on graph elements when a quick insights are needed.
CRAVE MORE?
You can view the entire prototype here.
* * *
DESIGN SYSTEM
The design system we created provides the necessary insights like colors, typography, graphics, and layout elements. A sample pages are shown below.
* * *
RECAP
ENDING WITH POSITIVE RESULTS, BUT THERE'S ALWAYS MORE TO IMPROVE
I LEARN FROM MISTAKES
Our overview page needs to make it easy for managers to make the right call, it needs to tell them how they’re doing right now. We found with our testing that our current overview wasn’t doing this. Its missing key information that managers need to see right away as well as the ability to dive further into this information when needed. Looking back, I should have identified this earlier and researched this before starting anything. Ideally, this would have been accomplished in the UX deliverables.
After speaking with SME's, I felt that what they really need is an analytical dashboard which displays both operational and strategic data. Operational dashboards displays data that facilitates the day to day operations of their business. Strategic dashboards displays important KPI’s providing a high level overview often compared to prior periods
To give our numbers context, I'd recommend including past data on each section with the ability to change it to different time periods. For goals, I’d include the target as well as the current progress. Warning indicators for when a metric is above or below a certain threshold will also help managers make it easier to spot problems.
OUTCOME
Our team successfully delivered our asked deliverables of hi-fi screens, a functional prototype, and a complete design system. Based on our usability and desirability testing of the end product, our team also achieved the additional asked goals of emphasizing important information, feeling more interactive and engaging, make less intimidating data visualizations, and keeping information feeling digestible and glanceable. Heavy contrast, size and position worked really well for me to show hierarchy and give emphasis on the most important information while downplaying the metrics that need to be looked at less frequently.
A big thank you to my amazing teammates who collaborated quickly to effectively deliver our end product.
If you’d like to learn more about my work with Stada, don’t hesitate to reach out.