BIGCOMMERCE DASHBOARD HOME
I worked on the full redesign of the Home of the BigCommerce Dashboard to solve a few major problems we were facing with our existing one: While the Dashboard Home was the most visited section of our product, it was doing a very poor job at surfacing the most relevant information to the user in an efficient way, and wasn't inline with BigCommerce's brand and voice.

THE PROBLEM

Users check the Dashboard Home multiple times a day, and the current design doesn't always surface the most relevant data. The lack of direct communication with the user makes the product feel cold, and the aesthetics aren't aligned with the company's branding.

THE CONSTRAINTS

  • Most of the pages of the dashboard have legacy code that's hard to maintain/update and has to be entirely rewritten.
  • Solution needs to be modular as some users may not have access to a particular piece of content.
  • Create a template system that allows our PMM team to be more self-serve.
  • Limited engineering resources.

WHAT'S NOT WORKING WELL?

  • The notifications are not communicating the right messages.
  • One of the most important section (Store Performance) doesn't communicate well the data.
  • Users often don't know where to go next once they see some data on the Home (lack of affordance).

DESIGN PROCESS

I started working on this project by going through a discovery phase to build a deep understanding of the problem and did an analysis of the competitive landscape. Our primary goals with this project were to increase the efficacy of the way we communicate with our users and create better affordances for taking up actions. I worked with our PM and engineering manager on setting up our goals and metrics to validate our hypothesis. I then explored a number of different solutions and tested my designs through usertesting.com and by doing some interviews with existing users.

ITERATIONS

This iteration introduced the notion of conversing with our users. I wanted to tell them a story based on what they needed to know about the health of their store.

PROS

  • Guide users through different actions that need to be taken.
  • Better use of the space to make the store performance section more effective and digestable.
  • Large space decicated to news/updates that will help users grow their business.
  • Information Architecture is clearer which helps the user better understand the purpose of each section.

CONS

  • Having the same recurrent actions emphasized at the top doesn't train the users to take actions on them.
  • The "Store Performance" section is missing some important information to have a better understanding of the performance evolution through time.
  • By having too much information shown in the "Latest Updates" section, some important messages might not be noticed and the BigCommerce marketing team wouldn't be able to use this space efficiently.

While I had made progress on restructuring the content of the page, I was still lacking some engaging interactions that would make this page more useful and delightful.

PROS

  • Visualization of the data gives better signals.
  • Updates and messages have custom designs and position on the page, which helps with scanning-through and understandability.

CONS

  • The page is overwhelming: There is too much information and inconsistency in the interactions.
  • The visual hierarchy in the Store Performance section is chaotic.

THE USER RESEARCH

After having worked on some interaction models we wanted to test some of our interactions. We partnered with usertesting.com to run a usability test on 10 participants. We then decided to get more feedback from our merchants and organized 10 phone interviews.

RESEARCH RESULTS

  • Content appears well organized (people find the information they're looking for quickly) - even if results varied depending on the user type.
  • Marketing messages only appear useful when they don't feel/look salesy.
  • The combination of graph + text works really well even if the functionalities of the Store performance are not as intuitive as they could be.
  • The notifications are really important but are easy to miss.
FINAL SOLUTION

After multiple iterations we decided to go with the solution below. I rethought our entire notification system to only surface the most important ones. I also redefined our information architecture by giving more focus to each section and I created a modular page that will allow adapt to the user needs.