PB TECH
Business Laptop Redesign
Duration
Two weeks
(September 12th - Septembe 23rd)
Project Context
Collaborative Project
(Two UX + Two Developers)
My role : UX Designer
Timeline
The Problem
Many customers found searching for laptops on the PB Tech website difficult as the information provided was crowded and it was hard to navigate through the search results. This is a problem because customers feel overwhelmed by the different sections on each page, leading to users not beginning the purchase process immediately.
​
In addition, users can not narrow down their search results in order to make a well-informed decision in a timely and efficient manner. So, how can we help our users quickly figure out which products would be well suited for them without feeling overwhelmed by the entire process?
Problems with the current PB Tech Page
Laptop Page
Overload of information
Too many options with same categories
Laptop Page / Selector
Get-help options were confusing and time-consuming
Laptop selector is not straightforward or responsive, users have to click on the next button twice for it to work.
Product Page
Again, overload of information. Especially on product cards and product filter
Very Text heavy on product cards
Too many filter options
Key Insights
Purchasing
Finding and purchasing a laptop can be a difficult process
Users can not easily determine what they need.
"Help me choose" content is confusing
Overwhelmed
Users are overwhelmed by the wide range of laptops
Overload of information makes user not sure where to focus
Time
Users spend more time looking for what they need.
The current PB Tech laptop selector takes users 6 steps with 9 clicks to get users to their recommended product.
Persona
Empathy Map & Venn Diagram
We created an empathy map for our user persona Alan, and compared his needs to the business owner.
User Story
As a startup owner who wants to invest in new devices for my business, I want to find suitable laptops from a one-stop shop with a straightforward filter system that displays clear product information so that I can narrow down my options and make an informed purchase decision as quickly as possible.
Ideation
We did crazy eight sketches and combined our ideas. At this stage, we realized that we not only wanted to redesign the page but we wanted to guide the users and give them a complete experience. Based on that idea, we decided to put our focus on the laptop selector as essentially it has the same purpose as when users filter out their options before selecting the product that they want.
Filtering System
We had trouble sorting out the hierarchy for the filter on what we thought would be the most important, so we got some help from our dev team. They helped us sort through the filters and we applied this to our design system.
User Flow
Homepage of when users gets to the end process of adding the product to their cart
User flow for current PB Tech Laptop Selector
User flow for our laptop selector
High-Fi Prototype
This was our high-fi prototype for the homepage for laptops and the laptop selector before it was changed after user testing.
Homepage for laptops
Laptop Selector
User Testing
We created Direct Task and Scenario Task for the search filters and laptop selector. We then tested three participants and used the card-sorting method to find groups with similar problems.
Observations
For Business Laptop / Filters
Hero image had different messaging from the task
Users said there was no way to go to the next item without going back to the search results via the browser
Add to cart and buy now buttons made the users hesitate
Recommendations for reiteration
Ensure the hero image reflects the activities we are trying to make the user do (i.e., use the laptop finder)
Add an easier way to go back to the results page
Clear differentiation between add to cart and buy now buttons
For Laptop Selector
Users thought that the results should focus on their needs regardless of the price. If the product suited every need but was below or above their price range, PB Tech could potentially lose a customer
Users had no option to skip questions or to choose none
Questions weren’t personalized
Recommendations for reiteration
Remove the price as a step
Let users adjust the price as they go
give the option for users to skip question
Have specific questions based on the category they select
Jakob Nielson Severity Rating
Using the Jakob Neilson Severity Rating we ranked each pain point based on our priorities.
Current PB Tech Selector
Our Design
Reiteration
Reduce time users spend on the page
Got rid of the "Next" buttons
Giving users an option
Users said there was no option to select none so we added a skip button
Functional Changes
Users didn't understand some wording. They also found the images distracting so we decided to replace the images with icons.
Price shouldn't affect the users process
Users thought that the price shouldn't affect the outcome as the process is all about what is most suitable for them. We decided to completely remove the step and have it on the side so users can always adjust their budget to suit their needs anywhere in the process.
Design Decisions
Some users didn't know they could scroll to view recommended products so we wanted to make this clear.
Inconsistency in use of icons
Users phone the photos distracting so we wanted to highlight the decision panel.
Design Decisions
Users wanted more than one recommendation to compare products
Users wanted the option to add more items, buy in bulk and get value for their money.
Value Adds
We wanted to offer some value adds, based on our Anxious Alan persona. He’s not just a regular customer, but a business customer willing to buy and do repeat purchases (ideally).
banners for a personalized shopping help and support system in the form of Ask Phoebe. We wanted to highlight that PB Tech isn’t as robotic as it seems and that there’s a friendly face willing to help.
Reiteration
Reduce time users spend on the page
Got rid of the "Next" buttons
Giving users an option to skip
Users said there was no option to select none so we added a skip button
Price shouldn't affect the outcome
Users thought that the price shouldn't affect the outcome as the process is all about what is most suitable for them. We decided to completely remove the step and have it on the side so users can always adjust their budget to suit their needs anywhere in the process.
Reduce scrolling and distractions
Some users didn't know they could scroll to view recommended products so we wanted to make this clear.
Users also found the photos distracting so we wanted to highlight the decision panel.
Buy in bulk and compare options!
Users wanted more than one recommendation to compare products
Users also wanted the option to add more items, buy in bulk and get value for their money.
Value Adds
Banners for a personalized shopping help and support system in the form of Ask Phoebe. We wanted to highlight that PB Tech isn’t as robotic as it seems and that there’s a friendly face willing to help.
We wanted to offer some value adds, based on our Anxious Alan persona. He’s not just a regular customer, but a business customer willing to buy and do repeat purchases (ideally).
