Candle Bar .jpg

Mobile E-Commerce Case Study

Mobile MRM E-Commerce

 
 

Situation

We pitched a client operating a rapidly growing multi-level relationship marketing (MRM) sales organization. My team committed to delivering a mobile-enabled sales app layer on top of an existing API. For reference, there was an ancient desktop web interface. Our client loved the idea of a responsive web-app that would help his sales consultants get their orders into the back office system quickly and easily.

 
 
Banner_Host_Spg_2016-opt.jpg
 
 

Problem

The scope of project matched the feature set of the existing system and refreshed design. Coming in after the deal was completed and working from a rapidly developed visual design, my challenge was to take the medium-sized tablet design and down-scale it's UI. We wanted it to operate elegantly on small screen mobile devices first.

 
 
 

How might we use this complete design to deliver a smaller screen experience that will keep sales representatives using this app instead of the legacy desktop one?

 
 

 

Approach

First, it was critical to understand the needed application capabilities, so we made a detailed review of the existing back office application. The interface was a random mix of fields and unpredictable flow steps and states. Clearly, users were motivated to learn it, but it required detailed instruction manuals and rote memorization.

 
 
 Existing Setup

Existing Setup

 Existing Cart

Existing Cart

 Existing Checkout

Existing Checkout

 

New users should be able to pick up our improved design quickly. Existing users were at risk of feeling they needed to re-learn a new system, so we knew that we wanted the mobile UI to match the flow of the existing web application enough that we wouldn’t be moving their cheese.

 

 

 

Delivery

There was a sizable batch of screens in support of the basic e-commerce function for this application (over 70), backed by a somewhat vague API. We spent a good chunk of time validating just how we thought the application would work in concert with the development team.

 

 

Results

The main purpose of the application is to collect orders for clients in the context of a “party event.” This segment was tested thoroughly and delivered to the client first. Their enthusiasm was contingent on the event where they wanted to launch the application to 2000+ sales representatives. We continued to produce phase two with a series of data reporting screens, and the final product was launched on schedule at their annual sales conference to immediate and overwhelming adoption.

 
 
 
 

Today, hundreds of sales representatives use the application each day from their phones in support of running and growing their businesses.

 

Our client is really pleased with the final results and how well the experience presents itself, but isn't sure if it will be built as originally planned. The strategy for conference content has changed during the past week and there's concern this project may not make the cut. They do think there is other work in our future, based on how well this project went.

  • Client: PinkZebra
  • Skills: Application Architecture, Mobile First, Design Systems, Responsive Design
  • Tools: Sketch, InVision