Pro Twigs
An interactive website designed to streamline the process of buying hockey sticks through e-commerce.
DELIVERABLES
Prototype
Style Guide
ROLE
Sole Designer
TOOLS
Figma
Miro
Adobe Creative Cloud
DURATION
4 Weeks
TL;DR
Pro Twigs, an e-commerce platform for hockey sticks, aimed to improve user experience and boost revenue. The process consisted of comprehensive research, competitive analysis, and usability testing. Iterative design addressed initial issues, resulting in an enhanced and user-friendly platform. Challenges included balancing checkout options and presenting shipping information clearly. The project emphasized the significance of user testing, iterative refinement, simplicity in design, and adaptability to user input.
BACKGROUND
Challenge
The objective revolved around crafting an e-commerce platform that simplifies the purchase of hockey sticks. The website tackled the challenge of improving revenue and customer checkout conversion rates.
Role
I undertook the sole lead in the design and development of an e-commerce website targeting both seasoned and novice hockey parents and players, leveraging my personal experience as a parent to two young hockey players. This case study exemplifies my ability to create a user-friendly and comprehensive online platform that caters to the diverse needs and preferences of the hockey community through research, testing, and design heuristics.
Defining the Problem
Pro Twigs, specializing in selling hockey sticks through their mobile-web platform, aims to improve the browsing and checkout experience to boost revenue. The product manager identified that users struggle to choose the right hockey stick based on features and face obstacles at the registration page. Overall, the company seeks to optimize usability and increase conversions on their mobile-web platform.
Plan Research
In order to ensure a successful development process, I made the decision to create a comprehensive research plan that would serve as a roadmap for the project’s design and development. This approach was chosen to allow me to closely adhere to and follow the plan, thereby maximizing both time efficiency and productivity.
Objective: Develop an e-commerce website providing customers with relevant information to choose the right hockey stick and enable easy checkout for both returning users and guests.
Research Questions: Identify consumer information needs before purchase, understand the impact of signing in on customer completion, optimize the checkout process, and effectively incorporate guest checkout.
Methodologies: Conduct online secondary and competitive research, followed by data synthesis and presentation of a report with three personas.
Target User Demographics: Hockey players or parents/guardians, aged 16-60, who frequently purchase goods/items online.
DISCOVERY
Competitive Analysis
To initiate my research, I conducted a comparative analysis of three prominent e-commerce websites, Target, Amazon, and HockeyMonkey. By examining the distinct shopping cart flows and product pages of these industry-leading platforms, I aimed to identify their respective strengths and weaknesses. This analysis informed the action items I formulated to guide my design, ensuring that I incorporate the desired functionality and meet the expectations of the diverse target audience.
Research Synthesis
The product detail page (PDP) plays a crucial role in e-commerce, requiring a visually appealing layout and essential elements to engage customers effectively. Pro Twigs can learn from successful competitors like Target, Amazon, and Hockey Monkey, who use big product images, multiple galleries, descriptive text, item options, shipping info, customer reviews, and clear call-to-action buttons on their PDPs. While their checkout processes differ, Pro Twigs could benefit from offering both customer login and guest checkout options to enhance checkout conversion rates. Simplifying checkout as a guest and prompting customer registration post-checkout can improve retention.
User Personas
To gain a deep understanding of the target user base, I conducted online research and collected demographic data, leading to the creation of two distinct personas representing the website’s target consumer group. The user personas served as a way to better empathize with the target users to better tailor the platform for their needs and wants.
Journey Map
After understanding Pro Twigs’ competitive advantages and user preferences, I created a user journey map for buying hockey sticks. This map guided customers from awareness of options to evaluating features and pricing, making a confident purchase, and aiming for customer satisfaction and loyalty.
Defining the Problem
After analyzing insights and data, I focused on understanding how to best serve users’ needs. To achieve this, I formulated six key questions aimed at uncovering critical issues and enhancing the application according to user preferences:
- How can we simplify the process of selecting hockey sticks for parents, reducing their time spent on it?
- How can we provide intelligent recommendations based on user preferences and search criteria?
- How can we integrate an efficient checkout process?
- How can we improve and integrate a seamless guest checkout process?
- How can we offer personalized stick recommendations tailored to the user’s playing style and preferences?
- How can we implement a comment and rating system for hockey sticks?
The challenge is to enhance an interactive e-commerce platform catering to hockey players and parents seeking suitable hockey sticks. Key challenges include streamlining stick selection, providing intelligent recommendations, optimizing the checkout process for efficiency and ease, offering an intuitive guest checkout process, and implementing a user feedback system through comments and ratings. The objective is to create a seamless and personalized shopping experience that meets users’ needs and preferences effectively.
DESIGN
User Flows
After familiarizing myself with the users’ needs, wants, and pain-points, I created user flows for essential tasks using red routes. This allowed me to establish a clear roadmap for designing the required pages and functionalities in the upcoming stages.
Wireframes
After establishing a clear understanding of the virtual workflow, I started creating low-fidelity screens for the necessary platform web pages. This allowed me to quickly draft a large number of pages, prioritizing functionality over intricate details. This approach simplified early user testing, allowing users to focus on the screens’ usability and functionality rather than their aesthetics.
VALIDATION
Usability Testing
Once the wireframes were created, I could move on to testing users and their experiences with the platform. Five in-person sessions provided insights into user needs through body language and speech cues. Participants followed tailored scripts, their actions and remarks logged for analysis based on their interaction with the Figma wireframes. Test subjects included parents of hockey-playing children, recreational players, and a variety of hockey-involved individuals.
Testing spanned four days, evaluating performance and preferences through assigned tasks:
- Did the PDP have the required information for buying a stick?
- Checkout by signing in first.
- Checkout as a guest.
- Complete a purchase.
Usability Test Report
After the usability tests were concluded, I was able to synthesize the data and pinpoint 4 issues with the platform’s design.
- Search Function: Suggest adding a visible search icon on all pages for easy access. Also, improve the radio button criteria selector on the search page.
- Shipping Visibility: Propose adding shipping details to the cart page and moving options to the final checkout page for clearer visibility.
- Registration Flow: Recommend a post-purchase registration button and incentivize with discounts or promotions.
- Product Page Reviews: Redesign the product page to include written reviews for customer insights.
PROTOTYPE
Prototype
Using insights from usability tests, I improved the design by crafting screens for vital tasks. These elements aimed to boost user experience and facilitate seamless navigation. The screens included a more robust home page, detailed product display page, intuitive shopping cart, and a user friendly guest checkout option. In this prototype, users can engage in an enhanced browsing and checkout process resembling a genuine experience.
TESTING
Usability Testing 2.0
Now that the prototype was designed, I could start a second round of usability testing to see if the design changes were able to resolve the problems the users had the first time around. The test script was adapted to evaluate resolved pain points and gather user feedback. Consistent conditions were maintained, with an added question. This comprehensive evaluation included retesting the unchanged environment with 5 users. The transition from a low-fidelity to high-fidelity prototype enabled comparison and assessment of platform improvements.
Usability Test Report 2.0
Concluding the second round of usability testing, I synthesized the results to determine if the design changes in the prototype resolved the pain-points from the initial round of testing.
- Search Function
Status: Resolved - Shipping Visibility
Status: Resolved - Post-Guest Checkout Registration
Status: Resolved - Product Page Reviews
Status: Resolved
Platform Effectiveness: All users completed tasks smoothly without new issues. Previous pain points were resolved, ensuring a seamless user experience.
FINAL DESIGN
Final Design
The high-fidelity prototype received minor adjustments for improved functionality and aesthetics. A ‘Stick Finder’ widget was added to aid users in selecting the right stick based on specific criteria, aiming to enhance user retention and encourage repeat business. The task flow and structure remained unchanged, validated by positive outcomes in usability testing. The final Pro Twigs prototype reflects my ability to integrate user feedback, address key issues, and refine designs through iterative testing, resulting in a functional and user-friendly e-commerce platform.
REFLECTIONS
POST-MORTEM
The Pro Twigs project demonstrated user-driven design’s power and the need for continuous enhancement via iterative testing. Challenges were addressed, leading to a seamless e-commerce experience for hockey players and parents. This case study emphasizes user feedback’s integral role at each design stage.
Successes
- Enhanced Usability: Iterative testing resolved initial prototype issues, leading to a seamless platform experience.
- User-Centric Design: Personas informed decisions, catering to diverse hockey player and parent needs.
- Informed by Research: Competitive analysis shaped effective features from top e-commerce platforms.
- Collaborative Testing: Involving actual users provided actionable feedback.
Challenges
- Checkout Balance: Balancing guest checkout and account creation was challenging.
- Shipping Clarity: Presenting shipping information without overwhelming users posed difficulties.
- Iterative Effort: Multiple design iterations extended the project timeline.
KEY LEARNINGS
- User Testing Vital: Validate assumptions with real user insight.
- Iterative Refinement: Continuously improve design based on user feedback.
- Simplicity & Function: Balance features with user-friendly simplicity.
- Flexible Design: Adapt to evolving user input for lasting relevance.
- Holistic Approach: Thorough research to prototype yields effective design.
MORE CASE STUDIES
Minecraft Dungeons: UI Redesign
