city2surf redesign
NOVEMBER 2024
An pre race experience designed to create a unified platform that enhances race experience for all participants.
IDEA9105 Interface Design
Project time: 7 weeks
Tools: Figma, Illustrator, Miro, Photoshop
My role: Designer through end to end process: discovery, user research, requirements, design for desktop interface, testing, support through final presentation.
The problem: The event currently lacks real-time tracking, leaving participants without immediate access to race progress or finishing times.
This limitation means participants often rely on external apps for preparation and tracking, which takes away from the experience the event wants to offer.
Collaborators: Susan Truong, Danny Huynh (The University of Sydney)
summary
Picture a community and platform tailored to empower remote workers, enhancing productivity wherever they roam. An innovative app designed to connect digital nomads with ideal accommodations and workspaces on their travels.
Create a more engaging, supportive, and user-friendly experience for City2Surf participants, ultimately boosting community interaction and improving race-day functionality.
research + analysis
The City2Surf event is a renowned 14-kilometer fun run in Sydney that attracts around 90,000 participants of all skill levels, from serious runners to casual walkers. It fosters a strong sense of community through live entertainment, food, and charity fundraising, embodying Sydney’s inclusive spirit.
Research summary:
Charity runs and marathons, like City2Surf, increased in popularity by uniting athletes, casual runners, and communities, turning running into a social gatherings. The digital era transformed run clubs with online forums and social media, fostering informal, flexible running groups (Jackson, 2023). Runners have to find external apps to “marathon train” for the day. How can we capitalise this for City2Surf? New runners found it difficult to integrate or were unaware of how to join these groups. The bottleneck at the finish line was frustrating, official logged time was not accurate. Athletes using external apps to track their race: Nike run club, Strava, Map my run, limited number of runners use the City2Surf app.
Heuristics Analysis
In addition to gathering quantitative results from our questionnaire, we analysed the existing website for further in-depth insights on their exisiting resources available to the public.
brainstorming
user insights
01- Affinity Mapping
In addition to gathering quantitative results from our questionnaire, we interviewed 7 avid traveler’s who provided further in-depth insights on their opinions on travel planning and experiences post-pandemic.
competitior analysis
02- Affinity Mapping
I have analysed 2 direct and 1 indirect competitors for the app, overall have similar dynamic profile orientated form with the allowance of signing in/up using facebook, google and existing emails.
view competitor onboarding process annotations
.png)
user interface
onboarding
login flow
app
booking form
usability
key findings
Real-Time Updates
Receiving real-time updates during the race, such as crowd density and race progression.
Growing Popularity
Increasing number of participants each year, there's a need for scalable solutions to manage the event's logistics and participant engagement.
Lack of Use of App
Despite having an official app, many participants still rely on external tools. This highlights a gap in the app’s functionality or user experience.
Bridging Communities
How might we design a platform that bridges the gap for City2Surf participants who struggle to find and join existing running cliques, despite the presence of an established community?
Training Preparation
There is a need for an integrated training resource within the existing app. This could help participants feel better prepared for race day.
key insights
No interactive training plans for participating users:
City2Surf provides detailed event information, there is no interactive features that allow for group training, community challenges, or collaborative participation.
No progress tracking:
Currently, the website is an informational hub with NO personalised user experience.
No option for participants to log in, create profiles, or track their race preparations, progress, or fundraising efforts. Only results are listed publicly.
No login or athlete profiles:
Currently, the website is an informational hub with NO personalised user experience.
No option for participants to log in, create profiles, or track their race preparations, progress, or fundraising efforts. Only results are listed publicly
No post race community or engagement:
Post race, there is not any space where participants can continue engaging with the City2Surf community.
Lacks features that facilitate user interaction or highlight a sense of community, such as forums, user stories, or live social feeds.
definition+ideation
Problem Statement
The event currently lacks real-time tracking, leaving participants without immediate access to race progress or finishing times.
This limitation means participants often rely on external apps for preparation and tracking, which takes away from the experience the event wants to offer.
Who are we solving for?
City2Surf encourages first-time runners like Amy to participate in community events while balancing personal commitments. It connects users to various activities, such as fun runs and training events, helping them build confidence and prepare for the marathon at their own pace.
Additionally, City2Surf offers individual and community-based training plans, allowing participants to stay engaged and track their progress and fostering a more connected and supportive experience for everyone involved.
ideation
03- Team Canvas
Storyboards help visualise ideas and provide clarity. Journey maps are used because they answer questions that storyboards can't provide, it focus on the sequence and order of events and the associated underlying human behaviours.
04- Online Ethnography
Our ethnographic study revealed three key issues: new runners struggle to join existing communities, the race layout causes bottlenecks, and many participants are unaware of or avoid the official app, preferring external tools like Strava.
05- Feature prioritization matrix
Feature prioritisation allows to help inform UX decisions, to discuss if solutions are feasible.
.png)
user journey
Kevin, a social runner, has registered for City2Surf 2024 for the first time and has approximately three months to prepare. Unsure about how to begin his training and event preparation, he looks for guidance from fellow runners in the community and searches for online resources to help him get started.
prototyping
Desktop Interface
User Goal: Use your bib number to create a personalized online identity on the City2Surf desktop app. Curate your training journey through an interactive onboarding questionnaire: select your training wave, answer tailored questions to refine your preferences, and preview a unique race experience customized to your goals.
Apple Watch Interface
User Goal: Users want to easily select their training wave, choose a session and track their progress in real time. After each workout, they aim to review a detailed overview to monitor performance and stay motivated
clickable prototype
Play with the City2Surf Desktop Website.
reflection & key learning
10- Next Steps
-
The next steps in this process are to build out the other features of the app, specifically the work portion. This will also need to be tested and iterated through guerilla testing
-
Option for users to give feedback through the app, to create a more welcoming community and making users feel apart of their personal recovery.
-
look at competitors when iterating for the sake of problem solving, so that I can see what unique ideas my brain can come up with without the influence of others in the first prototype. This will also need to be tested and iterated.
11-Takeaways
-
Conduct more/frequent forms of user testing and feedback to uncover more pain points and usability issues throughout design process.
-
Users often perform actions by mistake. They need a clearly marked exit strategy to leave the unwanted action without having to go through an extended process.
-
Fluid design throughout app and create a brand persona and identity