No Limit Kiteboarding Website Redesign

The most important mission of an e-commerce website representing a local business is to effectively bridge the gap between the online and offline customer experience. This involves creating a user-friendly platform that showcases the products or services offered and reflects the local business's unique identity and values.

MY ROLE

Project Manager UX/UI Designer

TOOLS

Figma PhotoshopZoom

METHODS

Heuristic Evaluation User Interviews Competitive Analysis Prototyping Usability Testing

TIMELINE

2 weeks

Problem

In my evaluation of the No Limit Kiteboarding local website, I noticed it faced issues like confusing navigation and a lack of filter options, which were driving users away. I also observed that outdated content, accessibility problems, and unattractive visuals discouraged repeat visits.

Solution

My website redesign project aimed to establish a strong connection with users by emphasizing trust, community, care, and simplicity. I introduced a "Compare Products" feature for convenience, improved site navigation to build trust, included a “Support” section for community support, and ensured a seamless checkout process for ease of use. It's all about delivering a user-centric experience.

Heuristic Analysis

Drawing from Nielsen's 10 Usability Heuristics, my evaluation of the current website uncovered significant usability and user experience issues. This prompts the development of a comprehensive design standard, guiding improvements in usability, accessibility, and engagement. Our aim is to deliver a more satisfying web experience aligned with industry best practices and user-centered design principles, meeting audience needs and design excellence standards.

In response to concerns regarding visibility and accessibility, I've made the strategic decision to relocate the side navigation bar to the top of the page. This adjustment not only enhances its prominence but also allows us to utilize the side area for a more seamless integration of filtering options throughout the entire page. Additionally, I've implemented a global search feature, ensuring effortless accessibility across the entire website.

Original Website

Competitive Analysis

Research Objective: To find out how other competitors handle navigation and user task flows.

UI and Navigation:

Prioritizing UI and navigation enhancements for a more user-friendly experience. User testing can pinpoint and address pain points.

User Flow:

Improving "Search & Filter Product" and "Checkout" flows to high standards, ensuring seamless navigation for increased user satisfaction.

Loyalty:

Concentrating on our loyal customer base by exploring loyalty programs, exclusive offers, and personalized experiences to maintain engagement.

Competitor Insights:

Learning from competitors, including strengths in information architecture, tech support, clean layouts, and interaction design to refine our website's performance.

Interviews with Kiteboarders

Engaging with 7 avid kiteboarders, I had in-depth conversations to understand their desires, preferences, and challenges. The interviews were designed to uncover not just their buying habits but also to understand their daily routines and the complexities of how they make decisions. Through these candid discussions, I discovered their passion for kiteboarding, their practical needs, and the obstacles they face in pursuing their kiteboarding goals.

INTERVIEW TAKEAWAYS

  • Users want digestible information about the product they are considering purchasing.

  • Users are overwhelmed by the technical information overload.

  • Users need support making a decision.

  • Users appreciate in-store experience, they learn about the trends and what’s new.

  • Users care about their local businesses’ successes and want to contribute.

Informed by user interviews, my goal is to enhance our platform by prioritizing essential features that meet user needs. This includes dedicated sections for better product comparisons, easy access to support resources, a streamlined checkout, and a unique showcase for trendy Kites, setting them apart from other products.

hmw ?

Problem Statement

Our customer seeks a shopping experience reminiscent of in-store assistance but is overwhelmed by product choices and lacks technical knowledge. they need guidance, education, seamless sorting, and effective product comparison to make informed purchase decisions.

simplify the product selection process by creating an intuitive and user-friendly interface for sorting through choices seamlessly?

incorporate customer reviews and ratings prominently on product pages to provide social proof and assist the customer in evaluating products?

implement a user-friendly product comparison feature that allows the customer to see side-by-side comparisons of the products they have in mind?

provide a seamless and secure checkout process with multiple payment options, ensuring that the customer's purchasing experience is as smooth as possible?

Ideation:

I decided to prototype the following new features: Compare Products, new Layout, and checkout, Customer reviews, Filter options, and Popular Kite section.

  1. search bar will appear in each page.

  2. Redesigned and tested Global Nav Bar.

  3. New section to include Promos & showcase kites.

  4. Side scroll bar for kite selections.

  5. New Newsletter section for Community updates.

  6. Most desired kite selection

  7. For all available Kite

8. New compare feature that was loved by Surfers during testing.

9. Buy Local option to stay connected with the fav Shop.

10. Side Bar to showcase selected compare options

11. product compare screen

I tested my figma prototypes with 8 users via Zoom and one in-person test.

With an impressive 90% success rate and positive feedback, users appreciate the website's enhanced ease of use. However, a recurring challenge arises when users click "compare" and miss the sidebar with added numbers, causing confusion. To address this, I propose an attention-grabbing pop-up to guide users, improving the overall experience.

Usability test results:

  • 90% completion Rate within 1-2 min.

  • 100% positive body language

  • changes made after the testing:

    1. 60 percent of the users commented on the contrast between the black and white being much. Then I used a color contrast checker to find the right balance.

    2. 70 percent of the users found some text sizes to be too small, so I followed Web Content Accessibility Guidelines (WCAG) to correct those issues.