Streamlining Maxine’s City2Surf Photo Experience

Year 2024

Duration 13 weeks

Project type Group project, University of Sydney, Desktop app

Tools Balsamiq, Figjam, Figma

View Prototype

Project Overview As part of my Interface Design course, this project challenged us to enhance an experience tied to one of Sydney’s iconic public events. My group chose City2Surf, focusing on boosting community engagement. As a result, we designed a multi-platform experience—mobile, watch, and desktop—with features to help our user persona plan her race, find friends during the event, and easily share post-race photos. I was responsible for the desktop experience.

My Role The research and ideation process was collaborative—our team conducted online ethnography, developed user personas, and used the Jobs-to-Be-Done framework to create a journey map. Each member then took ownership of a specific device and user flow. I focused on the desktop experience, specifically the post-race flow, where I designed the user’s journey of purchasing event photos. To refine the desktop design, I applied Heuristic Evaluation and conducted usability testing.

DISCOVERY

City2Surf: A Community in Motion

City2Surf has been around for over 50 years, and has had more than 85,000 participants run it from all across the globe. It is not only about fitness and fun, but also about raising funds for a good cause, and being a part of the larger community. It is through participatory sporting events like this, that people generate substantial social value and positive social outcomes in the local community, not only among participants, but also spectators and volunteers (Zhou & Kaplanidou, 2018).

Our initial focus was on familes

After all, for communities to flourish, families must feel safe, secure, accepted and included (Booth & Cameron, 2020). This includes both parents as well as children who will benefit from not only understanding more about their culture but foster their sense of belonging.

We conducted an online ethnography, exploring Reddit and Facebook to understand parents' perspectives, while using Instagram and TikTok to gain insights into the views of younger kids and teenagers.

This led us to identify 3 main groups of users:

👨‍👩‍👧

Parents of Young Kids

Parents of young kids go to great lengths to ensure their children feel included, making extensive preparations to make sure the whole family can enjoy the event together

🧒🏻

Young Kids

Kids (age 6-12) who run the City2Surf tend to be highly motivated and inspired to take up running from their parents’ own active lifestyles

👩🏻

Teens

Older kids (teens) have started running with friends rather than family members, and are more greatly influenced by social media

While the findings about parents and young kids weren’t surprising, the clear shift we saw with teens was really interesting. From there, we moved on to the next step.

DEFINING THE PROBLEM

Answering the question of 'who' and 'what'

Now that we've gainined a better understanding of the City2Surf community space, we moved on to define whose problem we wanted to solve and what specific issue to address. Considering the assignment's constraints—that each member would focus on a different part of the user journey and device—we made our decisions accordingly.

Our 3 personas

We began with creating user personas based on our three identified user groups:

These 3 user personas not only helped us empthatize with our potential users better but also helped inform the next step of our process which is prioritizing the jobs-to-be-done.

Choosing the right problem to solve

Using user personas and the Jobs-to-Be-Done framework, we identified and ranked high-level goals for each user, narrowing them down to the top two statements. Although children's safety for parents ranked highest in importance and opportunity, we ultimately selected the second-highest statement as it better aligned with the project constraints of requiring an app and effectively integrating all three devices.

Mapping Maxine’s journey

We then created Maxine's detailed user journey map to visualize her pre-, during-, and post-journey activities and touchpoints as she completes her job.

Our final How Might We statment:

"HMW enhance the social interaction for teenage participants through mobile, smartwatch, and desktop applications?"

DEVELOP

From sketch to prototype

At this stage, each member began taking charge of each part of the user journey and began crafting their individual solutions. Starting from hand sketched wireframes to low fidelity prototype to high fidelity prototype. My part was in doing Maxine's post-journey flow using Desktop.

First, I came up with a final design solution.

To enhance the experience for teenage participants like Maxine, whose primary motivations are social connection and sharing memorable moments on social media, my solution for her post-journey user flow focuses on two key features:

  • Addition of a new user profile that acts as a sharable compilation of ther user's data
  • Integration of professional photo curation (currently managed by a third-party) to streamline the process

...but coming up with a design solution was only the first step...

I also needed to craft a user flow to make sure the solution translated well into a product and this process proved to be challenging. It was important that the information architecture made sense so I designed and experimented with many configurations.

...in fact it wasn’t until the fourth set of wireframes that the flow started to feel cohesive and well-structured.

Exploring the idea of redesigning the mobile sidebar and adapting it for desktop helped bring everything together.

I finally created the lofi-prototype using Balsamiq and this is how it went:

DELIVER

Final submission

Before delivering the final results, I went through two more rounds of feedback and testing. The first round focused on the Creative Director's feedback on the lo-fi prototype, which led to changes in the first iteration of the high-fidelity version. Meanwhile, the second round involved an independent Heuristic Evaluation and Usability Test on the high-fidelity prototype itself.

From Wireflow to Hi-Fi

Below are the consolidated list of revisions from the Creative Director's feedback and further explorations:

1. Repositioning of “User Gallery”

⚠️ Issue

  • Gallery which has become a strong selling point of this proposed solution is hidden below the fold
  • Aesthetically, the profile looks bland with mostly text elements put on the top.

🛠️ Solution

  • Gallery is moved to the top, making it both highly visible and accessible.
  • The banner-inspired design allows more level of customization and adds personality.
2. Selector appearing on hover

⚠️ Issue

  • As images vary in color and saturation that the unmarked checkmark would not be consistently visible unless a darker gradient overlay would be added underneath it.
  • However adding this overlay to all images will obstruct user’s view of the image.

🛠️ Solution

  • Unmarked checkmark icon only appears upon hover.
3. Added New “Photo Details” screen

⚠️ Issue

  • Users cannot view details or zoom in to the image they would like to purchase before purchasing it.

🛠️ Solution

  • Add new screens to help support this flow
  • Made sure that this flow integrates seamlessly with the current multi-select functions by keeping the consistency of the purchase button behavior.
4. Added New “Photo Details” screen

⚠️ Issue

  • Based on Creative Director feedback, current flow is missing user gallery view which would strengthen the concept in final presentation
  • Users have no other point of entry to purchasing professional photo

🛠️ Solution

  • Add new user gallery screen with an  in-line notification to alert users.

Usually, this would be where I show the final results... But this time, I have 1 more round of testing to go.

Heuristic Evaluation & User Testing

A heuristic evaluation based on Nielsen (1994) was used to identify the strengths and points for improvement throughout the entire app.

Afterwards I also conducted a usability testing on 3 users with 8 different tasks.

The results are as follows:

  • Out of the 9 heuristics observed, issues were present in 5 of them ranging from 1 to 2 in severity.
  • While 100% of participants was able to successfully completed the task, users expected some behavior which had not been implemented.

So of course I needed to fix these too!

1. New Loading Animation

⚠️ Issue

  • Based on Heuristic Evaluation: Visibility of system status, users should always be aware of what is going on.

🛠️ Solution

  • Add loading animation as part of both gallery interaction and payment interaction, which are two processes where loading is likely to occur.
2. Addition of Payment Failure Scenario

⚠️ Issue

  • Based on Heuristic Evaluation: Help users recognize, diagnose, and recover from errors, error messages are an equally important part of a possible users’ journey. At the moment no payment error scenario have been considered.

🛠️ Solution

  • Added a pop-up as an error. Pop-up is used instead of a new page because 1) It is the focuse of users to return to the originating page after; and 2) Content is urgent.
3. Updated Sidebar Behavior

⚠️ Issue

  • Based on User Testing, 2/3 users expected clicking on the profile menu on the sidebar would bring them back to the profile page again.

🛠️ Solution

  • When users are on the child-page of a certain menu, clicking on that menu should bring them back to the parent-page.
4. Updated Checkout Page

⚠️ Issue

  • Based on Heuristic Evaluation: User control & freedom, users need a clearly marked “emergency exit” which this page did not have.
  • Based on Heuristic Evaluation: Error prevention, prone conditions that could be removed, should be removed. In the initial design, expiry date field is a free-text text field which risks users typing incorrectly.

🛠️ Solution

  • Add breadcrumbs for users to return to the “Purchase Photos” screen.
  • Expiry date field will open a calendar instead.
5. Renaming the “Unclaimed Photos” screen

⚠️ Issue

  • Based on Creative Director Meeting, initial copy “Unclaimed Photos” is difficult for users to understand making it inefficient to work as a signpost.

🛠️ Solution

  • Three alternative names were considered for this page: “Available Photos”, “Professional Photos”, and “Purchase Photos”. Ultimately the last one was chosen because it served not only to indicate the page but also as a straightforward call-to-action.
6. “Professional Photos” Alternative Entry

⚠️ Issue

  • Based on Creative Director Meeting, use of in-line notification does not provide user with reliable point of entry.
  • Based on Heuristic Evaluation: Flexibility, discoverability (NNGroup, 2020) alone would not be enough. A feature needs to be repeatedly findable as well.

🛠️ Solution

  • Instead of in-line notification, a tab will be used instead. This way the solution covers both aspect of information architecture: discoverability and findability.

After implementing those changes was I now finally ready to submit the final outcome!

REFLECTION

My takeaways

What I learnt, what I would have done differently, and where I go from here.

Classroom constrains

Since this project was part of a classroom assignment, many of the methods we used were predetermined, and the device constraints—requiring us to use mobile, smartwatch, and desktop—proved to be limiting. With more flexibility, I would have conducted user interviews to better refine the app concept. I also realize that the best solution might not have required all three devices. Working outside those constraints could have led to a more focused and practical outcome.

Reflecting on my growth

The last time I worked on an end-to-end design project was years ago, when my technical skills were limited. With three years of experience, I’m now proficient in Figma and prototyping, including microanimations and detailed transitions, which better represent the final product. This improvement also earned positive feedback from my tutors. I was able to focus more on exploring ideas without technical constraints, leading to a more thoughtful UIUX design.

Let's chat and make creative magic happen!

(Last updated December 2024)