Advantage Tennis

Timeline:
1.5 weeks
Tools:
Figma, Illustrator, FigJam, UX Tweak
Deliverable:
Responsive Web Design

Advantage Tennis is a local tennis ware shop that takes pride in its customer service and community.

Web Design
Sports
UI Design
Branding
E-commerce
Responsive
UX Research
Lifestyle
Tennis
Case Study
Problem

Advantage Tennis lacks an online presence, limiting its reach and growth potential. The store's reliance on traditional word-of-mouth marketing fails to attract the broader, digitally-savvy customer base that prefers online shopping and information access.

Solution

Develop a comprehensive website that combines e-commerce functionality with informational content about tennis gear and technologies. The website will reflect the personal touch of the store’s owner, Adam, showcasing his expertise and involvement in the tennis community.

Business Goals

Establish a strong online presence to expand Advantage Tennis's customer base and increase sales. The website aims to transition the store from local word-of-mouth publicity to a broader, more sustainable online platform that enhances customer interaction and retention.

Interviews

Asking the Right Questions

I wanted to gain perspective from both the customer and the business owner, so I decided to make 2 sets of questions based on the background of the interview participant. Below are the questions that made the biggest impact to the final design of Advantage Tennis.

Competitive Analysis

Let's Take a Look at the Competition

This analysis highlighted the store's strong community engagement and excellent customer service as key strengths, but also identified significant gaps in online and global presence. The insights gained from this analysis are guiding our design strategy to enhance Advantage Tennis's digital footprint while maintaining its unique personal touch, ensuring it remains competitive and broadens its market reach.

Research Findings

Insights

Advantage Tennis, known for strong community ties and transparency, mainly draws customers through Yelp and word-of-mouth. With the physical store hard to access, insights point to enhancing the online presence to simplify user interactions and maintain its community-focused ethos.

HMWs & POVs

Food for Thought

Key questions focus on enhancing the online shopping experience while preserving the store's charm. The goal is to create a user-friendly platform that showcases the store’s honesty, customer service, and expertise.

Site Map

Treasure Map

I designed the site map for Advantage Tennis by identifying key pages: Shop, Home, About, and Contact Us. These were structured to optimize navigation and enhance user experience, with each page serving specific functions to improve usability and engagement.

User Flows

Main Tasks

I focused on the tasks of purchasing a product and finding stringing services. I outlined each step from initial discovery to final action, ensuring a seamless process for product selection, checkout, and direct communication with the owner, aiming to enhance user satisfaction.

User Testing

What I Learned from Users

During usability testing for the Advantage Tennis website, users were confused by the services page and pricing options. We clarified the services were in-store and added labels to pricing choices to improve understanding.

CTA & Verbiage

Upon reaching the services page, users were uncertain of their next steps. Additionally, the page title led to confusion as users mistakenly believed the services listed were available online rather than in-store.

Labeling

During usability testing, users found the variety of options in the pricing section confusing. To address this, I added labels for the grip sizes to clarify the choices.

Branding Kit

A Glimpse Behind the Scenes

For the brand colors of Advantage Tennis, I chose bold yet reliable shades reminiscent of a tennis court. The primary colors are neon green from tennis balls and black for contrast, with subtle uses of “red clay” and “dark green” in photo hues and banners to avoid an overly busy palette.

Designing the logo presented a challenge, as the client had no consistent logo previously due to frequent changes. Inspired by the "heartbeat" logo the client favored, I developed a new logo symbolizing that "Advantage" Tennis is the heartbeat of tennis players, emphasizing the idea that tennis is life.

Usability Testing

Back to the Drawing Board

Using images and design principles like balance and contrast improves web design clarity and engagement, while revisiting research and applying the "law of less is more" ensures designs are effective and user-focused.

Show Don't Tell

Using images to show functionality often leads to better user understanding and engagement than merely describing actions with words.

Design Elements

Using design laws like balance, contrast, and hierarchy improves usability and visual appeal in web design, enhancing user experience.

Design with Purpose

Revisiting research during the design process ensures it stays aligned with user needs, enhancing the design's effectiveness.

Less is More

The "law of less is more" in design advocates for simplicity by minimizing elements to enhance clarity and user experience.

Hi Fidelities

Responsive Design

I developed responsive high-fidelity prototypes for the Advantage Tennis website: the Home page features services and products; the About page highlights community; the Shop page offers detailed filtering; and the Product page presents specs and reviews, all to optimize user experience.

Home

The homepage showcases the business’s services, customer testimonials, product highlights, and contact information for the owner.

About

The About page of Advantage Tennis highlights the business's community involvement, dedicated staff, and rich heritage.

Contact

The contact page details location, hours, contact information, and offers more insights into their in-store services.

Shop

The Shop page on the Advantage Tennis website allows users to filter items by category and other criteria for streamlined product searches.

Product Details

The product page displays item specifications, customer reviews, and suggestions for related items, enriching the user's shopping journey.

My

Conclusion

Designing a website for a local business I'm closely connected with was incredibly rewarding. The project allowed me to contribute meaningfully to my community, and I'm excited for the site's launch. Initially inclined to use advanced interface interactions, I chose a simpler design to accommodate both young and older users, focusing on static layouts with effective use of fonts, colors, and shapes for visual appeal. A major challenge was the client's undefined brand identity and logo, despite having core values like quality customer service and honesty. This required developing the brand voice, logo, and website priorities from scratch to enhance sales.

Product Design 🥐
UX/UI Design 🍞
Visual Design 🍩
Branding 🧇
Pastry Chef 🥮
Information Architecture 🍪
Product Design 🥐
UX/UI Design 🍞
Visual Design 🍩
Branding 🧇
Pastry Chef 🥮
Information Architecture 🍪
Research 🥖
Prototyping 🍰
Wireframing 🥯
User Testing 🥨
Interactive Design 🥞
Usability 🍮
Research 🥖
Prototyping 🍰
Wireframing 🥯
User Testing 🥨
Interactive Design 🥞
Usability 🍮

See My Other Projects

Fantastical Calendar

Create itineraries right in your daily scheduler

Peel

A food discovery app highlighting constructive reviews for restaurants

Ready to connect?