Admin UI - Color Management | Primary
Redesigned admin panel to help Merchandising improve work efficiency in managing colors.
4 weeks
1 Product Designer (me)
Merchandising team
Engineering Team
UX/UI Design
User Interviews
Figma
Polaris
I redesigned the color management UI for Primary’s new admin panel on Shopify. I optimized the information architecture of admin, applied Polaris (Shopify’s Design System for building apps in Shopify admin) to the new admin UI, and optimized the user flows for the Merchandising team through interviews and three design iterations. I helped scope out MVP and follow-up design requests so that the Engineering team could focus on building the core experience with limited resources. The new design significantly simplified the user experience, making the admin much more easy to use.
The Challenges
Primary is a kids' clothing brand that makes essential, sustainable, and gender-neutral clothes in a rainbow of colors for babies and kids. As of 2021, Primary had more than 350 color swatches on its admin, with more than 60 new colors to be added each year.
In early 2021, Primary finished migrating the site to Shopify. While the customer-facing part of the site migration was complete, some admin features not native to Shopify (such as size managing and color managing) were left on the old admin site that was difficult to navigate and use. To create a better, seamless experience for the Merchandising team, Primary decided to build a Shopify app to host its admin panel. As a Product Designer, I was assigned to redesign the color management UI for the admin.
After analyzing the old color managing experience, I identified two core challenges that needed to be resolved:
- How might we improve the information architecture?
- How might we streamline the color managing experience?
The Solution
The new admin panel for color managing was designed to maximize the work efficiency of color managing. A clearer, well-organized information architecture was built, and multiple pages were updated to streamline the experience.
Task-oriented design with Polaris
Create landing pages for color swatches and color filters, separating interfaces by task. Only use styles from Polaris for consistency and efficiency.
Use the right layout
Switch to a grid layout for the Order of colors page, making color ordering much easier.
Optimze lists based on user preferences
Group color filters in the dropdown menu to improve the menu's readability. Order lists alphabetically.
Prevent errors by confirming actions with users
Present users with a confirmation option before they commit to an action that might be a mistake.
The Outcome
The main user of the color managing UI, our Merchandising team, was very happy about the design improvements. According to the feedback collected from the Merchandising team after the design was shipped:
- The new design was "very intuitive and easy to navigate".
- On average, the new UI reduced time spent on ordering colors by 50%.
Research
Before this project, I had never logged in to the admin side. I had zero knowledge about how admin functions and how the data was connected to the customer-facing site.
But just because of my lack of prior admin experience, I was able to examine the admin from the perspective of a new user and identify usability issues with fresh eyes.
Analysis of Existing Admin
First, I wanted to make sure I understand the tasks that need to be performed and their main users. I explored the admin UI and listed all the functionalities grouped by target:
- HEX codes: add, edit, remove
- Color swatches: add, edit, reorder
- Color filters: add, reorder, remove
I confirmed the list of tasks with the Merchandising team over Slack and identified two main users. Then I scheduled meetings with each user separately because one user only manages HEX codes and the other manages the rest.
In the meantime, I went through each task by myself imagining I was someone managing the site. I took screenshots along the way and noted places that made me confused or could be improved. Here are some examples:
My biggest confusion came from seeing the interface for editing color swatches look exactly the same as the interface for editing color filter options. My assumption was that some swatches were not only color swatches, but they also served as color filter options. I created this chart to show the suspected information architecture, which was later confirmed by engineers:
By analyzing the existing information architecture and walking through different user tasks, I identified two main challenges:
- How might we improve the information architecture?
- How might we streamline the color managing experience?
Design Iterations
Challenge 1: How might we improve the information architecture?
Using one interface for managing both color swatches and color filter options is a bad idea because it's illogical and it makes the user experience counterintuitive. So, I proposed a new information architecture to untangle different layers of data.
To better communicate my proposal for the new architecture, I created wireframes based on it and shared the user flows with the main admin users for feedback.
In the meetings with the two admin users, the new IA was validated and both users thought the user flows were intuitive. Now that the structure of the house is good to go, I was able to start adding building blocks and focusing on making the house more easy to use.
Challenge 2: How might we streamline the color managing experience?
While conducting an analysis of the existing admin UI, I pinpointed areas for improvement. The issues were addressed by the new design solutions one by one.
Issue 1: Ordering colors is difficult
Previously, the page where users reorder colors had a list view. When new colors are created, they are added to the bottom of the list which had 300+ colors at the time. It was a tedious and time-consuming job moving the new swatches all the way up to their correct locations.
I proposed a grid layout in the new design, shortening the page by at least 16 times. The grid layout will allow users to move color swatches a lot more easily and therefore increase their work efficiency. The main user that orders colors commented: "...ordering colors and setting up new colors are really two separate tasks. In the grid view, being able to see the color dots close together is very helpful."
In the second iteration, I shared the design with the Engineering team and they raised a concern about sorting color swatches into different groups by pattern — it would add a lot more complexity to the project. Since grouping color swatches isn't essential to the new experience, I dropped it in the last iteration.
Issue 2: Lists are difficult to browse
Before, many lists were not properly ordered, making the lists difficult to browse. Some lists such as the Components list even had many irrelevant list items.
After confirming with the main users, I decided to order the lists alphabetically. I also added a request to the Engineering team to clean up the data so that users don't see random options on the lists.
In iteration 1, the main user from the Merchandising team mentioned that "the Components dropdown menu is really long and difficult to scroll, so some way to group colors would help." So I explored organizing components in a 2-level menu. While the Merchandising team liked this design, the Engineering team thought it would require too much effort to build a 2-level menu. So in the 3rd iteration, I updated the menu to be a single list but grouped the components by color family, and then added a label at the top of each group. This list style is native to Polaris, so our engineers didn't have to build a new menu style.
Issue 3: System status is not clear
In the old design, it wasn't clear where the page was in the site map and it was difficult to navigate the site in general. There were also places where there was missing clear feedback after the user took an action.
To address the issues, I made sure there were visual indicators to inform the current location on each page. I used feedback-related patterns from Polaris such as the contextual save bar, banner, and toast to keep consistent with Shopify admin.
Issue 4: Lack of error prevention
During the initial analysis, I discovered that some actions that could be triggered by slips or mistakes were missing an error prevention mechanism. For example, on the new swatch creation page, if users hit the back button in the browser, they would miss all the previous edits and go back to the colors list. Users also didn't get a warning when they clicked the Remove button on the Hex codes page, which was very dangerous because each Hex code was linked with many color swatches, and each color swatch could be used by multiple products.
Knowing this, I made sure in the new design when users try to perform an action that could be a mistake, a confirmation dialog is in place to help prevent serious issues from happening.
Reflections
This was the first I worked on an admin-facing tooling and I really enjoyed crafting simple, intuitive experiences with the goal of maximizing users' work efficiency.
I became better at time management in this project. Because our Merchandising team is always very busy, it was difficult to schedule meetings with them. So instead of waiting to collect pain points from the user directly, I spent the time learning about the user tasks, forming opinions about what needed to be changed, and creating wireframes for a more efficient kick-off meeting.
In retrospect, there was one thing I could have done better: try to use existing styles from the component library instead of creating new ones. This would help reduce workload for engineers and simplifies maintenance in the future.
Next project: Email Templates | Primary >>