7 months
UX Designer
Figma
2 Project Managers
4 Developers
1 Lead UX Designer
1 Design Strategist
1 UI Designer
The name of this client and further details were omitted for confidentiality purposes.
Our client’s goal is to be viewed as the parts supplier of choice for all dealers and contractors in the market.
Our aim was to design and develop a parts ordering site from the ground up for improved transparency and oversight of parts purchasing and a more straightforward ordering journey.
For the particular phase of this project, of our two user groups (dealers and contractors) we focused on contractors’ user journey.
“How might we help independent contractors get the right parts for their jobs with efficiency and ease?”
Multiple complexities existed which would challenge our designs and design process to create the MVP product for our customers and client. These included the following limitations:
The client’s supply chain and distributor inventory levels impacted how and when our customers would receive their parts
We were limited by Shopify’s capabilities for certain features as we were aiming for an MVP e-commerce experience
Rules imposed in Salesforce on the back-end affected what our customers could see or interact with on the website
In order to understand the client’s vision while meeting the e-commerce standard for similar products, we:
Used client references such as Ford Parts
Leveraged research on Baymard Institute for similar e-commerce websites such as Home Depot, Build.com, and Lowe’s.
We brainstormed and mapped the user flows for the prioritized features due to the supply chain, Shopify, and Salesforce challenges.
These user flows became the backbone of how the user experience would flow, and track how changes to the design would impact each other.
Each design change brought forward new iterations which presented for feedback from the project team, client, and customers.
I collaborated with my project team on the development of the prototypes for five user flows (listed below) which were broken down into 15 user tasks in total.
Sign-up and log-in pages
Product Detail Page (PDP)
Distributor Locations
Cart page
Checkout
Of the five flows that were prototyped, featured below are two key areas: the Product Detail Page and Distributor Locations Page. These flows were highly impacted by the client’s supply chain and business processes, Shopify, and Salesforce limitations.
It’s important to note that this project is currently in progress. These designs are not final and will be iterated upon as the user experience is further developed and tested. :)
đź’ User Need
In the PDP, our contractors’ key need is to add the right parts, in the right quantity to their cart to receive it as soon as possible.
🔍 Challenge
‍The relationship between the distributor selected, the amount in stock, and the method of receiving the part(s) (pick-up vs. ship) produced a number of scenarios that required:
‍. Providing important information to the user and
.Nudging the user to take an action (i.e. change distributor location) if a part is not available in the quantity they need.
🌟 Solution/Features
A universal banner communicating important information or an action
Clear “Change Your Location” in both the body of the PDP, banner, and of the website header
đź’ User Need
Our contractors’ need to identify the distributor locations that they can pick-up/have their parts shipped from.
🔍 Challenge
‍
. Due to the rules imposed in Salesforce in the back-end, users could only see four nearby distributors in their location through the PDP (second image). This was limiting as the four suggested distributors could be out of stock, while the fifth may have the items they need to do their job.
‍.Shopify did not allow for a search bar in the “Change and Select Nearby Distributor” overlay
🌟 Solution/Features
Since the overlay had its limitations, we developed a Distributor Locations page with:
A search bar allowing the user to search by Zip Code, City, and State
Infinite scroll of nearby distributors within a 100 mile radius
Interactive Map to easily identify distributors
A summary of my experience so far working as a designer on a product team for the first time.
Due to my business consulting background, I tended to focus on speed of delivery rather than the thoughtfulness behind my designs, and quickly learned that the “customer experience” isn’t one isolated flow we’re delivering at a time.
Through a few iterations between user flows, I was able to track and call out all the detailed interactions between and in-between flows to meet the user’s and client’s needs.
Great designs speak for themselves, and when explaining a concept to project team members, or the client, mocking up an idea sparks greater understanding and collaboration, rather than explaining verbally!
As a designer representing the customers’ needs, it was key to appeal to the needs/interests of other groups (i.e. using sales or business metrics to support the development of more ambitious/future-state concepts) to better meet the needs of our customers.
