Control Panel redesign

BigCommerce

When I first joined BigCommerce in 2017, the admin panel, which thousands of merchants use daily to manage their stores (including orders, products, customers and promotions) was confusing and hard to navigate. I knew that improving it would hugely benefit our users, however, due to competing priorities to build new features, it was never a company focus.

Things changed when a design & engineering collaboration in a hackathon won senior leadership’s attention — and a team of engineers fortuitously became free and was available to help.

At last, we could redesign the Control Panel.

My role

I provided product design leadership for this project end to end—advocating for user-centered design, facilitating user feedback, and providing hands-on coaching throughout. I ensured the team had the right design and research support, and kept stakeholders aligned with regular reviews. After a company-wide RIF impacted key team members, I reassigned resources to complete the rollout and address customer feedback. I made sure the work was visible across leadership and shared it broadly as a model for other teams.

Version A

Core problems

  • Poor wayfinding - The navigation fails to convey clearly to the user where they were in the product, as the primary menu disappeared once you clicked to the secondary level. Users often struggled to find what they were looking for and got lost. The IA was especially hard for new users to comprehend.

  • Outdated look and feel - Design had not been updated in years and did not accurately reflect the brand. Users described it as “old,” “robust but bulky.”

  • Search was tucked into the navigation too, not easily discoverable by users, and returned results more limited than users expected.

  • Help, located at the bottom of the navigation, opened up in-line, and the results blocked the menu choices. There was a secondary search that appeared as well.

Since no team owned the admin panel, including search, help, navigation, onboarding and other core utilities, this resulted in a navigation that evolved organically based on individual team additions as needed, thus this confusing UX.

Prototyping the vision

There was much internal recognition that we needed to redesign the Control Panel, however, it was never a priority. Some of us felt strongly that this was an experience worth improving. We had discussed this on the design team and had attempted to present a justification on at least one occasion, with no success.

The turning point came during an internal hackathon, when one of my designers partnered with two engineers to prototype a new navigation concept. They won the hackathon, getting the attention of our VP of Engineering, who wanted to build it.

We went further, creating a coded prototype to illustrate a vision of an extensible, customizable navigation that showed how might we white label the UI, change theme colors, and enable RTL (right to left) language support.

We painted a vision of a Control Panel with the utmost flexibility, to pave a path to a future of the business, supporting our international expansion and partner strategies.

Settings IA: low-hanging fruit

While a full overhaul was still on the horizon, we identified a more immediate opportunity to streamline the IA (Information Architecture). One of the biggest pain points for our merchants was the confusing use of the term “settings” and “store/storefront.”

We had multiple sections—all overlapping in terminology. Merchants struggled to know where to find specific options because these labels had evolved over time without a unified semantic structure. These labels were confusing to users:

  • Storefront

  • Channel Manager (New storefronts could be added here)

  • Store Setup —> Store Settings —> Miscellaneous

  • Advanced Settings

  • Server Settings

  • Account Settings

Settings IA redesign

My design team in Ukraine owned the Multi-storefront initiative, with the mission to allow merchants to add multiple storefronts to their store (for multi-brand and international use cases). It made sense for this team to take on this work, as setting up a storefront was confusing due to the settings issue. In interviews, we learned that merchants struggle to understand the difference between six settings sections. When browse failed, people tried searching for a setting they wanted, often to no avail.

NPS verbatim comments from customers echoed:

“Finding it difficult to navigate.”

“Working well, but still find the layout to find things is complex.”

Through card sorting and a similarity matrix using Optimal Workshop, we consolidated into new groups. Some 42 responses were included in the analysis. On average, users created 5-6 categories.

Finally, we consolidated the settings into a single page with categorized labels, descriptions and a search.

This was a significant win on our way to the larger vision, making it easier for merchants to find and manage their settings all in one place.

“Much appreciated change. We’d fumble around the different settings all the time. Keep on improving!”

  • Tanner, Brod Solutions, BigCommerce partner

CPX team resourcing & kickoff

I worked with a PM Director on a proposal to spin up a new Control Panel Experience (CPX) team to own the front end experience of way finding & navigation, search, in-product feedback, home page / dashboard, notifications, in-product help and other functionality that other domain teams did not own but impacted the UX.

The first project on this team’s roadmap was the Control Panel redesign. Finally, someone owned this UX!

This next phase was about getting the engineering team to internalize and truly understand the issues. It wasn't just about identifying what was wrong—it was about turning those insights into a clear roadmap for real product improvements.

We facilitated several workshops and cross-functional discussions that allowed the new CPX (Control Panel Experience) team to move beyond surface-level problems. We brought forward both quantitative data and qualitative stories, so they could empathize with what our users were experiencing. This helped the broader team not just understand the “what” but also the “why,” enabling them to transform these insights into a concrete set of product solutions.

Testing two competing designs

The focus of the work was on three areas: improving the information architecture, modernizing the visual design, and refining the interactions to make navigation more intuitive.

We identified that mixing high-level categories like orders or storefronts with utility functions like search and help in the same navigation space caused confusion. To solve this, we separated utilities into a top bar and kept core navigation categories on the left.

Since we had questions about the right approach, I encouraged the designer to take this opportunity to test two versions. With engineering help, we coded two designs into interactive prototypes so people could get a tactile sense of clicking around.

Version A stuck with the old paradigm of having all the links in the far left side nav.

In Version B, we broke out the utilities more clearly, incorporating a separate top bar. Over 3 weeks of testing with quick iterations based on feedback gave us the confidence to know that Version B was the winner. People were better able to discern where to find what they were looking for.

“That [view with the top bar] is a lot cleaner [...]

“I think, because the user information is actually separated from that operational. This navigation makes a whole lot more sense. So you've literally just got things that relate to the store and then the user settings that are completely separate.”

Visual polish & build

As we moved into the execution phase, we needed more polished iconography to make the BigCommerce brand shine. One of our designers in Europe had strong visual skills, so he worked with the CP designer to bring in clean, Material design-based icons to the design. We added icons to the top menu categories to add visual interest, as these were top level menu items, unlikely to change.

As we approached the build step, we surprisingly hit a conflict with Engineering. They raised concerns about consistency, while my designers said they were following guidelines. I facilitated a collaborative discussion, we clarified misunderstandings and adjusted the design system to accommodate the new navigation components and the new iconography.

This alignment ensured that both teams were on the same page and that our design system evolved in a way that supported the new, intuitive navigation.

Layout & interactions finalized

We refined the interactions in the navigation menu so that clicking on the chevron opened up the menu and clicking on the labels navigated the user to the associated page.

Search, help, notifications and store management were broken out into clear drop down menus, with click targets that aligned with common enterprise patterns in the wild.

Dark mode UI

Co-branding with TD Bank

As part of our “Powered-by” initiative, our SBD team had sold TD Bank on a co-branded Control Panel with our prior design. Since we were rebuilding this and could not support multiple versions, we had to ensure TD Bank would want to reskin this new design.

I worked closely with our business development team and the product manager to guide TD Bank through the transition.

We updated their documentation, aligned on a new delivery timeline, and tweaked the UI to ensure support for white label partners. By helping them see the value and get excited about the improvements, we turned what could have been a point of friction into a supportive, excited partner.

TD Bank was very pleased with the direction and the seamless co-branded experience.

Version B

Getting to 100% adoption

A big requirement for this project was to have a complete and smooth migration for 100% of our customers. The company had a reputation for incomplete rollouts that left users on outdated versions, for a variety of projects. There was no way we could do that again. Every single customer had to be using this new design within a few months.

Transparency with our customers was key. We actively communicated changes to the customers through a six step tour and showed them how to opt-out, from the drop down in the new Help menu. If they opted out, we asked them for feedback, and used that to iterate on the design.

Dark mode

A major customer ask was dark mode. Many people thought the white was “too bright” and was hard to differentiate from the main work panel, even though the designers thought it was “clean.” Our design system library, still patchwork and antiquated, could not be retooled for dark mode within a reasonable time frame, but we could provide a dark mode for the navigation only.

We explored several color options, sent a survey with the choices to a select group of customers to ensure we picked well, and added a toggle for users to turn it on and off.

This iterative approach gave us the confidence to push for full rollout of the new experience.

In the end, the project was a resounding success.

Some 93% of users who opted into the new UI stayed, and there were 0 customer escalations. The seamless migration and the high quality of the release became a flagship example within the company. It even helped our security team secure the ok for ISO 9001 compliance. Our first major partner on the new navigation, TD Bank, was happy with the seamless transition.

Overall, the project not only modernized our control panel but strengthened our reputation for delivering thoughtful, user-focused solutions.

7 principles for releasing with high product quality

TLDR from a blog post I wrote

I ran a retro with the team on this project, and shared my learnings broadly with the organization. I wanted others to understand the steps that the team took, what worked and what didn’t, in order to allow us to release a quality experience to our customers, with 100% adoption.

User centered approach

The team directly spoke to users early and often, understood their needs, and built prototypes that users could directly provide feedback on. Internal and external interviews, surveys, and usability tests helped the team ask the right questions. Design decisions were informed by user insights. Allowing users to opt-in and opt out was an opening to collecting relevant user feedback during the beta / rollout.

Focus on strategic planning and technical excellence

The team defined a clear product direction, conducted thorough research, and ensured the solution was well-engineered with a scalable architecture, comprehensive testing, and adherence to design standards. The team was clear, precise, and intentional about how they defined success for the project, including plans for change management / rollout. 

Adherence to design standards

Using and evolving BigDesign patterns to ensure visual and functional consistency across the product, enhance usability, desirability and brand recognition. 

Dogfooding and beta testing

Bite size epics with clear scope were demoed to stakeholders. The team “dogfooded” the product internally, creating a working prototype with engineering for testing. Beta users tested the team’s initial implementation on their actual stores, providing valuable feedback. It was incredibly simple for beta testers to provide feedback; a dedicated slack channel for internal users, and a Pendo feedback modal for users to share feedback directly in the CP helped streamline feedback. 

Foster collaborative teamwork

Biweekly demos improved engagement and alignment, including designers, developers, product managers, and anyone else who might need to be involved (Analytics, Legal, Security, etc). Working closely with Customer Support (CSS) helped the team understand pain points, and reviewing designs internally with various stakeholders increased alignment. Having a highly engaged PM participating as a daily member of the team, not in a handoff to engineering, helped foster a tight Designer/Developer feedback loop. Smooth collaboration with outside teams, including MSF, Apps, and B2B, informed decisions and shed light on dependencies. 

Thorough internal testing

Proactive and thorough internal testing was prioritized throughout the project. Tests were integrated into the development process, and detailed test plans ensured comprehensive coverage of all critical functionalities. This commitment to testing throughout the project lifecycle guaranteed a robust and reliable product.

Iterative and timely improvement

Build in time to collect, analyze, and address feedback, showing a commitment to continuous improvement. In the case of the CP navigation, dark mode was implemented after the initial release, in the period that was deliberately left open for further design and development (even before we knew what we’d be building). Users specifically commented on appreciating the speed at which we improved after the initial release.