Ace is an e-commerce store focused solely on tennis; promoting and selling tennis equipment, apparel, and footwear. Their mission is to promote the sport and help sustain its recent growth in popularity, and to create a hub for new and advanced players to fulfill their shopping and practice needs. They want to create a brand-new end-to-end app that attracts and resonates with both young and older players, optimizes all players’ shopping experience, and ultimately becomes an integral part of a tennis player’s lifestyle.
To kick off the project, I created a research plan based on the company's background and general objectives. I identified the appropriate research methodologies and ideal participants to effectively meet our research goals.
See research plan
Then, I conducted research on the current state of tennis to uncover trends related to the sport itself as well as equipment and apparel and learn more about playing and consumer behavior.
I conducted a competitor analysis to identify strengths, weaknesses, and gaps in the market in order to uncover opportunities.
With a better understanding of the sport, its players and the e-commerce industry dedicated to tennis, I scheduled in-depth interviews with 4 participants of varied experience in this area. All interviews were conducted remotely. Through a series of open-ended questions, I gained meaningful insights into the user's needs, motivations and pain points.
See User Interviews Summary & Takeaways
From the observations and insights gathered through research, I constructed Johan and Amy, two personas representing Ace's primary users, a beginner and a more advanced tennis player with differing interests and needs. The personas were created to represent our users and humanize the design process.
.jpg)
.jpg)
The following key problems were identified according to the user research findings, each of which will be addressed through specialized features on the new app.
Tennis players need an effective, time-efficient and affordable way to:
1. select and purchase the appropriate equipment for their athletic needs and goals.
2. get opportunities to play and practice
3. learn the correct technique to play well and to improve their skills
After identifying the problem(s), I brainstormed the following solutions, which will help identify product features, and therefore, define the user flow, sitemap and overall design.
1. The app will provide personalized recommendations based on the user's preferences and tennis skill level.
2. The browsing and search experience will be optimized to aid accurate and time-efficient product selection. Especial attention will be given to the categorization of products, filters, hierarchy and design of product lists, and search capabilities, including image scanning search.
2. Product descriptions will include a concise yet robust breakdown of racquet types and recommended uses.
3. By creating a new account, users will automatically have access to Ace's rewards program. Reward points will be based on purchases as well as the usage of the features described below.
4. Ace will provide a video library with short demonstrations of tennis tips to help users improve their technique, learn more about equipment, among others.
5. Ace users can find and sign up for matches, practice matches and lessons if available nearby.
With that in mind, I created the following user flow in order to represent the different routes and actions the persona may take when using the app
.png)
Once I identified the main flows, I defined the app's main navigation and sitemap
.png)
I started by drawing a few sketches and then digitized the low-fidelity wireframes below, representing account sign-up, product search, checkout and lastly the search of tennis technique tips.
After that, I worked on designing a modern and fresh brand of Ace, representing optimism and resilience, inspiration and potential. The brand is meant to be minimalist and somewhat neutral to attract users of all demographics.
See Brand Style Tile
Once a general design direction was established, I added imagery, brand style and UI elements to created high fidelity wireframes on Figma. To aid the design process, I also created components and a style guide with brand colors, effects and grid styles on Figma.
.png)
Lastly, I developed a simple user interface kit containing a selection of assets with critical design elements; UI components and styles
I created a prototype on Figma to test the task flows previously identified. This includes 1) Account Sign-up 2) Search & Browse Products 3) Checkout 4) Browse & Play Tennis Tips Video
To determine if the designed features are effective, I set 4 tasks for 3 participants to complete. I gathered data by observing their patterns and behaviors. I also asked questions in order to understand the users' process and motivations.
Objectives:
- Evaluate overall design and product appeal
- Evaluate user performance and satisfaction
- Analyze the extend to which the products meet usability objectives, business goals and user needs
- Identify any areas of improvement relevant to navigation and design
Once the tests were finalized, I conducted an affinity map exercise to analyze my findings. I identified key takeaways and next steps and sorted recommendations based on level of priority.
.jpg)
Based on the the results of the usability test, the following revisions were prioritized and implemented.
First, to enhanced clarify and efficiency, I added meaningful and descriptive labels to the Navigation Bar.
I also increased the border opacity on the search bar for better accessibility
To optimize accessibility, I changed the "get started" CTA colors for better contrast
A "Scan Card" feature was added to facilitate to process of entering a new card to the account. A "scan card" link was added to the original design. Lastly, a new page was developed similar to the "search by image" design.
To provide key information, a timestamp was added to the training videos as well as a progress bar in order to further incentives users to use this feature and decide what video is more beneficial for them to play.
Also, the "learn more" link was removed from the video(s) card(s) to eliminate redundancy and optimize the minimalist design
To increased efficiency, an "add all to cart" link was added under "featured items" in the training video description.
Lastly, to provide feedback and enhance clarity, a signifier was added to the sign-up form in order to indicate the validity of the email and password
1. Revise, analyze and prioritize additional user suggestions (refer to usability test results)
2. Conduct usability test and iterate
3. Cycle through the design process in order to identify additional opportunities
As a first time app designer, this project was fun, appropriately challenging and so very insightful. The differences between web and app design were painful clear from the get-go.
Another major challenge was learning how to meet the needs of multiple users (personas) simultaneously while at the same time optimizing business opportunities.
Yet, once again, I tried to see opportunities instead of obstacles. I used the flexibility of this type of product to prioritize key features and design meaningful and simple solutions to the users' common needs.
.jpg){kind=link}