Scroll to:
OverviewResearchPersonaAnalysisHypothesisUsability TestSolutionAppendix
Scroll to:
OverviewResearchPersonaAnalysisHypothesisUsability TestSolutionAppendix
HomeAboutResume
HomeAboutResume
HomeAboutResume
HomeAboutResume

PROJECT
BRIEF

Project Type

Academic / Case Study
Mobile Application

Timeline

2 Weeks, July 2021

Contributors

Khin Thapyay
Chew Mei Xuan
Grace Sin
Law Wai Hong

My Contribution

User Research
Visual Design System
User Interface Design
Interaction Design
Prototyping
Google Slide Design

Design Process

Design Methodology

Our team uses the Double-Diamond design process for this case study.

Timeline

Time given to accomplish the project was 2 weeks.

User Research - Qualitative

Our team was assigned to determine the potential shortcomings of the Singapore Athletics Association's website's user experience. There were 2 rounds of interview conducted.

Round 1 (Discovery)

For the first round of interview, there were 12 volunteers recruited. The 12 interviewees consists of:

Round 2 (Define)

For this 2-weeks sprint, we narrow down to athletes for immediate action. There are 8 extra athletes volunteered:
6 Athletes
5 Coaches
1 Committee Member
6 in athletic events
2 from other sports

User Interview Round 1

Through the first round of interview, we gathered the following recurrences and trend:

Website Usage

Most of them find it difficult to access useful information due to the cluttered interface. Only seasoned users feels otherwise.

They also use it as a registration portal to participate in competition but find the need to refill participant's detail for every new competition to be unnecessarily repetitive.

Athletes uses the website to search for competitors score to see where they stand but finds them inconsistent across various pages.

Some coaches hope it can also be used as a portal for up-skilling

Scheduling

Both athletes and coaches use their own methods for scheduling potential competitions.

Athletes have to manually keep track of their records despite being constantly busy

Coaches find it time consuming to manually keep track of athletes record, which can be better spent on creating and executing training plans.

User Interview Round 2

After validating the problem through discovery phase, we defined athletes to be our main persona based on the insights collected as an immediate action for our first phase. Of all the athletic events, we targeted athletes in events with objectively measurable metrics such as time and distance for actionable pain points. This is the stage where we define our User Persona.

Source of Motivation

Athletes set short and long term goals to keep themselves constantly motivated. They also keep track of their competitor scores as a source of motivation.

Competition Details Accessibility

Athletes need to be able to get competition details and know the qualifying criteria to track results effectively.

Communication with Coaches

Athletes communicate closely with their coach on goals and training after identifying potential competitions which they can participate in.

"I constantly find myself keeping track of upcoming events, my competitors' score online, and my personal performance by taking mental notes."

User Persona

Jacob Lee

National Athlete, Hurdler
As a national athlete who constantly aim to outdo himself, Jacob typically take mental notes on qualifying criteria for upcoming events as a goal he can work on. He finds motivation through charting his performance to set benchmark and at times searches his competitors' latest records online. However, he finds the current athletic website to be overloaded with information which are not relevant to him, despite needing to be constantly on the move.

Analysis

Current Solutions

Jacob mentally notes his own personal and competitors' scores, which can be taxing on memory and at times unreliable after tracking multiple scores for benchmarking.

Jacob also uses Singapore Athletics (SA) website to search information on upcoming events, qualifying criteria, and competitors score. The current site caters to coaches, athletes, and officials with different needs, causing poor information architecture where user find accessing relevant information challenging.
Analysis based on Jakob Norman's Usability Heuristics for Interface Design

Accessing Competition Details

Search for events' information through Singapore Athletics Website
Singapore Athletics Website
-Cluttered interface
-Unintuitive navigation
-Inconsistent information
-Non-responsive interface

Comms with Coaches

Share event to coaches to express interest.
-Instant messaging app
-Phone calls
-

Source of Motivation

-Set short and long term goals for motivation.

-Keep track of their competitor scores.
-Jot down notes
-Memorising scores
-Loose papers/notes lack organization
-Unreliable memory.

Shortlisting of Events

Uses personal Calendar to add shortlisted events.
-Google Calendar
-Phone Calendar
-Manual event entry

Actions

Touch Points

Pain Points

Current User Journey

Current User Journey

The current user journey which Jacob uses to achieve various goals were mapped out to identify and define potential areas for improvement.

We believe that by streamlining the shortlist of potential competitions through an overview of upcoming competition, we can help Jacob plan his trainings efficiently and therefore, be constantly motivated.

Solution Statement

Proposed User Journey

The proposed user journey shows how Jacob can achieve his goals through a streamlined process using an app which resolves all his pain points.

Accessing Competition Details

Search for events' information.
MyAthletics SG App
-Cluttered interface
-Unintuitive navigation
-Inconsistent information
-Non-responsive interface
*Resolved*

Comms with Coaches

Share event to coaches to express interest.
Directed from MyAthletics SG App:
-Instant messaging app
-Phone calls
-

Source of Motivation

-Set short and long term goals for motivation.

-Keep track of their competitor scores.
MyAthletics SG App
-Loose papers/notes lack organization
-Unreliable memory.
*Resolved*

Shortlisting of Events

Uses personal Calendar to add shortlisted events.
-MyAthletics SG App (can sync with personal calendar)
-Manual event entry
*Resolved

Proposed User Journey

Actions

Touch Points

Pain Points

Why Mobile Application?

Personalization

Tailored experience specifically for athletes as opposed to multiple users

Curated Notifications

Updates are sent exclusively to users as opposed being lost through emails.

Mobile Features

Access an array of mobile exclusive sensors, external app integration, and portability.

Localized Storage

Allow offline access to personal goals, saved events, and schedules.

Featuring

01

Overview of Upcoming
Competitions

02

Shortlist Potential
Competition

03

Setting Goals Based on
Qualifying Criteria

Usability Test Results

5 Participants

were recruited for Usability Testing on Mid-Fi Prototype

Task 1

Setting personal goals based specific event.
‍

5/5 Users

Managed to complete the first task within 3 minutes.

5/5 Users

Find checking competitors' score useful

5/5 Users

Prefer to use qualification criteria and their personal records for setting goals.

5/5 Users

Found event finding feature useful

5/5 Users

Finds the competition details were very comprehensive and well organized in the accordion format.

Task 2

Add shortlisted event to schedule

3/5 Users

Managed to complete the first task within 5 minutes.

2/5 Users

Prefer using search feature as opposed to filters

2/5 Users

Found personal event calendar useful and also want to sync with their phone calendars.

3/5 Users

Were confused whether the calendar is for personal scheduling or a generic calendar.

01

Users expected Upcoming Events to be linked to the Events Page. Announcements are now merged with image slider

02

Users were confused between personal schedule page against the events page

03

Users find rankings important because there were only limited spots to go for overseas placements

04

Users would not filter by countries as it would give limited results. They would search by regions instead.

05

Users need to know the number of competitions which they can compete in to work towards qualification

06

Users also prefer to set benchmark against qualifying criteria instead of competitor's score.

07

User finds it hard to focus when all three number are equally prominent

01

Users expected Upcoming Events to be linked to the Events Page. Announcements are now merged with image slider

02

Users were confused between personal schedule page against the events page

03

Users find rankings important because there were only limited spots to go for overseas placements

04

Users would not filter by countries as it would give limited results. They would search by regions instead.

05

Users need to know the number of competitions which they can compete in to work towards qualification

06

Users also prefer to set benchmark against qualifying criteria instead of competitor's score.

07

User finds it hard to focus when all three number are equally prominent

Usability Test Changes

After

Before

Clickable Prototype

Tools used: Figma

Task 1:

Set personal goals based on 110m Hurdling Event from SEA Games 2022 qualifying score.
‍

Task 2:

Add upcoming SEA Games 2022 for 110m Hurdling Event to schedule
Prototype not displaying well?
Try it on your browser!

Next steps

4-Phased Approach

Our future steps include permeating to various levels of the athletics scene with foundational starting from individuals in a form of personalised app, and eventually catering to a community through a more responsive website.

Mobile Application

Target audience: Athletes and coaches for Phase 1 and 2

Phase 1

Targeted towards athletes for personalised training experiences.

Phase 2

Targeted towards coaches for athlete management and up-skilling

Responsive Website

Target audience: General public, associations, and institution for Phase 3 and 4

Phase 3

Targeted towards associations & institutions for efficient registration and communication process

Phase 4

Targeted towards the general public to provide more exposure to athletics community.

Appendix

Timeline

Timeline

Time given to accomplish the project was 2 weeks.

User Flow

User Flow 1

The first user flow was created based on user response which states the need to plan their schedule according to their upcoming competition and to look out for potential competition which they might qualify to participate in.

User Flow 2

Second user flow focuses on users' need to track their own and their competitors' progress in order to evaluate their performance as a source of their constant motivation.

Design System

Typefaces
Buttons
Navigation Bars
Misc
Pop up
Listview
Thumbnail
Components

Second Attempt

This was my second attempt in developing a design system after my solo project in Art Friend website redesign.

This time, there are more components developed tailored to specific functions as labeled in the figures. There are some reference to iOS design library in terms of how the navigations and statuses are being implemented.

As the colour palette were not clearly defined and implemented in the existing Singapore Athletic's website, we extracted the colours from the logo and expanded to different shades for secondary purposes.

Our Team

Team Flashpoint

I really enjoyed going through the process of the project for our case study. Each of us contributed in different sections of the process and I couldn't have done so without these awesome team members

Want more?

Website Redesign
Artfriend Website Redesign
Let's Connect!
Website & design © 2021 by Wai Hong
Let's Connect!
Website & design © 2021 by Wai Hong