A Smarter Shopping Experience for Tech Gadget Lovers
How I redefined product discovery, built user trust, and streamlined the checkout process to create a seamless experience for tech shoppers
Macbook Pro
10 min read
Team
Project Manager, UX/UI Designer, Digital Marketer, 2 Developers
My Role
UX/UI Designer
Responsibilities
User research, Wireframes (lo-fi & hifi), UI design
Tools
Figma, Google forms, Miro, Maze, Jira
Outcome
Improved product discovery, increased purchase confidence, and a smoother checkout
Overview
StarSelect is an e-commerce platform for tech gadgets, built to provide a seamless shopping experience for users looking to find, and purchase the latest technology with ease.
Problem
The client wanted to create an online store for tech gadgets but needed a platform that was easy to navigate, built trust with users, and provided a smooth shopping experience. The challenge was ensuring that users could quickly find products, feel confident in their purchases, and complete transactions without frustration.
Solution
A user-first e-commerce experience designed to make tech shopping effortless. The platform includes intelligent search and filtering, detailed product pages with verified reviews, and a simple checkout process to keep users engaged and increase conversions.
THE KICKOFF
Understanding the full project requirements
Before jumping into research and design, I needed to gain a clear understanding of the project’s objectives, constraints, and success metrics. To do this, I had an in-depth discussion with the Project Manager, who serves as the bridge between the client and the team.
1
Client goals
Build an e-commerce platform tailored for tech enthusiasts, making it easy to discover, and purchase gadgets.
2
Target Audience
Tech gadget lovers looking for an efficient way to browse, and buy gadgets online.
3
Business Priorities
The client wanted to increase user engagement, reduce cart abandonment, and improve the overall shopping experience.
MARKET RESEARCH
Starting with in-depth market research
Before diving into any design work, I began by exploring the world of tech gadget shopping online. I looked at current trends, common challenges, and what shoppers were saying about their experiences. This initial research helped me clearly identify what needed fixing and where the platform could truly add value.
88%
of consumers say product reviews influence their buying decisions.
69.8%
of online shoppers abandon their carts before completing a purchase.
76%
of consumers say ease of navigation is a vital factor when shopping.
COMPETITOR BENCHMARKING
Analysing the key industry competitors
I analysed leading e-commerce platforms to understand their strengths, weaknesses, and opportunities for improvement. This helped shape the platform UX strategy by identifying best practices and areas where existing platforms fell short.
Strengths
Established trust
Extensive product range
Click and collect service
Weaknesses
Overwhelming interface
Navigation challenges
Limited product comparisons
Strengths
Comprehensive product information
Price match promise
Diverse payment options
Weaknesses
Complex checkout process
Poor search filtering
Overloaded product pages
Strengths
Vast marketplace
Competitive pricing
Robust search functionality
Weaknesses
Trust and authenticity concerns
Inconsistent user experience
Limited Customer Support
USER INTERVIEWS
Getting to know our potential customers pain points
I conducted one-on-one remote interviews with five participants, each with different shopping behaviours. Some were tech enthusiasts who regularly buy the latest gadgets, while others were more casual shoppers who only purchase when necessary. This mix allowed me to gather a well-rounded perspective on common challenges.
"Sometimes, I hesitate to buy because I’m unsure if the product is authentic when there are no reviews."
"I want more than one image of the product to get a better idea of what I am actually buying"
"Hidden costs and multiple steps in checkout make me abandon my cart. I just want a quick and clear process."
"If I don’t see PayPal or a secure payment badge, I don’t feel comfortable making a purchase."
AFFINITY MAPPING
Turning insights into action with affinity mapping
I organised all the feedback from users on miro, grouping similar frustrations and needs together. This process helped me step back and see patterns emerge. What users were struggling with the most, what mattered to them when shopping for tech gadgets, and where existing platforms were falling short.
CORE USER PROBLEMS
From insights to actionable UX problems
After analysing the research insights through affinity mapping, I identified three major UX challenges that needed to be addressed. These challenges directly impacted the user’s ability to find, evaluate, and purchase items smoothly.
1
Difficult product discovery & navigation
Users struggle to find the right products due to poor search functionality and cluttered category structure, leading to frustration.
2
Users don’t feel confident about purchases
Many shoppers hesitate to complete purchases due to unclear product details, inconsistent reviews, and doubt about product authenticity.
3
Checkout drop-offs and payment frustrations
A complicated multi-step checkout process, limited payment options, and mandatory account sign-ups leads to cart abandonment.
SITEMAP / USER FLOW
Involving developers in the site map & user flow process
To ensure that the design was not only user-friendly but also technically feasible, I collaborated with developers early in the process. Their input helped shape key structural decisions, ensuring that the platform’s navigation, search functionality, and checkout flow could be implemented efficiently without performance issues or technical constraints.
Site map
User flow
DESIGN SYSTEM
Building a scalable & consistent design system
I built a design system to ensure consistency, and efficiency across the platform. This system defined the core UI elements, making it easier for both me and developers to maintain a cohesive experience.
USABILITY TESTING
Evaluating the design through usability testing
With high fidelity prototype finalised, I conducted a remote moderated usability test with five participants. They were asked to complete key tasks like searching for a product, reviewing details, and checking out. Their feedback helped identify minor friction points and provided insights for final refinements.
Improving product discovery
Users found it much easier to search for and filter products with the improved navigation and intuitive search functionality.
Building trust & confidence in purchases
With verified reviews, clear pricing, and detailed product thumbnails, users felt more confident in their purchases.
Usability Issues during checkout flow
During usability testing, users found the checkout process too long and tedious. Having separate pages for shipping, delivery date selection, and payment added unnecessary steps which users found frustrating.
Iteration: A faster, one-page checkout experience
Based on user feedback, I redesigned the checkout flow to be completed on a single page, reducing unnecessary clicks and making the process seamless.
One-page checkout layout
Combined shipping, and payment selection into a single page for efficiency.
1
Inline form validation
Users could fix errors in real-time without having to reload or move between pages.
2
Collapsible sections
Allowed users to expand only the section they needed, reducing visual clutter.
3
Macbook Pro
CHANGE IN STRATEGY
Adapting to business goals without compromising UX
After finalising the high-fidelity UI designs, there was a shift in business priorities. Stakeholders wanted to introduce pop-ups at checkout to promote high-margin products and increase average order value. While this made sense from a revenue perspective, I was concerned about its impact on the user experience.
Key insights from usability tests
I tested the original pop-up design with a group of 5 users to measure its impact on engagement and conversion.
NEW FLOW TESTED
Designing a non-intrusive upselling experience
After presenting the usability report to the project manager, I proposed embedding a "Recommended Add-Ons" section directly on the checkout flow rather than pop ups.
Why this approach might work:
Users could review suggestions without interruptions.
Suggested items were based on the user’s cart, making them feel relevant.
Testing the redesigned checkout flow
I tested the recommended add on section with a group of 5 users to validate my design decisions.
DEVELOPER HANDOFF
Delivering the final design & handoff to developers
Once usability testing was completed and final refinements made, I worked on handing off the design to developers. My focus was on making the transition smooth, ensuring that every design detail was clear, and minimising any gaps between design and development.
SCALE AND IMPACT
Validating success through usability testing insights
While the project is still in development, usability testing has already validated the effectiveness of key design decisions. The improved search experience, streamlined checkout, and embedded recommendations have all been tested with real users, leading to a smoother, more engaging shopping journey.
1
Product discovery improved
Users found products 30% faster due to better search and filtering.
2
Increased purchase confidence
80% more users felt confident in making a purchase with clearer product details and verified reviews.
3
Faster checkout completion
The new one-page checkout reduced drop-offs by 15% and sped up transactions by 40%.
Next steps
The project is now in the development phase, with usability testing results already surpassing the initial goals. I continue to work closely with developers, ensuring that the final implementation stays aligned with the design vision while maintaining a smooth and user-friendly experience.
Team
Project Manager, UX/UI Designer, Digital Marketer, 2 Developers
My Role
UX/UI Designer
Responsibilities
User research, Wireframes (lo-fi & hifi), UI design
Tools
Figma, Google forms, Miro, Maze, Jira
Outcome
Improved product discovery, increased purchase confidence, and a smoother checkout
10 min read
Overview
StarSelect is an e-commerce platform for tech gadgets, built to provide a seamless shopping experience for users looking to find, and purchase the latest technology with ease.
The Problem
The client wanted to create an online store for tech gadgets but needed a platform that was easy to navigate, built trust with users, and provided a smooth shopping experience. The challenge was ensuring that users could quickly find products, feel confident in their purchases, and complete transactions without frustration.
Solution
A user-first e-commerce experience designed to make tech shopping effortless. The platform includes intelligent search and filtering, detailed product pages with verified reviews, and a simple checkout process to keep users engaged and increase conversions.
THE KICKOFF
Understanding the full project requirements
Before jumping into research and design, I needed to gain a clear understanding of the project’s objectives, constraints, and success metrics. To do this, I had an in-depth discussion with the Project Manager, who serves as the bridge between the client and the team.
1
Client goals
Build an e-commerce platform tailored for tech enthusiasts, making it easy to discover, and purchase gadgets.
2
Target Audience
Tech gadget lovers looking for an efficient way to browse, and buy gadgets online.
3
Business Priorities
The client wanted to increase user engagement, reduce cart abandonment, and improve the overall shopping experience.
MARKET RESEARCH
Starting with in-depth market research
Before diving into any design work, I began by exploring the world of tech gadget shopping online. I looked at current trends, common challenges, and what shoppers were saying about their experiences. This initial research helped me clearly identify what needed fixing and where the platform could truly add value.
88%
of consumers say product reviews influence their buying decisions.
69.8%
of online shoppers abandon their carts before completing a purchase.
76%
of consumers say ease of navigation is a vital factor when shopping.
COMPETITOR BENCHMARKING
Analysing the key industry competitors
I analysed leading e-commerce platforms to understand their strengths, weaknesses, and opportunities for improvement. This helped shape the platform UX strategy by identifying best practices and areas where existing platforms fell short.
Getting to know our potential customers pain points
I conducted one-on-one remote interviews with five participants, each with different shopping behaviours. Some were tech enthusiasts who regularly buy the latest gadgets, while others were more casual shoppers who only purchase when necessary. This mix allowed me to gather a well-rounded perspective on common challenges.
"Sometimes, I hesitate to buy because I’m unsure if the product is authentic when there are no reviews."
"I want more than one image of the product to get a better idea of what I am actually buying"
"Hidden costs and multiple steps in checkout make me abandon my cart. I just want a quick and clear process."
"If I don’t see PayPal or a secure payment badge, I don’t feel comfortable making a purchase."
COMPETITOR BENCHMARKING
AFFINITY MAPPING
Turning insights into action with affinity mapping
I organised all the feedback from users on miro, grouping similar frustrations and needs together. This process helped me step back and see patterns emerge. What users were struggling with the most, what mattered to them when shopping for tech gadgets, and where existing platforms were falling short.
CORE USER PROBLEMS
From insights to actionable UX problems
After analysing the research insights through affinity mapping, I identified three major UX challenges that needed to be addressed. These challenges directly impacted the user’s ability to find, evaluate, and purchase items smoothly.
1
Difficult product discovery & navigation
Users struggle to find the right products due to poor search functionality and cluttered category structure, leading to frustration.
2
Users don’t feel confident about purchases
Many shoppers hesitate to complete purchases due to unclear product details, inconsistent reviews, and doubt about product authenticity.
3
Checkout drop-offs and payment frustrations
A complicated multi-step checkout process, limited payment options, and mandatory account sign-ups leads to cart abandonment.
SITEMAP / USER FLOW
Involving developers in the site map & user flow process
To ensure that the design was not only user-friendly but also technically feasible, I collaborated with developers early in the process. Their input helped shape key structural decisions, ensuring that the platform’s navigation, search functionality, and checkout flow could be implemented efficiently without performance issues or technical constraints.
Site map
User flow
DESIGN SYSTEM
Building a scalable & consistent design system
I built a design system to ensure consistency, and efficiency across the platform. This system defined the core UI elements, making it easier for both me and developers to maintain a cohesive experience.
USABILITY TESTING
Evaluating the design through usability testing
With high fidelity prototype finalised, I conducted a remote moderated usability test with five participants. They were asked to complete key tasks like searching for a product, reviewing details, and checking out. Their feedback helped identify minor friction points and provided insights for final refinements.
Improving product discovery
Users found it much easier to search for and filter products with the improved navigation and intuitive search functionality.
Building trust & confidence in purchases
With verified reviews, clear pricing, and detailed product thumbnails, users felt more confident in their purchases.
Usability Issues during checkout flow
During usability testing, users found the checkout process too long and tedious. Having separate pages for shipping, delivery date selection, and payment added unnecessary steps which users found frustrating.
Iteration: A faster, one-page checkout experience
Based on user feedback, I redesigned the checkout flow to be completed on a single page, reducing unnecessary clicks and making the process seamless.
One-page checkout layout
Combined shipping, and payment selection into a single page for efficiency.
1
Inline form validation
Users could fix errors in real-time without having to reload or move between pages.
2
Collapsible sections
Allowed users to expand only the section they needed, reducing visual clutter.
3
CHANGE IN STRATEGY
Adapting to business goals without compromising UX
After finalising the high-fidelity UI designs, there was a shift in business priorities. Stakeholders wanted to introduce pop-ups at checkout to promote high-margin products and increase average order value. While this made sense from a revenue perspective, I was concerned about its impact on the user experience.
Key insights from usability tests
I tested the original pop-up design with a group of 5 users to measure its impact on engagement and conversion.
NEW FLOW TESTED
Designing a non-intrusive upselling experience
After presenting the usability report to the project manager, I proposed embedding a "Recommended Add-Ons" section directly on the checkout flow rather than pop ups.
Why this approach might work:
Users could review suggestions without interruptions.
Suggested items were based on the user’s cart, making them feel relevant.
Testing the redesigned checkout flow
I tested the recommended add on section with a group of 5 users to validate my design decisions.
DEVELOPER HANDOFF
Delivering the final design & handoff to developers
Once usability testing was completed and final refinements made, I worked on handing off the design to developers. My focus was on making the transition smooth, ensuring that every design detail was clear, and minimising any gaps between design and development.
SCALE AND IMPACT
Validating success through usability testing insights
While the project is still in development, usability testing has already validated the effectiveness of key design decisions. The improved search experience, streamlined checkout, and embedded recommendations have all been tested with real users, leading to a smoother, more engaging shopping journey.
1
Product discovery improved
Users found products 30% faster due to better search and filtering.
2
Increased purchase confidence
80% more users felt confident in making a purchase with clearer product details and verified reviews.
3
Faster checkout completion
The new one-page checkout reduced drop-offs by 15% and sped up transactions by 40%.
Next steps
The project is now in the development phase, with usability testing results already surpassing the initial goals. I continue to work closely with developers, ensuring that the final implementation stays aligned with the design vision while maintaining a smooth and user-friendly experience.
Learnings 💡
What did I learn from this project?
👉 There is no such thing as too many iterations.
👉 Working closely with engineering teams is an empowering journey that opens your mind to many different aspects of the evolution of a project.
👉 Working on this project gave me a deeper understanding of balancing user needs with business goals while making data-driven design decisions.
👉 When you think you're done with testing... test more!
Team
Project Manager, UX/UI Designer, Digital Marketer, 2 Developers
My Role
UX/UI Designer
Responsibilities
User research, Wireframes (lo-fi & hifi), UI design
Tools
Figma, Google forms, Miro, Maze, Jira
Outcome
Improved product discovery, increased purchase confidence, and a smoother checkout
10 min read
Overview
StarSelect is an e-commerce platform for tech gadgets, built to provide a seamless shopping experience for users looking to find, and purchase the latest technology with ease.
The Problem
The client wanted to create an online store for tech gadgets but needed a platform that was easy to navigate, built trust with users, and provided a smooth shopping experience. The challenge was ensuring that users could quickly find products, feel confident in their purchases, and complete transactions without frustration.
Solution
A user-first e-commerce experience designed to make tech shopping effortless. The platform includes intelligent search and filtering, detailed product pages with verified reviews, and a simple checkout process to keep users engaged and increase conversions.
THE KICKOFF
Understanding the full project requirements
Before jumping into research and design, I needed to gain a clear understanding of the project’s objectives, constraints, and success metrics. To do this, I had an in-depth discussion with the Project Manager, who serves as the bridge between the client and the team.
1
Client goals
Build an e-commerce platform tailored for tech enthusiasts, making it easy to discover, and purchase gadgets.
2
Target Audience
Tech gadget lovers looking for an efficient way to browse, and buy gadgets online.
3
Business Priorities
The client wanted to increase user engagement, reduce cart abandonment, and improve the overall shopping experience.
MARKET RESEARCH
Starting with in-depth market research
Before diving into any design work, I began by exploring the world of tech gadget shopping online. I looked at current trends, common challenges, and what shoppers were saying about their experiences. This initial research helped me clearly identify what needed fixing and where the platform could truly add value.
88%
of consumers say product reviews influence their buying decisions.
69.8%
of online shoppers abandon their carts before completing a purchase.
76%
of consumers say ease of navigation is a vital factor when shopping.
COMPETITOR BENCHMARKING
Analysing the key industry competitors
I analysed leading e-commerce platforms to understand their strengths, weaknesses, and opportunities for improvement. This helped shape the platform UX strategy by identifying best practices and areas where existing platforms fell short.
Getting to know our potential customers pain points
I conducted one-on-one remote interviews with five participants, each with different shopping behaviours. Some were tech enthusiasts who regularly buy the latest gadgets, while others were more casual shoppers who only purchase when necessary. This mix allowed me to gather a well-rounded perspective on common challenges.
"Sometimes, I hesitate to buy because I’m unsure if the product is authentic when there are no reviews."
"I want more than one image of the product to get a better idea of what I am actually buying"
"Hidden costs and multiple steps in checkout make me abandon my cart. I just want a quick and clear process."
"If I don’t see PayPal or a secure payment badge, I don’t feel comfortable making a purchase."
COMPETITOR BENCHMARKING
AFFINITY MAPPING
Turning insights into action with affinity mapping
I organised all the feedback from users on miro, grouping similar frustrations and needs together. This process helped me step back and see patterns emerge. What users were struggling with the most, what mattered to them when shopping for tech gadgets, and where existing platforms were falling short.
CORE USER PROBLEMS
From insights to actionable UX problems
After analysing the research insights through affinity mapping, I identified three major UX challenges that needed to be addressed. These challenges directly impacted the user’s ability to find, evaluate, and purchase items smoothly.
1
Difficult product discovery & navigation
Users struggle to find the right products due to poor search functionality and cluttered category structure, leading to frustration.
2
Users don’t feel confident about purchases
Many shoppers hesitate to complete purchases due to unclear product details, inconsistent reviews, and doubt about product authenticity.
3
Checkout drop-offs and payment frustrations
A complicated multi-step checkout process, limited payment options, and mandatory account sign-ups leads to cart abandonment.
SITEMAP / USER FLOW
Involving developers in the site map & user flow process
To ensure that the design was not only user-friendly but also technically feasible, I collaborated with developers early in the process. Their input helped shape key structural decisions, ensuring that the platform’s navigation, search functionality, and checkout flow could be implemented efficiently without performance issues or technical constraints.
Site map
User flow
DESIGN SYSTEM
Building a scalable & consistent design system
I built a design system to ensure consistency, and efficiency across the platform. This system defined the core UI elements, making it easier for both me and developers to maintain a cohesive experience.
USABILITY TESTING
Evaluating the design through usability testing
With high fidelity prototype finalised, I conducted a remote moderated usability test with five participants. They were asked to complete key tasks like searching for a product, reviewing details, and checking out. Their feedback helped identify minor friction points and provided insights for final refinements.
Improving product discovery
Users found it much easier to search for and filter products with the improved navigation and intuitive search functionality.
Building trust & confidence in purchases
With verified reviews, clear pricing, and detailed product thumbnails, users felt more confident in their purchases.
Usability Issues during checkout flow
During usability testing, users found the checkout process too long and tedious. Having separate pages for shipping, delivery date selection, and payment added unnecessary steps which users found frustrating.
Iteration: A faster, one-page checkout experience
Based on user feedback, I redesigned the checkout flow to be completed on a single page, reducing unnecessary clicks and making the process seamless.
One-page checkout layout
Combined shipping, and payment selection into a single page for efficiency.
1
Inline form validation
Users could fix errors in real-time without having to reload or move between pages.
2
Collapsible sections
Allowed users to expand only the section they needed, reducing visual clutter.
3
CHANGE IN STRATEGY
Adapting to business goals without compromising UX
After finalising the high-fidelity UI designs, there was a shift in business priorities. Stakeholders wanted to introduce pop-ups at checkout to promote high-margin products and increase average order value. While this made sense from a revenue perspective, I was concerned about its impact on the user experience.
Key insights from usability tests
I tested the original pop-up design with a group of 5 users to measure its impact on engagement and conversion.
NEW FLOW TESTED
Designing a non-intrusive upselling experience
After presenting the usability report to the project manager, I proposed embedding a "Recommended Add-Ons" section directly on the checkout flow rather than pop ups.
Why this approach might work:
Users could review suggestions without interruptions.
Suggested items were based on the user’s cart, making them feel relevant.
Testing the redesigned checkout flow
I tested the recommended add on section with a group of 5 users to validate my design decisions.
DEVELOPER HANDOFF
Delivering the final design & handoff to developers
Once usability testing was completed and final refinements made, I worked on handing off the design to developers. My focus was on making the transition smooth, ensuring that every design detail was clear, and minimising any gaps between design and development.
SCALE AND IMPACT
Validating success through usability testing insights
While the project is still in development, usability testing has already validated the effectiveness of key design decisions. The improved search experience, streamlined checkout, and embedded recommendations have all been tested with real users, leading to a smoother, more engaging shopping journey.
1
Product discovery improved
Users found products 30% faster due to better search and filtering.
2
Increased purchase confidence
80% more users felt confident in making a purchase with clearer product details and verified reviews.
3
Faster checkout completion
The new one-page checkout reduced drop-offs by 15% and sped up transactions by 40%.
Next steps
The project is now in the development phase, with usability testing results already surpassing the initial goals. I continue to work closely with developers, ensuring that the final implementation stays aligned with the design vision while maintaining a smooth and user-friendly experience.
Learnings 💡
What did I learn from this project?
👉 There is no such thing as too many iterations.
👉 Working closely with engineering teams is an empowering journey that opens your mind to many different aspects of the evolution of a project.
👉 Working on this project gave me a deeper understanding of balancing user needs with business goals while making data-driven design decisions.
👉 When you think you're done with testing... test more!
A Smarter Shopping Experience for Tech Gadget Lovers
How I redefined product discovery, built user trust, and streamlined the checkout process to create a seamless experience for tech shoppers
A Smarter Shopping Experience for Tech Gadget Lovers
How I redefined product discovery, built user trust, and streamlined the checkout process to create a seamless experience for tech shoppers
USER PERSONA
Understanding our users to design a better experience
Jesse Hauson came to life from background research and my user interviews. He served as a reference point throughout the rest of the project, ensuring the user remained at the forefront of my design process.
PAPER SKETCH
Exploring my initial ideas through wireframes
Before finalising the platform’s key features, I sketched out wireframes to visualise different solutions. This helped me identify essential elements and refine the structure early on. I then collaborated with the development team to assess feasibility, ensuring that the proposed features could be effectively implemented without technical constraints.
CORE FEATURES
Identifying what features are needed on the platform
To create an effortless shopping experience, I focused on features that directly addressed user frustrations. Every decision was shaped by research insights, ensuring users could find products easily, and feel confident in their purchases.
Predictive search that auto-suggests relevant products based on user input.
Advanced filtering options (brand, price, product type) for easy product discovery.
1
Clear and upfront pricing
Include customer reviews to build trust in product authenticity.
Multiple product images and thumbnails for better decision-making.
2
Paypal & Google pay included as payment options
Guest checkout option
3
MOODBOARD
Finding my design Inspiration
Before deciding on a visual direction, I'll search my favourite sources for inspiration. Sites like Dribbble, Pinterest or Google Images are some of the best places to stay up-to-date on current design trends and acquire new ideas for possible visual solutions.
Learnings 💡
What did I learn from this project?
👉 There is no such thing as too many iterations.
👉 Working closely with engineering teams is an empowering journey that opens your mind to many different aspects of the evolution of a project.
👉 Working on this project gave me a deeper understanding of balancing user needs with business goals while making data-driven design decisions.
👉 When you think you're done with testing... test more!
PROTOTYPE
Design & rapid prototyping
Rapid prototyping is the process of producing interactive prototypes quickly and early for the purpose of obtaining feedback. Using initial task flows, sketches, and wireframes, I produced interactive prototypes using tools such as Figma.
