AthleteX

AthleteX is a peer-to-peer platform for discovering in-person sports activities anytime, anywhere. Explore, share, and invite friends to join them in creating unforgettable memories through the joy of sports.

What sets AthleteX apart?

The ability for users to create and share their own sports activities with others effortlessly.

Project overview

Timeline

3 UX Designers

UX/UI Designer

Figma, Google Form, Photoshop, Open AI & Optimal Workshop

Business goals

• Empower users to create their own sports activities effortlessly.

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

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.

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

8 weeks

Team

My Role

Tools

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

My Contributions to the Project

• UX Research

Conducted interviews, surveys, and a competitive analysis to gather key insights.

• Information architecture

Developed a research-based site map to structure and guide website flow.

• Low-fidelity and High-fidelity prototypes

Created and iterated low- and high-fidelity prototypes using hand sketches and Figma, and developed a mood board and UI kit to ensure design consistency.

• Usability testing

Led usability tests with potential users, including A/B testing.

Design Thinking

Our team followed a Double Diamond approach based on the Design Thinking methodology. It was not a linear path; we bounced between stages as the project progressed.

Discover

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

• Competitive and Comparative Analysis

• Online Survey

• Interview

Competitive and comparative analysis

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

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

Survey

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

As indicated above, 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 Key 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

With creating the affinity diagram, we identified the most important factors to consider:

• Trust

• Detail of activity

• Suggestion

• Age of participant

• Location

Research key takeaways

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

• 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.

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

Below are the key aspects that influenced our design:

Define

Persona

The information we gathered from surveys and interviews helped shape a persona. The main goal was to show common patterns and problems, which in turn allowed us to better understand and relate to our users.

Site map

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

Develop

Sketches and wireframes

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

Mid-Fidelity wireframes

Home page

Profile page

Search result

Upcoming activity description

Enhance user trust to encourage greater participation in activities.

Enable users to 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.

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

Since activities 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 engagement for users.

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

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

Demonstrating the age and gender of participants.

Mention attendee numbers for upcoming activities.

Challenges

Solutions

Designing customized solutions to address users' needs

Mood board

Our team was inspired by how group sports activities bring people together, fostering joy and new friendships, so I aimed to infuse these positive vibes into the design to motivate users and make them feel more courageous about joining in.

UI kit

I also 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.

Deliver

Conducting tests and iterations to enhance user experience

Throughout the project, I 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.

Users experienced some difficulty in easily understanding AthleteX's offering of 'activity creation', despite its significance as the other main service.

With these two CTAs, users can effortlessly access AthleteX's two primary services.

This illustration visually communicates the worldwide accessibility of AthleteX.

Usability testing revealed that the information below the hero image fails to capture users' attention effectively.

After logging in or selecting the main services, users will immediately see the upcoming activities based on their location.

The slideshow photos fail to convey AthleteX's global functionality effectively to users.

Users do not require large photos of activities before accessing the carts and reviewing full descriptions.

Users can quickly grasp the location by viewing it on the map, with photos being the next priority. Other features such as time, availability, sharing, and saving are also included.

Since the activity had not yet occurred, users were confused by the "like and comment" option.

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

The logged-in user requires more useful options for managing her upcoming activities, beyond mostly seeing photos.

Users need a quick way to add activities they have already joined to their calendars.

After joining, users can easily edit RSVPs, share activity, view activity levels and attendees, and see the location on the map using CTAs.

Users found the description difficult to read and hesitated to read it thoroughly.

Converting the activity description to bullet points enables users to grasp the details of the activity within seconds.

Additionally, two pie charts display the average age and gender distribution of the attendees.

Users were uncertain about the purpose of "Top-searched activities" and the significance of the numbers accompanying each activity in the list. Additionally, the absence of a typing indicator made it unclear that they could search for activities by typing.

In addition to general filters, users can easily search for activities by typing their names, facilitated by a typing indicator.

A/B testing

During testing with 13 users, the majority expressed a preference for Frame B. This version showcases smaller event photos, a larger map, and a more prominent share and save CTA.

Current page design after multiple iterations

Landing Home Page

Home Page, after log in

Search Result

Profile Page

Upcoming activity description

Friends' upcoming activities

Map, after log in

A gif mock-up to visualize the design

Here is the last prototype version, displaying what I've achieved through the design process.

Reflections

What have I learned during this journey?

• The crucial role of research in enhancing product effectiveness.

• 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.

What can I do next?

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

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

See more of my works

NeighborTools

Research and Design of a tool rental website