UX / UI Design
Received highest mark in cohort for individual prototype
Overview
"The Brisbane 2032 Olympic Committee has committed to the ambitious goal of delivering climate positive Games with lasting environmental benefits. How could a digital solution enable this ambitious goal in the run-up to the Olympics? How could a digital solution support and educate for sustainable action before, during, or after the event?"
This was an academic app concept as part of a University course, with the final prototype placed first in the cohort.
My contribution
User Research
Competitor Analysis
Online Ethnography
Personas
Wireframing
High-fidelity Prototyping
The team
1x team member (smart watch)
Me (mobile device)
Duration
10 weeks
Tools
Balsamiq
Figma
IN A SNAPSHOT
The Problem
Large public events like the Olympics often arise to large amounts of waste and there are differing levels of intrinsic motivation for people to engage in eco-friendly behaviours, as well as physical barriers, such as limited access to bins.
Goal
Deliver a design solution to promote sustainability at the 2032 Olympics
Design an interface for different platforms (mobile, watch, or desktop)
The Solution
I designed a mobile application aimed at promoting eco-friendly behaviours through incentives and educational content. Users can easily classify their waste and locate nearby bins to overcome barriers of limited access.
RESEARCH
Have you ever attended an event, just to find the area covered in rubbish everywhere?
Research Objectives
With the above question in mind, I led the desktop research gathered from various sources (academic journals, news outlets) and online ethnography from social forums to gain insight into social behaviours. Our objectives encompassed researching:
Current sustainable solutions implemented in the Olympics
Waste disposal practices in large sporting events
Individuals' behaviours regarding waste disposal
ANALYSIS
I then uncovered insights from research, whilst identifying opportunities in the current market.
Key Insights
Barriers to eco-friendly practices
External factors such as the number of bins available, whether they are easily accessible influence on sustainable behaviours.
However, incentives can also act as a motivator for inciting sustainable practices
Knowledge
Lack of knowledge and confusion regarding waste classification was a barrier for users to engage in sustainable habits.
Additionally, while some abided by recycling rules, they did not feel a sense of impact for their efforts.
Motivations and behaviour
User behaviour is dependent on ease and convenience. Most people will drop their trash on the ground if the bin is over 12 metres away (Kahanek, 2021) and if the environment looks untidy (Cleanaway, 2022).
Ethnographic data showed that some people were intrinsically motivated to care for the environment, others had little drive to engage in eco-friendly behaviours.
THE OPPORTUNITY
"How might we make it easy, convenient and motivating for users to engage in waste disposal processes at large public events?"
IDEATION
Coming up with a product vision and solution.
Based on the our research insights, behavioural change is a key factor in facilitating long-term sustainability and waste disposal is heavily dependent on ease, access and convenience.
My team and I conducted a sketching session to draw out a vision of the solution. It was revealed there were commonalities in the product vision. We identified the following key user tasks:
Search and locate bins
Users can see nearby bins, ensuring convenient access to recycling and trash options.
Community-based approach
To encourage motivation, users can form teams (in Olympic spirit) to support users who may find it hard to take the first step.
Achieve milestones and earn rewards
Users are rewarded for efforts towards reducing their carbon footprint, by unlocking certain milestones that ultimately reap as rewards. This gamified approach incentivises eco-friendly behaviour to foster long-lasting change.
Specifying the user flows for the smartwatch and phone
My team member and I then individually produced our individual prototype with our respective chosen devices.
Mobile (Me)
Waste Classification
Gain points
Watch (Team member)
Locate nearby bins
Gain points
LOW-FIDELITY PROTOTYPING
I began to sketch and wireframe the solution.
Multiple rounds of sketches were undertaken to iterate on the user flow and wireframes. For each iteration, I reflected on what features worked better than others.
Sketches were then transferred into mid-fidelity wireframes using Balsamiq.
HIGH-FIDELITY PROTOTYPING AND ITERATIONS
I then went through multiple iterations of the high-fidelity screens.
An initial high fidelity prototype was created using Figma with some iterations following personal reflection.
Providing clarity about the system status
A key iteration at this stage involved bringing clarity to the scanning process. Using a camera to scan brings many external factors users need to control, such as being aware how close they are, lighting issues and image quality. Error states will also need to be included.
To bring visibility to the system status, a tooltip was added to provide users immediate feedback.
First iteration
Final iteration
USABILITY TESTING & ITERATIONS
Validating the designs.
I performed Heuristic Evaluation based on Nielsen's 10 Heuristics to identify strengths and weaknesses. This was chosen as it provided an efficient method of testing with limited time.
What was addressed?
The layout of the information page was changed considerably for scannability and clearer instructions by using spacing and listing.
Before
After
Improved aesthetic and minimal design by reducing to one font and varying the font weight to communicate visual hierarchy.
Using more than colour to communicate active and inactive state in the navigation bar, such as unfilled and filled icons. This makes it clearer to keep users informed about the current state and makes it more accessible for those who have lower vision.
Before
After
FINAL MOCKUP
Waste classification at your fingertips.
Users can easily classify their waste with the help of AI photo recognition and will be notified of the number of points they earn to unlock their next milestone and be guided towards the nearest bins.
Skills and Key Learnings
Prior to this, I had never used design software tools. Therefore, this project was a great learning curve for me to develop my skills in using tools like Balsamiq and Figma.
Conducting testing when there is limited access to users
Often times hearing from the users are ideal but with limited time constraints, this led to limited access to users. This experience highlighted the need for flexibility and adaptability in the testing process.
Being intentional with visual language across platforms
As this was a group collaboration in which each member had to focus on a different device (i.e. mobile and watch), this project taught me a lot about being intentional with visual density and how they scale up or down on different platforms whilst maintaining a cohesive visual brand identity.
The impact of micro-interactions
I learnt that adding microinteractions, as simple as a feedback tooltip can make users feel more included and elevate a product. Moving forward, I would love to further explore micro-interactions to subtly enhance overall usability.
Designing for diverse users
Through uncovering the disparity with how people engaged in sustainable behaviours, I learned to consider diverse user needs in our design solution, ensuring inclusive design.