. Webgility

Role interaction design, mockup static interfaces, sketch, User research

Timeline Working In-House At Webgility

The Client

Webgility helps multi-channel e-commerce companies automatically connect to and sync their sales data, inventory, shipping, and accounting.

The Problem

Improve eCC Cloud (one of the Webgility’s portfolio products) user interface without modifying the functionality of its core features.
eCC Cloud is an application that connects QuickBooks Online (accounting) software with 35+ store channels and marketplaces. This allowed users to save hours on reconciliation and manual data entry.
Eventually, the app became much more sophisticated and through some marketing and branding efforts transitioned into Unify. But here’s the timeline of the product, and what my work as a product designer helped on during its evolution.

Research

Speaking with Webgility’s customer support team, we identified questions that often came up for new users, isolating pain points and assembling a timeline for what users experience as they progress through the application. Where were users dropping off? Why? What elements of the dashboard were confusing or unclear? Why? Were there any patterns that seemed to cause a drop in engagement? Why?
From this research, we established that navigation was holistically confusing to new users, and that users had difficulty understanding how different views within the dashboard were related to each other. In order to solve these problems, we decided to redesign the dashboard experience by laying out the following goals:

  • Strengthen visual hierarchy and clarify navigation everywhere, including designing an icon set.
  • Reduce and eliminate inconsistencies by establishing conventions for how pages should be laid out, how buttons should be colored and positioned depending on their purpose, and how copy should be written.
  • Clean up and organize the CSS, establishing and enforcing naming rules in order to help maintain consistency, reduce technical debt, and simplify future changes.
Old Webgility dashboard, 2013.
Heuristic evaluation of the application.

Navigation

Based on our user research findings, the design team sketched and mocked up dozens of layouts in an effort to answer the following questions for every user:

  • Where am I?
  • How do I get back to the view I just came from?
  • How does this page relate contextually to the dashboard as a whole?
  • If I need to find a page or a setting I’ve never seen before, can I do that on the first try?

Or, more accurately—we weren’t trying to answer these questions; we were aiming to make sure they never needed to be asked in the first place.

We improved the navigation by changing the location of the key actions the user needed to perform, which we found misleading. For instance, “My Stores” contained all the information related to connectivity, name, add and delete a store. “Order” all the data retrieved from this same store, and “Products” the list of items available in the store and in the accounting system. Sounds confusing and repetitive, and it was.

Instead of exploring the “my stores” section and selecting a store from there, we included a drop-down menu that allowed users to select a store name, and then the application would load all the relevant data into the Sales, Fees, and Inventory sections correspondingly.

We anticipated the future need to add more features to the navigation.

We realized that the horizontal bar would actually limit growth of the application. Took a couple of product meetings to make the rightful decision to switch to a left navigation.

After sketching, designing mockups, and iterating and polishing, our final product looked like this:

 

My Stores Tab

The original dashboard My Stores tab was essentially a stores selector. It would display in all information related to connectivity, name of a particular store; options to add or delete a store.

It allowed users to select a store name, and then the app would load all the relevant data into the Orders and Products section.

Our user data revealed that over 99% of users had two or three stores total—a separate tab work well for a dozen stores, but was not conducive for the majority of our user base.

In the new app architecture we removed the Stores tab. Instead users can now choose a store directly from Sales, Fees, or Inventory tabs without toggling between the tabs.

Icons

As part of the redesign, icons were added to nav items to increase legibility at small sizes and on non-retina screens. These icons went through several iterations in an effort to accurately convey meaning and maintain continuity with the existing voice, but evolve in a logical direction.

We decided to use single color, rounded icons.

A semi-transparent white color was used to make the icons feel lighter.

The Connections Section

One of the structural changes that required the most iterations was the connections section. Previously, the app was built around the need to connect accounting each and every time a store was added. We needed to improve the data model, and house all the connections in one page. It fulfilled these 3 requirements:

• Made evident that connecting accounting and a store was crucial for eCC Cloud to work.
• Had to be easily accessible and available a click away from any screen of the app.
• Had to indicate progress.

Here’s a set of iterations:

 
 

Results

All of the changes our team made were received positively from users—there were zero complaints (!), and we actually received several complimentary emails from customers, as well as kind notes during our scheduled customer feedback survey.

  
 

I was super happy with how easy the initial site integration and launch was, and service has been on point. Thanks guys.