Neel Patel UX Portfolio

Projects

Contact

MOCKUP

Offseason is an app for youth athletes to improve at their sport while implementing healthier training and rest schedules

VIEW PROTOTYPE

THE PROBLEM SPACE

Train in only one sport for at least eight months within a calendar year

These athletes were 2-3 times more likely to get major hip or knee injuries

When playing a single sport full year round, athletes were 125% more likely to get severe overuse injuries

OF ATHLETES

36%

In sports, there has been a growing discussion about the damage athletes do to their bodies in their youth. As a fan of multiple sports leagues, I have watched many talented athletes be unable to reach their potential because they could not stay healthy. Youth athletes now have access to camps and leagues year round and are playing more often and learning advanced skills at a younger age. It led me to dive deeper into this problem space to see if we could help athletes preserve their bodies when they are younger so that they can be successful and stay healthy in the future.

43%

injuries per year in high school athletes

of bone stress injuries occur in adolescent athletes aged 15-19

organized sports camps/leagues exist outside of the U.S. school system

MILLION

20

2

MILLION

The information confirmed the existence of this problem space and the demographics of severe use injuries helped narrow the scope of my research. From this point, I recognized I wanted to focus primarily on adolescents since they were the age group most experiencing stress injuries

From the insights gained in secondary research, I was able to build a participant criteria for primary research. The ideal target audience for intervention would be adolescent student athletes playing only one primary sport. I chose to conduct interviews, with a few key focuses,  to get a sense of the mindset of student athletes and what points of intervention we could have to help them limit their injuries. 


Participant Criteria: Student Athletes aged 15-19 playing a single sport competitively

PREVENTION

SPECIALIZATION

FUTURE GOALS

Learn more about student athletes current measures towards preventing and treating injuries

Learn more about specialized athletes’ interest and relationship with other sports

Assess the goals of students for their athletic careers and their future beyond sports


Student Athletes have interest in developing skills in their primary sport

Student Athletes are interested in playing in other sports as well

Student Athletes recognize the impact a major injury could have on them

Student Athletes want to limit the amount of injuries they have

Student Athletes want to learn different ways to prevent injuries

Student Athletes are worried about their future long term health

Student Athletes play their sport outside of the time they play for school




HYPOTHESIS

I believe adolescent athletes are unintentionally harming their bodies because they do not know the proper interventions to reduce long term stress on their muscles and joints

At this point, I held a few assumptions om how our target audience views the problem space. Using these assumptions and the key research objectives, I developed a clear hypothesis. From there, I created an interview script to help guide me through the process of learning about our users and analyzing my hypothesis

REFINED HOW MIGHT WE

How might we help adolescent student athletes who specialize in one sport effectively manage their physical health in order to reduce the risk of severe overuse injuries without hindering progress in their sport?

“Design is thinking made visual.”

Saul Bass

Athletic

Performance

Rest Management

Preventative

Treatment

After conducting user interviews, the findings were organized into an affinity map where we found three Key Themes: Athletic Performance, Rest Management, Preventative Treatment

“Design is thinking made visual.”

Saul Bass

“Design is thinking made visual.”

Saul Bass

Through the interviews, it also became apparent that my last assumption was not true. At their age, not all our student athletes were not looking so far into the future that they were concerned about their health in adulthood. While they all shared concerns over injuries, it was primarily in the short term as it pertained to their current athletic careers. Overall, through the interviews it became clear that concerns over their Athletic Performance and progression of their careers was preventing students from taking the necessary precautionary measures to stay healthy. As such, I determined Athletic Performance would be the key theme to focus on.

From these findings, I also wanted to refine my how might we question as we needed to engage our user base by ensuring by helping them improve at their sport.

I chose Alternative Exercise as the core epic since it best addressed our problem space. We need to help users train but also push them away from working in a single sport year round. From the Core Epic, I formulated the primary task flow that would show the users journey through the application. Given that we want to focus on a new user’s journey, I incorporated an onboarding process as the secondary task flow.

To plan out how the application would look and be organized, I began by creating exploratory sketches for each of the major screens in the application. Using the UI inspiration board as a guide, I built potential layouts for each page.

On the Calendar Screen, I sought to optimize the navigation through dates and readability of information. While showing a full calendar allowed for best navigation, Ultimately, I used a combination of the first and third sketches. I used the scrollable calendar bar on top that left enough space for the practices/games to be displayed and read easily. I decided on using the vertical cards to create a consistency of horizontal scrolling with the calendar.

EXPLORATORY SKETCHES

After deliberating through my exploratory sketches, I made a solution sketch for each major screen. These sketches would be the guideline for making the digital prototype. When moving into mid-fidelity I added in preliminary UX Copy into the design. With my text, I wanted screens to have text that guided the user and made them feel like the app is working with them. 


Carousel In Progress

SOLUTION SKETCHES

Task Analysis 1

Task Analysis 2

Design Prioritization Matrix 1

Design Prioritization Matrix 2

Persona: You are a young high school basketball player. You learn about the offseason app and want to find ways to improve at your sport without putting your body at risk


You want to learn new sports that will help you improve at basketball

You want to be able to manage your practice schedule and not overwork yourself

You want your parents and coaches to have access to your logs so that they can help you and intervene when needed


Goal: Sign up for the application, learn a new training method, and edit your practice schedule


Task 1: Sign Up for Offseason App and link your account 

Task 2: Find the page to learn ways to train to practice

Task 3: Learn more about a sport that will help you improve your agility in basketball

Task 4: Find a Gym to train your new sport at

Task 5: Add training to your schedule


OFFSEASON

To gain a full scope on the problem space, I looked through medical research to understand underlying causes for severe injuries in youth sports. Student Athletes playing in only one sport were at greater risk for injuries due to repeated trauma to muscles/bones that are still growing.

RESEARCH OBJECTIVES

Interview FINDINGS

Home > Projects > Offseason

LIST OF ASSUMPTIONS

User Persona

Task selection

With a deeper insight into our user base, I developed a user persona to reflect the behaviors, motivations, and pain points they experience. Along with the persona, I mapped their current experience journey when navigating through injuries.

In order to begin the process of ideating solutions, I first wrote out a set of User Stories that represent the functionality of an application that would address my final How Might We? Question. Within those user stories, I was able to organize them into 5 main epics: Alternative Exercise, Rest Alerts, Tracking Practice, and Social Functions.

UI DEVELOPMENT

Before I could start developing my UI, I made an inspiration board to help focus my ideas and keep a structured course of action. The highlighted elements from the inspiration board are ideas that helped structure the elements in the final design. Given the large amount of features needed for users to achieve their goals, organization was a priority.

USER TESTING

After each round of user testing, I completed a task analysis for each process, highlighting users struggles through the process and any additional information shared. Each of the pain points and suggestions were ranked and organized into a design prioritization matrix. Primarily, users saw issues with navigation and sizing. I needed to make changes so that attention is drawn to the right elements and users are able to intuitively move from screen to screen.

To get a sense of where we stood at this point in the process, I completed two rounds of user testing. I wanted to test the user's understanding of each screen, how they take in information, and whether they were able to complete the desired tasks. To begin, I created a scenario and set of tasks for our users to complete as a guide to coordinate the user test.

In these screens, we can see how user testing helped me iterate through different designs to reach the final mid-fidelity screens. Initially, in the Sign Up Screen, users had difficulty understanding what to press. The three buttons for athlete, coach, and parent would confuse new users who had the intention of signing up. At this moment, I also recognized there wouldn’t be a need for an existing user to specify their role. I moved this role selection to be the first screen of the onboarding process instead.

In the initial prototype, Users also struggled to navigate through the onboarding screens. At first, they could not see the skip button and did not recognize they needed to scroll. However, in the second iteration, users felt more inclined to press the skip button since it was directly by their thumb. This journey reflected the importance of considering users natural physical actions when organizing the page. In the final design, we added next buttons, clear scroll indicators, and placed the skip button on the bottom left side.

For our primary task flow, users enjoyed the layouts and were able to navigate through the tasks. However, there were some small changes made to optimize their experience and make sure the correct information was highlighted.

VIsual Identity

Once the Mid-Fidelity Prototype was complete, I began to build my visual identity and brand elements for Offseason. To begin the process of brand ideation, I wrote down a list of potential names that could be used for my application. I wanted to make sure the name had a clear message that it is for sports and not general fitness. Offseason was ideal since that is the time when athletes most need to experiment with alternate training and find time to rest their bodies. 

In User Interviews revealed that adolescents’ primary focus was still just to improve at their sport. We wanted to give them the feeling that they are in a video game and emulate the feeling of being in professional sport games, which are very popular in high school students. The overall tone of the moodboard is meant to complement the goal of the users in using the application rather than trying to match the aesthetics of multiple sports they may play.

In this initial version, I felt the colors did not pop out enough and it did not hold the level of focus and energy needed from this application.



FUTURISTIC      ENERGIZING      FOCUSED

            DYNAMIC                   CONFIDENT 


IIn the revised moodboard, I found pictures that displayed focus and concentration and emulated physical qualities such as speed. With the combination of allusions to physical skills, futuristic designs, and a strong color theme, I was able to capture the feeling of my five keywords and begin to establish an identity for my brand.



FUTURISTIC      ENERGIZING      FOCUSED

            DYNAMIC                   CONFIDENT 


After finalizing my moodboard, I extracted the colors from the moodboard. However, there were varying levels of saturation and tonality that I sought to even out. Given the emphasis on neon colors and the “Energizing” key word.

NAMING

Moodboard

Colors

TYpography

Wordmark

Final Brand Identity

With the typography for the application, I wanted to consider the functionality and ease of reading.

For Header Texts and portions of the application without many colors and graphics, I used Roboto Slab. Slabs are often used in collegiate logos so I wanted to have some type of feel that users are progressing to the next era of their athletic careers.

The application has many organisms throughout it and we wanted a very simple, geometric font that doesn’t cause interference. Yantramanav was used for the majority of body text. I increased letter spacing to ensure it was not too crunched.

As I continued to work on the brand development, I sketched out some potential wordmarks to gather my ideas. When I began to digitize my chosen wordmark, I worked through any ideas that came to my mind and iterated as needed. Initially I chose a futuristic font, but noticed that its lack of “blockiness” prevented  it from having a collegiate or athletic feel. I found a suitable font and made adjustments to certain letters to make it more cohesive. I extended the sizing of the “O” so that I could use a sport icon in place of the second O as a way to engage the user in the purpose.

Offseason

Offszn

Game Ready

EDGE

Sportify

Bionic

Health Up

Wireframe Development

Final Prototype




My initial attempts and color injection were overwhelming at first, and I noticed that certain combinations were difficult to make it work. The orange in association with the green felt like it created a more natural feeling and when paired with the dark neural, it felt overly industrial. I took mental note to avoid using the orange or pink in large color blocks. Moving forward, I wanted to use my brighter blue as the “glue” color and recognized it must be a major focus of the brand. Blue is a complementary color to orange, similar with green, and often associated with pink.

To make my initial wireframes, I keyed on a futuristic theme and used a dark mode background to accommodate for the bright colors and futuristic aesthetic. This also helped drive the “Focused” theme from our moodboard. In the initial version, some screens lacked energy and felt somewhat dark and dreary. Compared to the middle screen, the other two did not have the jolts of energy or as strong of a futuristic feel. For a sport training application, it is vital that users feel engaged at all times.

In the intermediate wireframes, I was able to capture more energy in the wireframes. I Utilized gradients as a way to emulate the blend of color that was present in the moodboards. I used a brighter version of the orange, and looked for places to place the pink. However, the pure neon feel of the moodboard still was not captured. Some screens were still missing the “blue glue” needed to make each screen work.


Pink was a better complement to both blue and green that ended up being the brand colors. I used it as the primary accent and the orange as a secondary accent in screens that welcomed many colors. I used the hologram style structures from my new inspiration to help create a cohesive component that users could expect to see on every screen, so that they dont feel uncomfortable with the transitions from screen to screen. The background color was made to be a dark, extremely saturated blue so that these transparent parents could serve as the glue to other colors.


In a real-life setting, Offseason will be able to help young athletes change the way they train. Teenage athletes will be able to take a more proactive role in managing their health and be able to work towards their goals as athletes all through one application.

It can especially make an impact on students in situations where they feel sports is their best method for success or to receive an education. These students may want to constantly work at their sport, but we can introduce healthier alternatives to playing year round.

In a successful situation, Offseason can be used by adults and younger athletes with the supervision of their parents as well. Anyone looking to find new ways to improve at their sport or manage their rest can find a benefit from Offseason.



VIEW PROTOTYPE

DESIGN IMPACT