Team
Xavier Christiansen, DesignerCyra Moss, Developer
What I contributed in
Journey Mapping and PersonasUser Research
Information Architecture
Wireframing
Protyping
User Testing and Interviews
Results
A working MVP showcasing improvements in user flow and engagement.Uncovered user research insights and supporting documentation to drive future design decisions.
Background
PB Tech is New Zealand’s largest computing and I.T. retailer, offering the best prices on a wide range of technology products. The company’s aim is simple—to be a one-stop computing and I.T. e-commerce platform by helping the customers to easily search for the products they want, and by suggesting other related products to better help with their I.T solution.
Summary
1. Understanding
Site audit and task analysis on the product-finding and filtering user flows.2. Investigation
Defined the primary users with the aid of user journey mapping, personas and user stories.Investigated and restructured the information architecture.
3. MVP Prototype
Iterated wireframes and designed the initial MVP for user-testing stage.4. User Interviews
Created a user research plan and conducted user research.Drew insights to incorporate into design improvements for the following version.
Screenshot of the business laptops section on landing.
Design Process
A balance of time and resources.As a team, we settled on working agile to allocate our time and tasks for the following 2 weeks.
We began by defining our opportunities, analysing available data such as reviews to lay the ground work for our methods.
Defining opportunitities
What are the existing problems?“The search function and features are good. However, when I click to the page, the product name is mixed with the specification detail. I need to read every item to make sure I get the product I want.”
As a customer, I want to be able to search anything I want and it show me relevant products without the frustration of mixed-up information. A simple website that does not require me to jump hoops to get the information I want.
“The product page is crowded and loaded with all type of product information. It can sometimes be difficult to find everything I need. Oh my God, can someone make it simple please.”
As a customer, I want to be able to look at each page and not be overwhelmed by it all. To have efficiency when finding the product I need in as little time as possible.
Understanding
What it does it mean to explore a product range in the least frustrating way?Understanding
Embedded actions & unclear layout = unnecessary friction.The search filter naturally provides a wide range of options, particularly given the diverse electronic specifications for laptops alone. With over 3,000 search results, finding a product is already challenging. Therefore, we prioritised exploring the filter design as a key task, which involved understanding the potential additional load of a few extra steps and the affordances offered by different componentsUnderstanding
The effect of culling or hiding options instead of redesigning for efficiency.The 'show more filters' component is very small, making it easy to overlook. Consequently, users with specific needs may assume there aren't detailed filter options available to narrow down their search, potentially impacting user retention rates.Introducing a search filter that prioritises organisation and layout, users would be able to complete their task in as little time as possible, with the least mix-ups as possible.
Beyond that, adding a feature where the users would not need to scroll back up when adding or removing a factor to narrow a search which may relieve the possible frustration caused by irrelevant products search results.
Resurfacing embedded search controls, and showcasing product information systematically with a focus on system status visibility.
Users would have more control of their task and would be lessen the likelihood of giving up on the task.
MVP PrototypeWill these changes improve the product finding user flow?
We created UI variants for different tasks and observed which would provide the best affordances to fit our target user flows.Detail #1
Simplified horizontal layout and option to switch types.We assume it would eliminate the constant page-hopping, we opted to have a tab directly above the filter.
Detail #2
Pinned navigation on scroll.We assume that the addition of a floating navigation bar adds an extra layer of navigation for user error.
1. Extending the function of original filters
We acknowledged the risk of potential confusion but opted to maximise the user testing round to evaluate the use and click rates of both functions, determining their necessity.2. Opportunities for exploration
Designing a fun sorting filter and providing just enough friction cues for users to feel encouraged in exploring features.User Testing
Participants were asked to complete tasks.We recruited people to partake in the 30-minute sessions. Due to this small sample size, we tried to cover as much ground as possible. Asking follow-up questions and entertaining comments that could be expanded on.Method 1 - Quantitative - A/B Testing
We devised various tasks to assess how different UI variants could best accommodate our target user flows.Testers' attempts were screen-recorded while they vocalised their decision-making process, with the dialogue transcribed by Otter.ai.
Method 2 - Qualitative - User Interviews
We employed open-ended questions to document participants' histories and assess their experience during each task, along with their overall thoughts on the testing process.This approach enabled us to confidently interpret our quantitative results, eliminating potential anomalies and providing context for their decisions.
Majority of the users appreciated the simple design of the filter specifications and a few commented that the addition of laptop type switch was efficient.
We noticed a slight learning curve for the latter, taking into account the time taken for the users to familiarise with new components.
Users interacted with the pop-up floating navigation tab, but a few questioned its functionality and some dismissed it completely.
Most users still preferred to use the main navigation tab at the top of the page, symbolising the need for improvement in intuitive design or removal of this function completely.
Synthesis
Designing for element cohesion and further experimenting*1. Utilising visual cues
We refined the filter design to adhere to a consistent visual language to resolve issues of users not knowing which elements are clickable. Ex. separating key filters and using radio buttons to emphasise selected options.2. Experimentation with the floating bar
Detail the floating navigation to closely match the filter options to clearly symbol to users its function.Balance when reaching conclusions.
Not every result needs to derive conclusive direction. As it was the first round of design and testing, it was sometimes easier to mark out an element completely. It was good to me reminded that experiments can be exploratory in nature.
Creating a controlled environment.
It was really important to notice the biases that may have limited our research and what we could do to improve upon it in a limited amount of time ex. interpreting data insights. Although this was a short experience, it was a fun and valuable one on learning how to best make use of our resources.