Photo by Christin Hume on Unsplash

Re-engineering Webgility’s desktop based e-commerce accounting automation application

Introduction

Webgility is a SaaS company specialising in accounting and operations automation software for e-commerce retailers to sync their online store data with their accounting software. Webgility offers desktop and online product variants for start-ups or big businesses who sell on multiple online stores.

Webgility

Project Background

Webgility was launched with a basic idea for online sellers to connect and sync their store data with their accounting software. As the business and customer base grew, the demand for features and customization led to feature overload and unplanned development. This resulted in cluttered interfaces, rise in usability issues and over-dependence on our support team.

It was time to bridge our shortcomings and make Webgility the preferred solution for online retailers.

My Role

Role: User research, Concept development, Visual designer, Stakeholder approval, User testing
Tools: Axure, Photoshop, and Illustrator
Skills: Quantitative and qualitative research methods, UX & UI Design, Wireframes, Testing
Team: Individual contributor
Duration: 1.5 years

Understanding Where We Lack

Since e-commerce accounting was a fresh topic for me, I conducted the following to understanding the domain, what we lack and how to improve:

  • Got myself familiarised with the subject and the desktop application through training sessions with the product owner
  • Competitor research to understand and identify the features offered
  • Interviewed 10 business owner and accountants
  • Sent survey and received 25 responses
  • Participated in customer support calls to understand common issues
  • Participated in customer onboarding sessions to understand onboarding challenges
  • Analysed customer cancellation reason for the past one year

Research Findings

My research led to the following interesting findings:

What customers says and does

It became evident that customers use our product for mainly 3 reasons:

Connect Sync Automate

Problem Statement

“How might we improve the experience of our desktop product so that our users can better connect, sync and automate their daily tasks to minimize the manual work and focus on delivering better customer experience to their users?”

Re-Design Approach

Since we were about to redesign an existing product, we strategise the following approach after meticulous brainstorming and planning:

Step One

Partial UX revamp + overall cosmetic improvements with no functional/code change:

  • Redesign the experience of dashboard and order listing UI. Customers spend 80% of their time on these two UIs
  • Branding changes, maintaining UI consistency (colours, typography, icons and graphics) throughout the application
  • Redesign specific UIs to address balance and alignment issues
Step Two

Module-wise UX improvements:

  • UX redesign for specific modules like Settings, Order Details, Payment, Shipping etc one at a time
  • Code optimisation for performance improvement

Concept Build-Up

Based on customer feedback, we identified a list of KPIs customers would like to see on the dashboard and refined it further.

All KPIs Refined KPIs
  • Profitability
  • Sales
  • Inventory Accuracy
  • Regional Sales
  • Gross Margin
  • Expenses
  • Seasonality
  • Revenue
  • Product Sale Details
  • Sales
  • Gross Margin
  • Expenses
  • Top Products
  • Regional Sales

I proposed a few different layout options for approval with the stakeholder, product owner and engineering team. My recommendation was option 1 and it got selected after the review session.

Layout options

For wireframe development, I used Axure rapid prototyping tool as we were planning for high-level interactivity.

I conducted regular review sessions with customers and implemented the feedback through iterations. I did multiple iterations before we finalised the concept.

Dashboard - Concept Evolution
Order Listing - Concept Evolution

Design Transition

Based on the approved wireframe concept, I came up with the design variations.

Dashboard + Order Listing Redesign

Brand Styleguide

I built the styleguide to help designers, developers and QA team to have a ready reference of the design standards, colours, typography and iconography we need to adhere to.

Product Cycle

The feature sets were converted to user stories and added as a backlog into Jira. The development team works in agile with a 2-week sprint cycle.

Sprint Cycle

Success Metrics

The entire design transformation of the product took almost 1.5 years. The transformations were validated with customers at every milestone and done course correction. Here are the results that we considered as a success for our product.

  • Increase in positive feedback from customers
  • Increase in 4 and above social rating
  • Increase in customer retention
  • Increase in monthly sales booking
  • Reduced churn, and
  • Lesser support calls

Prev Project

Visual analysis of my last 100 Facebook posts

Next Project

Plant trees remotely with smartphones using drones and LIDAR (Light Detection and Ranging)