Order History Redesign
Client: Grainger
Project Type: UX Design
Skills: Agile development, brainstorming, collaboration, competitive analysis, design specifications, heuristic evaluation, interaction notes, mockups, project management, and wireframing
What and Why
Grainger.com is undergoing a back-end modernization and adaptive redesign to increase ease of use for customers. One of the areas of focus was the Order History experience.
Problem
As a B2B website, there was a lot of complexity in the My Account area. There was also very little consistency between pages since each was built by a separate team before a UX team even existed at Grainger. Due to some backend complexity, non-business users did not have access to their order history, which caused some registration of duplicate accounts because users believed they did something wrong the first time.
Original Design
Approach
Session Analysis
The first thing I did was review actual user sessions with our UX Measurement team to identify common pain points with the current experience.
Competitive Analysis
I then conducted a heuristic evaluation of the current state to catalogue all the existing usability issues, after which I compared with the experiences of direct and indirect competitors. This analysis gave me additional ideas of where and how improvements could be made.
Inception
This was the first project to begin development in the overall modernization of the My Account area. As a new project (and way of working), a two-week inception period kicked it off. During this inception, I presented to the development team and project stakeholders about the existing User Experience issues in Order History.
Wireframes
I created wireframes of multiple views and layout options for the new Order History page. These were reviewed with the UX Lead and the development team.
Axure Mockups
There were many rounds of feedback and regular updates with the UX and Visual Design Leads before development began to determine the design direction. Once this was decided, I regularly iterated based on feedback from the Product Manager, Business Analyst, Engineering Development Program Analyst, and Visual Designer until the design was finalized. I continued to update the wireframes as new stories were added to the backlog during the agile development process.
Struggles and Successes
This project began during the pandemic with a widely distributed team, so we had to learn how best to collaborate with one another. Mural ended up being an invaluable tool for brainstorming and ensuring all voices were included. There were some delays and changes in direction based on business goals, but the team successfully released multiple improvements.
Outcome
The modernization work is ongoing and will eventually include all users, while adding new features and functionality. However, the main problem of personal (non-business) users not having access to their order history was resolved and even led to an unexpected $1M increase in annual revenue.
