Creating a Responsive E-commerce Website for Mark Pickleball
Role: UX Research, UI/UX Design, Brand Identity
For this project, I explored the process of designing a responsive website for the Mark Pickleball online shop. I worked with the founder of Mark Pickleball to create a site that would build trust with the user and align with the goals of driving sales in a seamless shopping experience.
The Final Product
What is Mark Pickleball?
Mark Pickleball is a new pickleball paddle company aiming to democratize access to top-tier paddles without compromising on quality. With pickleball rapidly gaining popularity in the US and new players consistently joining the community, there are a lot of questions to be had about what equipment to purchase.
The goals of this project were to:
drive sales for Mark Pickleball by building trust with the customer and having a seamless online shopping experience.
create brand awareness for Mark Pickleball by having the site reflect a cohesive brand that speaks to the target audience.
The Process
Step 1: Empathize
Understanding how Entry–Intermediate Level Pickleball Players Feel about the Pickleball Paddle Shopping Experience
To begin understanding how users feel about the pickleball paddle shopping experience, I conducted 4 interviews among my pickleball-playing peers. They ranged from entry-level to intermediate players as this is the target audience for Mark Pickleball.
Some things that were said:
“I look at reviews to see how other people have felt about it.”
“Would it fit my need?
Like what I want it to do?”
“I’m more inclined to buy something if they offer free returns or shipping or have a trial period.”
After conducting the interviews, I created an affinity map to help sort through my findings.
A summary of the takeaways from the affinity map:
People are more willing to purchase a product if there is a trial period
People are more willing to purchase a product if there is a deal
People learn more about pickleball by meeting others while playing
People look for products that are specific to their needs
People look for what other people are saying about the product
People enjoy the community aspect of pickleball
Understanding the Current Pickleball Paddle Market Space
Once I had a better understanding of how people shopped for pickleball gear, I conducted research on competitors within the pickleball space. This involved identifying strengths and weaknesses within their websites and noting what features they had or lacked.
The main takeaways included references for:
what paddle specifications to include
the structure of the site
the payment process and UI
Step 2: Define
Defining the Target User
Once I had my research done, I was able to define who I was designing for and what their needs and frustrations are based on my findings.
This allowed me to create a POV Statement to better understand the users perspective:
When I’m choosing a pickleball paddle I want to have an easy time learning about which paddle is right for my needs.
Outlining Project Goals
After defining the user, I defined the business goals and user goals to have a broader understanding of the intended impact of the project.
The Problem Statement
Referencing the findings from my interviews and the defined project goals, I solidified my problem statement which would guide the brainstorm of ideas to address the users needs.
How might we make choosing the right Mark Pickleball paddle for the potential customer easier so that they can make a confident purchase?
Step 3: Ideate
Ideating Different Ways to Address the Problem Statement
With my research done and the problem statement clearly defined, it was time to start brainstorming features for the site that would address the problem statement. This included:
A product comparison page with defined terminology to make choosing a suitable paddle easier.
This addresses the key finding:
People look for products that are specific to their needs.
A comprehensive product details page with explanations of key features so the user knows how it would impact their performance.
This addresses the key finding:
People look for products that are specific to their needs.
Visibility for events such as Paddle Testing so the user knows they have the option to try before they buy.
This addresses the key findings:
People are more willing to purchase a product if there is a trial period
People enjoy the community aspect of pickleball
I listed out additional features that were informed by my interview findings and competitive analysis and organized everything into four categories of prioritization – “Must Have”, “Nice to Have”, “Surprising and Delightful”, and “Can Come Later”
For this project, I focused mainly on the “Must-Have” section as they were features that would directly address my problem statement.
Mapping out the Flow of How a User Would Choose and Purchase a Paddle
Keeping the problem statement in mind, I created a detailed user flow of the intended task flow of choosing and purchasing a paddle. This helped me better understand the user’s perspective and how they would navigate the site while considering the different decision points a user might face while completing this task on the Mark Pickleball site.
Defining the Site Architecture
To visualize the site structure and better understand page hierarchy, I created a site map outlining how the pages would relate to one another.
Sketching Out Low-Fidelity Wireframes to Understand Key Screens and How Layout Changes Between Mobile and Desktop Views
Next up was sketching out low-fidelity wireframes of the key screens I identified would be necessary for this task flow in both mobile and desktop versions. This included:
a homepage where the user could shop for paddles and see any immediate upcoming events
a product details page to learn more about a specific paddle
a product comparison page where the user could compare the different paddles available
a cart page
a checkout details page
Bringing the Sketches into Figma to Create Mid-Fidelity Wireframes
Once my low-fidelity wireframes were outlined, I continued to expand on them in a digital format and added more specific details to each page.
Creating a Visual Toolkit
With the framework of the screens laid out, I put together a UI kit to build consistency between the visual components of the screens. I kept the style simple for ease of use and in line with the company’s brand identity.
Step 4: Prototype
Bringing the Site to Life Through Prototyping
My next step was to flesh out the screens into high-fidelity wireframes and connect them into a working prototype that I could use for user testing.
Step 5: Test
Uncovering Areas of Improvement Through User Testing
I had 5 users test the flow of choosing a paddle and purchasing a paddle on mobile and desktop. I tracked the completion rate, average number of errors, and average time to completion for each task and made note of any general comments the users had.
From there I organized the results into a feedback grid, categorizing what worked, things to change, questions, and ideas.
Step 6: Iterate
Making Changes Reflecting User Feedback
Using my feedback grid, I prioritized changes based off of comments that addressed areas within the flow that were difficult to understand or use.
Revisiting the Problem Statement
How might we make choosing the right Mark Pickleball paddle for the potential customer easier so that they can make a confident purchase?
This problem was solved by:
Including a paddle comparison page with defined terminology that allows users to find what they are looking for more easily.
Highlighting key features of the paddle and how it affects their playstyle on the product details page to provide detailed context of the product they are viewing.
Highlighting paddle testing events so that users have more visibility on a try before you buy option and can be more confident that their purchase is what they want.
Next Steps
With the priority revisions made, I would conduct another usability test to see whether the revisions solved the issues that were brought up. If needed, I would do another round of testing and iterating. After that, I would hand off the project to the developers.
If I were to continue working on this project, I would continue to flesh out some of the additional proposed features such as an events page where users could go to find out about upcoming pickleball events hosted by Mark Pickleball.
Learnings
Feedback is necessary and the earlier it comes the better. Having pulse checks at various stages in the design process allows you to make sure you are staying on the right track and saves time in the long run.
It is important to differentiate between primary and secondary CTA’s to create different emphasis on the different buttons the user can interact with and guide the user towards the intended flow.