Dossier Access for Buyers System (DABS)

Mission: Create an application for Glassheads Wholesale customers that allows for easy access to product ordering and account management

UX DesignDevelopmentPHP

Overview

Dossier Access for Buyers System was designed for Smoke Cartel, Inc.’s wholesale division, Glassheads Wholesale, as a way to allow wholesale customers easy access to managing their accounts in addition to placing new orders and reorders all from a company-provided tablet.

Problem

A common problem occurring at Glassheads Wholesale was a lack of reorders due to the complicated and extensive process of having to call the Glassheads representative assigned to the retail store to place orders.

How might we create an application which gives wholesale customers a way to conveniently reorder products, view our inventory, and manage their profiles all from a company-provided Android tablet.

Users and audience

Glassheads Wholesale sold products to headshops across the country. The primary user would be either shop owners (in smaller shops) or a dedicated shop employee whose job was scouting products and placing and tracking orders.

Roles and responsibilities

This team consisted of me as the sole UX/UI designer and developer.

Scope and constraints

Due to the rapidly growing nature of the company, the project needed to be designed and brought to production quickly.

Note: This project was eventually canceled before it could be shipped to customers due to the fact that more pressing projects arose during development.


Discover

The first step in this process was to see what was needed out of this project. I started with a simple user persona of a headshop buyer. We had initially come up with a few features we wanted to gauge interest in

I reached out to a few of our customers via email to see if they would be interested in answering some questions about their purchasing decisions and purchase tracking process. Over some email and phone interviews, I gathered some user insights.

Initial project ideas

  • Reordering based on previous orders with the ability to change quantity and items in the order
  • Order status and tracking
  • Profile management (contact information, store information, shipping information, payment information)
  • Provide a tablet to the stores so they would have a dedicated device for preforming these actions

Insights

  • A catalog would be helpful to see what else could be ordered
  • Order status was an important feature for shops
  • Ability to quickly place a reorder, but also the added ability to change that reorder based on the success of sales since the previous order
    • Edit things like quantity and being able to remove products all together
  • Calling the store’s rep was a time-intensive process, partly due to phone tag and availability of our staff compared to their business hours (time zones played a role here as we had many stores in California and we were in Georgia)
    • The new process needs to be quick from opening the tablet to finishing the order

Define + Ideate

From this information I started to formulate a list of features we wanted to aim for.

Release 1

  • Reordering entire orders
  • Reordering partial orders, reorder previous orders with revised quantity
  • Reorders would be placed in a cart so new items from the catalog could be added
  • Place orders using payment information on file
  • Manage basic store information and contact information
  • Display information about how to contact Glassheads Wholesale along with information about the store’s representative

Future releases

  • Ability to change payment information, add multiple payment types, and order using various payment types
  • In-app chat function

Prototyping and development

After deciding on the features to include in the first release and after establishing the information architecture, I created wireframes of the designs on paper and then rapidly prototyped the UI of the application using Bootstrap. The final version would use a more styled user interface to better match the Glassheads Wholesale brand.

The application was prototyped using Bootstrap to establish general UI elements and was written in PHP with Shopify API integration. It was connected to Glassheads’ internal MySQL database to retrieve customer information along with representative information. The application was hosted on the company’s cloud Ubuntu web server running the Apache web server.

Early prototype of the homepage showing order history and status front and center Early prototype of the homepage showing order history and status front and center
Early prototype of the catalog page Early prototype of the catalog page

Testing

Testing was preformed on the tablets we had purchased for the stores for touch-friendliness. We reached out to one local store to have them test our prototype and collected some valuable feedback:

  • Some elements were not touch friendly
  • The tablets being used had low quality displays making visuals low-resolution and making touch inputs occasionally unresponsive
  • Reordering was a quick and simple process
  • Ability to change contact and store information was appreciated as it cut out a call to the Glassheads Wholesale representative
  • Catalog was useful but hard to sort through — better organization was necessary
At this point the project was postponed due to rising needs elsewhere in the company

Outcomes

Unfortunately the project had to be postponed due to rising needs elsewhere in the company, and as the only UX designer and one of two developers, my time was required elsewhere as Glassheads Wholesale was not the primary focus of the business.

Lessons learned

From the information gathered both during initial research and in testing the first prototype it was apparent that this was in fact a necessary product. Customers needed a fast way to go about orders and account management especially when they did not have time to call their rep.

If the project had continued, the next steps would have been to revise the user interface to be more touch friendly and to push for different hardware. The hardware we had was found to have finicky touch input and had a display that was too small to see large amounts of information.

It was also important to reinforce the Glassheads Wholesale brand, so a user interface redesign matching Glassheads’ brand and primary web interface was a must.