B2B Commerce Android App

7-dm banner.png
 
 

My Process

Problem Discovery — User Experience — UI Design — Product Development
 

Handshake is B2B Commerce platform that helps manufacturers manage their customers and catalog through order writing tools and customer management systems.

 

PROBLEM DISCOVERY

In the B2B space, it is common practice for a rep to visit a customer frequently to sell new products and inform them of promotions. While it is important to the rep to foster these relationships, it is not necessarily the best use of their time. Reps not only are a way for customers to place orders with the manufacturer, they are also a wealth of product knowledge that can help their customers with merchandising and marketing.

The industry, however, is moving slowly to find ways for customers to order products independent of their rep. Reps are still utilizing the majority of their time placing orders and doing mundane tasks that technology could easily solve. With the rise of mobile in B2C, transitioning the B2B market into a mobile product discovery and ordering experience is a viable solution.

In response to this problem, this study showcases the research and development that was taken to build an app that would give retailers freedom to discover products, promotions, and place their own orders.

 
 
 
 

Top Challenges

Below are some design challenges faced when approaching this project with some high-level questions we used to brainstorm possible solutions.

Designing Flexible Software

  • How do we brand a native app for varying manufacturers?

  • How do we design flexible components so manufacturers can structure a catalog that best fits their company’s needs?

Defining Product Types

  • How do we solve for various product types? (ie. A detail page for a ‘pair of shoes' vs. a detail page for ‘cases of wine’)

  • How does a user order numerous variations of one item? (ie. Ordering 10 items from the same item number, with various sizes and colors)

  • How can we solve for customizable products?

Product Replenishment & Discovery

  • How do we streamline a reordering process for users who place orders several times in a week?

  • How can a user manage various orders at once?

  • Outside of products that are in a cart, how can users track products that they frequently order?

  • How can users discover new products?

 

User Research

Because of the complexity of B2B Commerce, coupled with the challenges of integrating a SaaS product, we felt it was an absolute necessity to spend a lot of time interviewing all the various stakeholders and customers in the beginning stages of the project. Since our end users are not our customers, we needed be sure we had the needs of both parties in mind.

 
 

A screenshot of raw comments from interviewees

A screenshot of 'top themes' in our user synthesis

An overview of all the interviewees

 
 

Here are a few key takeaways from the interviews

  1. Buyers tend to drive their ordering workflows while reps focus on service and support

  2. Our customers see the app as a valuable communication and marketing channel

  3. While people like photos and a mobile catalog, our current catalog structure does not power an ideal product discovery experience or an exceptional re-ordering workflow (Search, Barcode Scanning and Dynamic lists both customer-driven and user-driven)

  4. There is a strong desire from customers and buyers for the app to centralize their key workflows beyond order writing (Inventory, Invoice reconciliation, Label printing receiving, and Merchandising)

  5. We can do more to make the product roll-out, training, and on-boarding easier, but customers appreciate our hands-on approach to customer success

 

Understanding Our Competitors

By researching our competitors, we were able to place ourselves in a niche marketplace with the app, especially given that most of our competitors are web based and not native mobile. Building an app based on our opportunity assessment would also give us a leg up on competitors with a mobile platform. Below is a list of some of our competitors:

  • Pepperi

  • NuOrder

  • PocketAdvantage

  • Shopify

  • Magento

  • BigCommerce

  • Oro Commerce

  • Netsuite

 

Opportunity Assessment

Along with our Key Takeaways, we presented an Opportunity Overview and through research have discovered there is opportunity in building a search-driven experience, with a component based design, leaving room for more product discovery within the app, and flexibility on merchandising for our customers.

 
 

Success Goals

Given complexity of on-boarding clients to our platform, our goal was to on-board one distributor and have one order placed by the end of 2017.

 

USER EXPERIENCE

 

User Stories

We spent time offsite creating user stories which would eventually drive our MVP and release versions.

 
 
 

Site Mapping

Simultaneously, we got to work and got started on the basic framework for the app which lead us to our wireframes.

 
 
 
 

Sketching

We started our sketches by thinking through the core user experience of placing an order. Our biggest challenge was giving the user the ability to switch between multiple orders, since this is common practice within the B2B world.

Some additional challenges were working with various product types and how each product detail page would be displayed.

 
 
 

Wireframes

Once we understood the two most difficult parts of our user experience, we were able to move forward into the next phase of the project so we can start thinking about the various ways components (ie. list, thumbnail view of products) could be displayed as well as basic functions.

 
 

Varying homepage examples

List view of products, Product detail, and Out of stock view

 
 
 

UI Design

Prototyping & User Testing

When designing a SaaS product where distributors are whitelisted, they will have control over which components they choose to use on their homepage and as well as product detail pages. We were able to determine what the splash page would look like, fonts used, and how the components were designed. See the prototype

 
 

Varying homepage examples

 

Varying product detail pages

 

Once we had a working prototype, we revisited all of the individuals we initially interviewed for user testing. The results were extremely rewarding, and although there were changes that needed to be made, we exceeded our expectations on customer satisfaction. From there we were able to continue our iteration process to our final designs.

Quotes from Phase 1 of User Testing

Each note has been tagged to help our synthesis on feedback.

  • #issue: The user did not think 'log out' was in an intuitive place

  • #quote: "I like how the app feels more like my company’s brand”

  • #issue: The user could not find help at first

  • #effort: Had no problems with adding a product

  • #quote: “I really like the UX”

  • #issue: The user did not understand the meaning of each order status icon

  • #quote: “The app is pretty easy to navigate”

 

PRODUCT DEVELOPMENT

Currently in Beta

Current Results

We were successfully able to on-board one of our customers, and were able to place one order through this new product. However, as the B2B industry is slow to adopting new technology, we haven't seen much adoption among distribution customers.

Reference Links

In case you missed anything