Project Summary

Many small-medium size retailers use Unata to power their digital grocery experience. From merchandising on the site for weekly deals, troubleshooting customer orders, generating sales reports, to adjusting store information and hours, the retailer dashboard is where digital specialists, store managers, operation managers go to manage everything the Unata solution provides.

This case study focuses on how I set up a scalable design system, conducted researchto influence product roadmap for the entire product and launched the first 4 features successfully within 4 months.

Since the launch of the redesigned dashboard, we migrated core features (Check out Marketing) and introduced brand new capabilities (Search Manipulation). Read about the detailed process on how I used the design system and get into the details of each feature here.

Background

Climbing up the mountain of afterthoughts

The current version of the dashboard was built as an afterthought. As the product matured, we learned to think about the retailers also as users while designing new features.

The original dashboard is a typical application built by back-end developers without design. It is simple, but not user-friendly. Retailers satisfaction decreased since the technology was outdated and improvement requests were forced into the backlogs in fear that things might break. It got harder and harder to scale for newer features and desperately in need of a modern refresh with a user-centred design.

As a result, in 2018 we decided to build a second version of the dashboard from scratch. With brand new frontend framework and design. It is also part of the initiative to increase client satisfaction and engagement and transition the company model from professional service high touch to SaSS low touch.

My Role

As the senior product designer, I owned the end to end design process, including research, UX/UI design and user testing. I set up the design system and focused on five features for the initial launch. On top of executing the designs, I was involved in the initial planning, roadmaps, migration strategy and onboarding education.

The Team

Software Engineers, Customer Success Managers, Product Marketing Specialists.

Goal

Refresh UI with a modern look and feel and scalable design system.
Improve existing features and minimize destruction the current users' workflow through change management
Build front end react library. A pilot for main platform architecture revamp
Improve existing features and minimize destruction the current users' workflow through change management

Process

Research

Starting Point

Opening the pandora box

I audited the current dashboard and documented the existing information architecture, flows and screens. I created a list of UI improvement based on best practices. I also looked at our internal feature forum and filed JIRA tickets related to dashboard issues to get an idea of what the current pain points are and some ideas for future improvement.

Understand Users

Retailer Survey

No usage analytics was available for the old dashboard. Working with customer success managers who interact with clients daily, I created some surveys to understand the current usage and pain points and to validate the feature wishlists created based on my initial internal audit.

The surveys were sent out to all retailers and we got 60% response rate within two weeks. I created personas for the different sets of retailers using the dashboard and validated the internal requests with the real users. After sharing my findings with the head of product, we aligned on a direction for the most used features with most independent impact and where to start. We also identified low hanging fruits and quick wins. We also uncovered other needs for new features that could delight our end retailers.

Understand The Technology

Establish the Foundation

Just like any system that is developed with an engineer's mind, it is always like a mystery what, why and how some of the information and features land on the original dashboard. Very few documentation was available, except somewhere deep in the codebase. I worked with a back-end engineer who has been in the company for a long time and consulted with product managers to clean up the content, remove features that are no longer relevant and established an new information architecture. I also documented the knowledge on Confluence to start the practice.

Learn From The Best

design system research

Design system has been a hot topic in the past years. This was the first design system I am tasked to do. I worked with a front end engineer and researched many companies with established design systems and their process to set ourselves for success. We found IBM and Atlassian the most relevant to what we wanted to achieve. Having a working goal for the design system. that the engineers and the designers agree on, was extremely useful. We both learnt and developed our skill throughout the process and set a great case for future dev/design collaboration.

Iterations

I created the design system in parallel with 4 features that we identified as the first ones to migrate to the new dashboard for the first launch.

Order management
Guest management
Store groups
Segmentation management

We choose Order and Guest management because they are used by unique users - store managers and operation managers. Store groups and Segmentation management is selected as they cover the majority of the interaction patterns that can be reusable for the rest of the dashboard and they are not the most used features to allow a less risky transition.

I identified templates and structured the pattern library based on the ones I used in the four features.

As I’m designing, I make sure to keep in mind the future features that will come to this site and create components that are flexible and versatile.

Results

Design System

Win-win for design & techology

The new dashboard Design system was a great success. The pilot for building a design system with React component library was a win, more developers have transitioned to React and started developing a design system on the main platform. We also setup a working group for the design system. A weekly drop-in session where designers and developer share and discuss the upcoming features and review current components.

In Q1 2019, we continued to migrate and create new features. Out of the 6 features build in this quater, only 2 brand new components needed to be added to the system, everything else was reusable with small tweeks.

Improvement, Not Shocks

We were able to put in many low hanging fruits for the 4 features that involves minimal back-end changes. Without drastically changing the UX, we addressed many of the current painpoints with new UI patterns and a more information heiarchy. Some changes to call out:

Filter and search for orders
Bulk edit for segmentation
Removed irrelevent information for order and guest details
Redesign selecting categories from the category tree
And many more!

Client Satisfaction

I was involved in working with product marketing to ensure a smooth transition for change management. We created educational materials and launched the beta with our existing retailers to gather feedback before pushing to production. The feedbacks was very positive and retailers are very excited to see more features coming to the new dashboard. We also see a hike for retailer engagment on the feature forums and willingness to participant for furture dashboard research.