Sports Training Mobile Application

Sports Training Mobile Application

UX/UI DesigneR

UX/UI DesigneR

highlights

highlights

UI refresh of professional sports training application

UI refresh of professional sports training application

Delivered a complete UI refresh in addition to heuristic recommendations for UX enhancements for a sports training mobile app including social media, scheduling, and e-commerce features.

highlights

UI refresh of professional sports training application

Conducted in-depth user research and discovery interviews with the business stakeholders to understand the target market, business mission, and product vision.

Designed and implemented a live mobile application prototype in tandem with a full stack developer working in REACT Native.

The APPROACH: Problem Solving for a Complex Process

The APPROACH: Problem Solving for a Complex Process

Discover Client Needs

Refresh UI & Branding

Enhance the UX

Define the Problem

Contextual Research

Design the Solution

Discover Client Needs

Discover Client Needs

Conducted a qualitative interview with the client alongside the full-stack developer to understand business objectives and surface pain points.

Conducted a qualitative interview with the client alongside the full-stack developer to understand business objectives and surface pain points.

interview insights

interview insights

Pain Points

  • In a previous phase of design and development with a different vendor, the client experienced pain points in the communication styles and processes of the engagement.

  • Client felt that the previous deliverable failed to convey a legitimate, professional look in the app.

  • Client also felt that the experience was clunky and requested UX enhancements in addition to the UI refresh.

Business Needs

  • The client had already been conducting marketing with a Sky Blue color and preferred to keep using going forward.

  • The target market included users of many age ranges and backgrounds so the application needed to provide a frictionless user experience

  • The client's product vision was a sophisticated, professional tool for coaches that is still approachable to athletes.

Refresh UI & Branding

The existing interface of the MVP that the client received from a previous vendor did not meet their expectations for the style and function of the application. The client felt misunderstood in the previous phase of design and development, so I knew it would be important to demonstrate the ability to understand and translate the client's vision into a cohesive, clean, and visually appealing interface.

previous designs

proposed style guide

New designs

business outcome

Going forward, the business had a cohesive brand identity and guidelines on how to apply the styling and color palette in both marketing and product scenarios. This was a crucial step in setting the engineering team up with reusable components and style guidelines. The exercise also gave the client greater confidence in the business's direction moving forward, allowing them to present their business case to investors with a unified story and identity.

Refresh UI & Branding

The existing interface of the MVP that the client received from a previous vendor did not meet their expectations for the style and function of the application. The client felt misunderstood in the previous phase of design and development, so I knew it would be important to demonstrate the ability to understand and translate the client's vision into a cohesive, clean, and visually appealing interface.

business outcome

Going forward, the business had a cohesive brand identity and guidelines on how to apply the styling and color palette in both marketing and product scenarios. This was a crucial step in setting the engineering team up with reusable components and style guidelines. The exercise also gave the client greater confidence in the business's direction moving forward, allowing them to present their business case to investors with a unified story and identity.

previous designs

proposed style guide

Applied style guide

Refresh UI & Branding

The existing interface of the MVP that the client received from a previous vendor did not meet their expectations for the style and function of the application. The client felt misunderstood in the previous phase of design and development, so I knew it would be important to demonstrate the ability to understand and translate the client's vision into a cohesive, clean, and visually appealing interface.

business outcome

Going forward, the business had a cohesive brand identity and guidelines on how to apply the styling and color palette in both marketing and product scenarios. This was a crucial step in setting the engineering team up with reusable components and style guidelines. The exercise also gave the client greater confidence in the business's direction moving forward, allowing them to present their business case to investors with a unified story and identity.

previous designs

proposed style guide

Applied style guide

Enhance the UX

Enhance the UX

When conducting a heuristic evaluation of the existing prototype, I identified several areas of the experience that could be improved for each user persona type: trainer and athlete.

Targeted enhancements

Targeted enhancements

Trainer Persona

  • Homepage View + Earnings

  • Managing Training Courses

Athlete Persona

  • Social Media Feed (new)

  • Virtual Storefront (new)

improvements for THE trainer persona

improvements for THE trainer persona

Pain points on the homepage

The existing homepage view did not provide a clear view of financial performance at a high level. The previous version did not surface this information anywhere

A trainer needs to be able to understand the specific revenue streams of their business.

UX OUTCOME

A trainer can quickly see a high-level status of their overall revenue as well as for the current calendar month.

They also have freedom and control over the view of the metrics with easy-to-use filters that are clear and concise.

Pain points with managing training courses

The existing flow for managing training courses was lacking in many necessary functions.

These missing functions included the ability to add a photo to a training offering as well as basic editing functions so that the trainer does not have to delete and recreate a training just to edit the description.

UX OUTCOME

A trainer can easily create and manage their training courses and make changes on the fly.

A trainer can clearly preview their changes in the format that athletes and clients would see.

improvements for THE ATHLETE persona

improvements for THE ATHLETE persona

social media strategy

This client's go-to-market strategy included the addition of a social media component meant to attract athletes 30 years old and under.

According to Pew Research Center, adults under 30 are more likely than older adults to use social media apps such as TikTok, Instagram, and Snapchat. Eight-in-ten adults ages 18 to 29 say they use Instagram, which is much higher than shares seen in older age groups. This 30 years and under age group is a major driver of user adoption and growth for these social media platforms.

UX OUTCOME

Features like an online community and user-generated and suggested sports-related content are intended to keep athletes engaged with the platform beyond just sports training.

E-commerce Strategy

The client also wanted to appeal to the entrepreneurial sports trainers who might seek e-commerce channels for an additional income stream. Offering a virtual storefront feature would help trainers grow their business while also encouraging athlete user personas to engage with their business in more ways outside of training.

UX OUTCOME

The platform can grow with the trainer's business goals.

Athletes can get access to products from small businesses or purchase sponsored apparel through licensed businesses.

Key Outcomes

Key Outcomes

Brand Consistency & Legitimacy

The brand deliverable provided a clear style guide for the business to apply a consistent visual identity across future collateral. The UI refresh also provided a more professional and legitimate appearance for the application.

Increased Confidence in Go-to-Market Strategy

Prior to this phase of design, the client could only describe some of the features that were a key parts of their go-to-market strategy. This high-fidelity prototype demonstrates the crucial aspects of the product strategy.

Increased Traction with Potential Investors

This UI and branding refresh provided the client with 3x more leads on potential seed funding than they were seeing prior to this redesign.

Increased Confidence in Go-to-Market Strategy

Prior to this phase of design, the client could only describe some of the features that were a key parts of their go-to-market strategy. This high-fidelity prototype demonstrates the crucial aspects of the product strategy.

Increased Traction with Potential Investors

This UI and branding refresh provided the client with 3x more leads on potential seed funding than they were seeing prior to this redesign.

Brand Consistency & Legitimacy

The brand deliverable provided a clear style guide for the business to apply a consistent visual identity across future collateral. The UI refresh also provided a more professional and legitimate appearance for the application.

Increased Confidence in Go-to-Market Strategy

Prior to this phase of design, the client could only describe some of the features that were a key parts of their go-to-market strategy. This high-fidelity prototype demonstrates the crucial aspects of the product strategy.

Increased Traction with Potential Investors

This UI and branding refresh provided the client with 3x more leads on potential seed funding than they were seeing prior to this redesign.

location

Washington, DC or remote

Contact details

bellajones.uxdesign@gmail.com

678-480-1766

location

Washington, DC or remote

Contact details

bellajones.uxdesign@gmail.com

678-480-1766

location

Washington, DC or remote

Contact details

bellajones.uxdesign@gmail.com

678-480-1766

Sports Training Mobile Application

UX/UI DesigneR