top of page
The Box logo

The Box Eswatini Purchase Order Web App UI

Project overview

THE PRODUCT: The Box Store Purchase order responsive web application UI

​

The Box is a specialist packaging retailer in Eswatini. The store needed a digital platform for users to place purchase orders and check if inventory was available for purchase when they needed it. The store already had a proprietary inventory management system integrated with Firebase Analytics but needed a user-friendly web application to connect to their back-end system for customers.

The store contracted us to build a simple UI for this case.

Project Duration

​

August - September 2021

iPhone 12 Graphite Pro Top View Mockup-5

THE PROBLEM

​

During the COVID pandemic, the need for a digital platform to accompany the site was even more relevant. As the majority of the store's customers needed products for events there was a need for customers to plan for purchases far in advance and therefore an inventory checker was needed.

THE GOAL

​

The Goal of the project was to build a UI that was intuitive to use but simplistic enough to connect to the back-end inventory system without adding unnecessary processing load for the system. The order app would speed up the order process as much as possible for customers

MY ROLE

​

UI Designer

RESPONSIBILITIES

​

  • Digital and Paper Wireframing

  • Designing & Testing UI

Understanding the User

User research summary

Primary research that was conducted entailed conducting usability studies with customers who walked in the store and were prompted to test the platform and give insight into problems and potential improvements needed.

​

In the user interviews, we evaluated the user flow of the web application for usability issues, error rates and any frustrations in accomplishing their tasks.

Usability study findings

Navigation guides and cues are needed to help users complete orders. The golden-brown brand colours needed to be applied to conversion actions site-wide.

A single page with accordions and carousels to present available products works better as no other pages need to be loaded and reduces computer processing load; helping order processing go faster.

The goal of the web application is a faster turnaround time for orders. The shorter the session the better, the application should act as a companion to in-store visits.

Mockups

iPhone 12 Graphite Pro Top View Mockup-10

Using cues to help with navigation the customer's journey of ordering or checking inventory will be helped along without arrows or unnecessary text.

​

Using the brand golden-brown colour to guide.

​

The main landing page has only 4 options to reduce indecision or losing customers off the conversion journey.

iPhone 12 Graphite Pro Top View Mockup-2
iPhone 12 Graphite Pro Top View Mockup-9

The about page gives more insight into what services the store offers for first time visitors.

​

Operating hours, contact information and customers are all included to help with social proofing for the store and reduce frustration for customers.

iPhone 12 Graphite Pro Top View Mockup-8
iPhone 12 Graphite Pro Top View Mockup-4

Including a profile creation and management service helped both customers and store management with processing recurring orders.

Including this alongside contact services helped the store build a deeper relationship with customers.

iPhone 12 Graphite Pro Top View Mockup
iPhone 12 Graphite Pro Top View Mockup-6

Accessibility considerations

Keeping the amount of data on the website low, without animations or high-resolution imagery on every page helps users with low data or feature phones to access the web application without experiencing slowed service.

Customer data from the store showed a large volume of older recurring customers. We considered eye strain and digital literacy in the mockups of the product.

This digital product was a mobile-first product as small businesses and entrepreneurs were a large share of customers.

Takeaways

IMPACT

​

The impact of this project would increase orders for the store while giving a competitive edge for the business by providing real-time inventory data to customers.

WHAT I LEARNED

​

My initial implicit bias was shown after using store customer data and user research data to make more accurate depictions and personas of the potential users. I learned to recognize and remove my bias more adeptly and earlier.

bottom of page