UX/UI Case Study №3: Classlete
As a former high school athlete, I would play soccer competitively and also recreationally. I would play soccer whether it was raining, shining or snowing. However, being a high school athlete who’s looking to play at the varsity level in college is a whole other ball game. For this path student athletes need to gain exposure by showcasing their achievements in academia and in sports.
Classlete is an online platform which allows high school athletes to create their own online sports card. The sports card displays a students’ athletics, academics and extra-curricular activities. The platform allows students to share their sports card to gain exposure and connect with other fellow athletes to up their game.
The client wanted to create a mobile user experience and user interface for the landing page, athlete user-profile page and students discounts page.
Design Process
The design thinking process was followed to ensure that design decisions were supported by research and feedback — with an iterative process during the testing phase.
Research and Planning
Research was conducted to thoroughly understand the target audience. I conducted six interviews in which I aimed to get a sense of the students typical week, their commitments, goals, frustrations, and any tools they use.
After getting a general sense of the audience through conducting one-on-one interviews, I created surveys on www.jotform.com to confirm the findings from the interviews.
Research Goals
- Understand the lifestyle and a typical week of high school athletes
- Understand their experiences with balancing school and athletic activities
- Understand their goals and frustrations in their physical activities and academics
- Understand resources they currently use or would find helpful in managing their multiple activities
- Tools used frequently by student athletes and why
- Thoughts on having their own sharable digital sports card
Research Methods
Primary User Persona
After consolidating findings from both interviews and surveys, I created a persona for the target audience. The target audience was determined to be a competitive male student athlete.
His goals are to increase athletic performance, make new friends, and be recruited by his top choice of college sports team.
His frustrations include not finding personalized advice when he needs it, he feels alone and isolated because his friends don’t share the same love of sports, he also finds it hard to gain exposure.
Competitive-Comparative Analysis
After understanding the target audience I wanted to understand existing platforms which target student athletes and compare them to Classlete. I conducted a competitive-comparative analysis and made comparisons on the target audience, purpose, services provided and if there was a digital sports card component.
Based on the C-C Analysis, I found that Sportlio is one of Classlete’s main competitors as they showcase athletes and create a community where athletes can interact with one another. I also found that none of the platforms provide a sharable digital sports card for student athletes, their target audience is also not specific to high school athletes.
Pain Points
Below are pain points identified during the research phase.
There is not enough personalized advice for High School Athletes. For example, they are looking for specific advice on how to deal with injuries and improve their athletic performance.
They get demotivated when their community of friends do not share the same love for sports as they do. It’s important for them to be surrounded by like-minded individuals to maintain motivation.
Another pain point is being able to gain exposure with college varsity sports team. The current method involves contacting recruiters via email on their own.
Proposed Solution
Create an online platform for high-school athletes to connect with other athletes and be part of a supportive community where they can acquire targeted advice for their needs.
Students will be able to…
- Sign up and create a user profile
- Share their user profile in the form of a digital sports card
- Be part of various sport community teams
- Have access to special student discounts and offers
Visual Design
Mood Words and Colour Choices
Below are some of the words chosen to embody the feelings of the app, as well as, some colours which are meant to convey certain feelings.
Logo Redesign
The old logo (left) is compared to the newly designed logo (right). The old logo was found to be very old school and bulky. The new logo is more modern and shaped to resemble a basketball.
Usability Testing
Versions of the prototype were tested on InVision. Users were given specific tasks to complete as they went through each prototype. Additionally, throughout the duration of the project, individual screens were constantly subject to screen reviews.
Usability Test Instructions:
As a high school athlete, you‘re looking for advice and what people are talking about in your sports community. You also check out your user profile to see what your statistics and any new activity.
Usability Test Findings
Issue №1: Users found information on their user profile to be clunky and disorganized. There was too much on one screen to take in.
Solution №1: Have the information categorized into three separate tabs: their overview, statistics and activity. This allows better organization of information and users can ideally just swipe between the three tabs.
Issue №2: Users found that they could not identify a way to leave a comment for a post that they are interested in.
Solution №2: Have a “Leave a comment” call to action link at the bottom of the post. This way users are able to identify a way to leave a comment if they so desire.
Design Solution
After testing the prototype, making necessary changes, the link to high fidelity version of the prototype is here.
Conclusion
Conducting interviews and surveys as part of primary research helped understand the lifestyles of high school athletes. A persona was created to consolidate key traits, their goals and frustrations.
Pain points were identified based primary research. Proposed solutions were to create an online platform for high-school athletes to connect with other athletes and be part of a community.
Lastly, Sketch was used to design mid-fidelity and high-fidelity wireframes. A prototype for the app was also created using InVision.
