AthleteX is a peer-to-peer platform for discovering in-person sports activities anytime, anywhere. Users can explore, share, and invite friends to join them in creating unforgettable memories through the joy of sports. What sets AthleteX apart is the ability for users to effortlessly create and share their own sports activities with others.

Duration

8 Weeks

My Role

Team

Tools

Visual Design, Interaction Design, User Testing, Prototyping

Group of 3

Figma, Google Form, Photoshop, Optimal workshop

Business Goals

• Establish a user-friendly website to enable easy discovery and access to various sports activities from any location.

• Empower users to create their own sports activities effortlessly.

• Encourage user engagement by providing convenient navigation, and motivating both sharing and attendance of activities.

Key Contribution

UX|UI Designer

Target Users

Individuals seeking diverse sports activities to join

People interested in broadening their social circles through sports-related interactions

Athletes looking to create and share their activities with others

We concentrated on designing the website for the first two target groups

Discover

To understand the users' pain points and develop effective solutions, we employed a comprehensive research approach that consisted of the following methods:

1. Competitive Analysis

2. Online Survey

3. Interview

In the initial phase, we started by identifying sports websites with similar objectives to gain a clearer understanding of the essential features of our design. We conducted a thorough analysis of these platforms to grasp their overall structure and functionalities, providing valuable insights for our own design process.

Additionally, we expanded our scope to include platform like Meetup, recognizing that its designs could also inform the development of our website. By examining these diverse platforms, we ensured that our design encompasses all the necessary elements to deliver a seamless and engaging user experience.

Competitive Analysis

The key aspects that influenced our design are outlined below:

Survey

To deepen our understanding of user preferences, we conducted a brief survey and collected insights from 54 respondents. Below are some key insights:

Based on our survey, we determined that users expressed a desire to be informed about the age and gender of other attendees in activities. Consequently, we integrated small pie charts within the activity descriptions to provide users with a quick summary of the average age and gender contribution for each activity.

We aimed to address the top demands and preferences of users by implementing key features on the website, including:

- Simplified activity search functionality.

- Integration allowing users to add events to their calendar after attending.

- Capability for users to browse others' profiles and activity history.

- Ability for users to create and share activities with friends.

Interview

The interviews with 8 people from our survey participants, provided valuable insights emphasizing the importance of providing detailed activities information and developing trust among participants. Specifically, users prioritize access to details such as organizers’ activity history and locations to make informed decisions and feel confident about attending an activity.

Some quotes mentioned by people in interviews:

"the photo posted by the host was the reason for my trust"

"age gap matters to me"

"I’d like to know about the previous organizer’s activities"

"knowing the level of activities’ difficulty is very important to me"

"a detailed description of the activity is really important"

"some sports events are too crowded because they don’t indicate the number of attendees"

Affinity Diagram

After creating the affinity diagram, we identified the most important factors in the user's view as follows:

• Trust

• Detail of activity

• Suggestion

• Age of participant

• Location

KEY TAKEAWAY

• Trust through Information: Users prioritize having comprehensive details about both organizers and activity specifics to feel confident in joining an activity.

• Desire for Social Engagement: Users express interest in having a social network feature integrated into the platform, which would encourage greater engagement among participants.

• Simplified Activity Search: Users emphasize the importance of a simplified and comprehensive search function, especially considering the dynamic nature of events being created and deleted by organizers.

Define

Persona

A persona was created based on the survey and interviews. Meet Julia, a 35-year-old single woman living in Ottawa with her dog. She enjoys sports activities and prefers to participate in them within a group to expand her social network.

To ensure our information architecture meets user expectations, we conducted six open card sorting sessions using the Optimal Workshop platform. After the initial exercise, we developed our first version and iteratively refined it based on user testing and competitive analysis.

Site Map

In designing the user flow, our aim was to find a hiking activity and then invite a friend.

User Flow

Sketches & Wire Framing

Low-Fidelity

We initially mapped out our ideation using hand-sketched low-fidelity wireframes, aiding communication within the team during the early design stages. Later, we transitioned to creating low-fidelity wireframes on Figma to visualize page layouts and design direction. These wireframes underwent several iterations before final content development.

Develop

Mood Board

We were inspired by how group sports activities bring people together, fostering joy and new friendships. We aimed to infuse these positive vibes into our design to motivate users and make them feel more courageous about joining in.

UI Kit

We developed a complete UI kit to serve as a reference for templates and components. This kit ensures that interface development is smooth, consistent, and efficient throughout the project.

Challenge #1:

Design Challenges and Solutions

Solutions:

Enhance user trust to encourage greater participation in activities.

• Mention attendee numbers for upcoming activities.

• Enable users to easily view profiles, including activity history.

Developing a fast and effective activity search method.

We found that "Activity, Location, and Time" are the most useful search criteria for activities. Additionally, users can easily select activities by typing or choosing from diverse categories and regions.

Since activity are frequently created and removed, there's no need to list them all. Users can easily search for specific activities using the main search bar.

Developing User engagements.

Enable users to personalize their profiles by choosing background images, saving favorite activities, and following friends.

Demonstrating the age and gender of participants.

We added pie charts showing the typical ages and genders of participants to the activities page description.

Challenge #2:

Solution:

Challenge #3:

The extensive list of activities makes it difficult to cover them all thoroughly.

Solution:

Challenge #4:

Solution:

Challenge #5:

Solution:

Delivered Pages

Deliver

Landing Home Page

Home Page

Search Result

Map

Friends' Upcoming Activities

Upcoming Activity Description

Profile Page

Profile / Upcoming Activities

Profile / Upcoming Activities

Here is the last prototype, displaying what we've achieved through our design process.

Prototype

Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.

Usability Test and Iterations

Home Page

Users initially struggled to understand how to create activities on AthleteX, despite its significance as one of the main services. Therefore, we added two CTAs to make accessing the core service effortless.

The slideshow photos didn't effectively showcase AthleteX's global functionality to users, so we replaced them with an illustration that vividly communicates its worldwide accessibility.

Following usability testing, we acknowledged that the information below the hero image wasn't effectively grabbing users' attention. Consequently, we revamped our homepage. Now, upon logging in or selecting the main services, users will see upcoming activities tailored to their location.

During usability testing, we discovered that Users had difficulty navigating through various upcoming activity information. So, we shrunk photo sizes on cards and added a map for better location understanding.

Hosted Activities

Since the activity hadn't occurred, users were confused by the "like and comment" option. We removed it from the cart and focused on showing the number of attendees and available spots instead.

Share" and "Save" have been updated to buttons for improved clarity and ease of use.

In usability testing, we found users wanted more than just photos in the upcoming activities card. So, we revamped the card design, adding a map, activity date, location, attendee count, and other details to better meet their needs.

Upcoming Activities

, Also included a button for users to add activities they've already joined to their calendar. Additionally, users can easily edit their RSVP and share the activity.

We observed that users struggled with reading long text to find activity information. To help them understand quickly, we transformed the activity description into bullet points, enabling users to grasp details within seconds.

Activity Description

Users were unsure about what "Top-searched activities" meant and why there were numbers next to them. Plus, without a typing indicator, they didn't realize they could search by typing. So, we redesigned the filters. Now, alongside general filters, users can easily search for activities by typing activities name, with the help of a typing indicator.

Search Criteria

During testing with 13 users, the majority expressed a preference for Frame B. This version features smaller event photos, resulting in a smaller card size and allowing for more cards to be displayed in one scroll. Additionally, it includes a larger map and more prominent share and save buttons.

A-B Testing

What I have learned?

Reflection

What can we do next?

• You'll learn to identify design challenges and develop creative solutions to address them while balancing user needs and business goals constraints.

• Collaborating within the team ensured timely delivery and meeting deadlines.

• Testing and iteration improved user-friendliness.

• Developing a UI kit ensured consistency and eased communication.

• The next steps involve finalizing the mobile version of the design to ensure adaptability.

• Following this, we'll enhance the user experience by conducting additional usability testing and iterations to refine the user flow further.

See more of my works:

NeighbourTools-Borrowing Case Study

Reader City

Let's connect :)

NeighbourTools-Lending Task

UX | UI Designer

UX | UI Designer

UX | UI Designer

LinkedIn

Resume

|