I was tasked with re-designing the B2B order portal used by my employer and its customers. I noticed a number of usability issues that become conversion roadblocks for the contracts team that I originally worked in, for the customer service team, and for customers who are trying to perform common tasks like reordering products, pull reports, and search for specific product attributes.

Define

Quantitative data points from Google Analytics that guided my design:

• 17% of users access Flightline from a tablet device. These users are mostly in hospital and clinical settings that need to order medical supplies 'on the fly', yet the portal is not responsive to devices other than desktop screen widths
  

• The average product is reordered by the same customer 5.3 times, yet there is no ability to reorder a previously purchased item

Empathize

Qualitative customer feedback that guided my design:

• Gathered feedback through interviews and survey questions
  

• Observed users interacting with the existing product
  

• It is too difficult to interpret search results and takes too long to find products. The most important attributes aren't searchable, and is hard to narrow down the most important attributes from the results
  

• Order history is basic and doesn't have any item level detail. Past products ordered are only listed in PDF form and aren't clickable

Ideate

How can we make this experience better for our customers?

• Placing a "quick add to cart" widget immediately below the search bar on the main page shown after login would decrease conversion time by showing customers the most relevant suggestions and information at the outset
  

• Redesigning the platform to be responsive to all devices to improve usability for mobile and tablet users
  
  
• Improving the color and design choices to ensure an accessible experience for all users

Prototype

• Based on mobile-first design principles, I devised several mockups designed to address the issues I identified in my research
  
  
• Accessible color ranges and consistent sans-serif fonts and weights were applied to make the content easy to read, and compliant with WCAG accessibility standards
  
  
• The most commonly accessed search options were moved above the fold, based on quantitative data that uncovered which attribute types were searched the most

Usability Testing

• Although I left the team before I could see my design come to life, I put my designs in front of the portal’s users and gathered feedback, allowing me to iterate and continually improve my design

‍