Background
The client
'Ocean bottle’ (OB) help save our Ocean by choosing their reusable water bottles. The client had already launched the initial version of their app by the time they came to us. They are looking to redesign their app based on recent user research.
Me
I worked as UX designer and collaborated with the OB team in developing strategy and key features for the new app.
Main Tasks
UX
-
Uncover intrinsic user needs with a deep understanding of raw user research
-
Break down complex problems into actionable design opportunities
-
Communicate UX rationales to prioritise design direction effectively
-
Optimised previous design and develop new key features
UI
1. Sketches for design solutions
2. User interface for key features
My Role
Project management
UX analysis
User journey
Design solution​
Timeline
8 weeks
Deliverables
Problem definition
Idea breakdown
Key screens
Tools
Figma
FigJam
Design process
For this project, my journey involved weaving together the understanding from previous user research findings and refining the findings/opportunities in all stages of the design process.
Thinking critically and strategically of what to focus on, discussing reasoning behind decisions in the workshop was key to get support from client and move forward.
Discover
User research
​Jobs-to-be-done
Competitive analysis
HMW question
Define
User journey
Success metrics
Strategy ideas
Ideate
Brainstorming
Key features
Wireframe
​
Workshop
I facilitated 'discussion workshop' every week during this project
Discover
To focus on the right problem space:
Gain a detailed understanding of the problem and align reframed design challenge with the client
​To kick off this project, the client sent me a few things and expecting me to understand the product within a short time.
What I got:
1. A product deck with learning's from user research, marketing strategy, roadmap etc.
2. Product website
3. Previous app design
​​
The product decks were very helpful and I could just move to the opportunity discover phase, but there are a few things that I was uncertain about. Since the client team was open to new ideas and timeline seemed on track at that moment, I asked them for the user research they did just for reference. My goal was to understand the problem space better and also wanted to confirm that we were focused on the right problems and define the scope better.
​
In order to be on the same page with the team that had been working on this project for months, and still thinking independently, I did the following:
-
Review user research and findings
-
Structure it in a way that fits how I think to help me understand it fast and better
​
​
🔸 Uncluttered the user's needs
The client did 100 surveys and sent me the document file (see the picture on the right side)of roughly categorised concerns/needs from those who want to make impact.
​
What I did
To understand the user findings more efficiently, I concluded the findings into my familiar structures and my goal was to Identify a set of user problems and identify the more tangible issues.
​
​
My refined version
The original version
Part of the client's user research raw findings
Client's defined Pain points
My refined version of research findings
🔸 Layout user needs in Jobs-to-be done
I structured the findings from the research document from client into Jobs-to-be-done to help me dive deeper into what the user actually wants.
My refined version
Functional
-
I want to find easy and convenient ways to have a continuous impact and be rewarded for it using my reusable container.
-
I want to feel motivated and incentivised so I could keep making an impact in the long run by using my reusable container.
​
Emotional (personal)
-
I want to feel that what I’m doing is making a difference.
-
I want to learn how to better myself or others (and be more impactful).
​
Emotional (Social)
-
I want to be part of a movement and a community.
​
​
The original version
Jobs-to-be-done (Client version)
🔸 Reframe the HMW question that fit the scope better
I think it is very important to have a HMW question that reframes the insights and inspires solution-oriented thinking.
The HMW question the client offered (see the picture on the right below) could improve the phrase to make it more clear
After understanding the raw user research data, and restructured the findings, I shared them with the client and we agreed to reframe the HMW questions as bellow:
​
HMW design a more convenient and impactful experience for the user in using reusable products and inspire them to do it more often?
Define
To build the right thing:
Brainstorming opportunities based on the refined user journey
Once we had aligned the HMW question and the problem space, we moved forward with defining the main user journey. Below are screenshots of the key slides of client's ideal user journey. I made adjustments here to summarise the touch points better.
​
(Inner circle: Client's original user journey touch points​
Outer circle: My refined touch points)
​
The client's sketch of the ideal user journey
My refined user journey touch points
🔸 User journey: Refill + Record + Motivated (Stick)
The user journey was built on top of the refined touch points.
​
To reveal opportunities, my plan was to conduct a field study at one of the retailers that were partnered with Ocean Bottle.
Unfortunately, we didn't pull off the plan and instead simulated the scenario with the OB team in the office. It wasn't ideal but still better than just me thinking about it on my own.
​
We set the scenario here as the most common one: Use a bottle to refill water in a shop and record the experience.
The user journey generated with client
After laying out the user journey, I summarised the design opportunities and had a further discussion with the client to find out what Ocean Bottle's app can offer the user.
​
An overview of summarised opportunities and the design direction we see from them
Break down three solutions and making a decision through prioritising business goals
The success metrics in this phase aiming to increase the below:
-
Acquisition: How many downloads of the app can be achieved
-
Retention: How many users are using the product and will keep using it
-
Activation: How often users use the product
​
There were three solutions we came up with based on the findings. In the below, I present more details of each solution.
​
Additionally: The first solution (1) is what the client developed a year ago with a few screens to test the design. To avoid bias, we focused more on the latest analysis to remain open-minded.
​
🔸 Solution 1: Refill map
🔸 Solution 2: Habit (Refill + Record)
🔸 Solution 3: AR enhanced game
This was my think out of box idea. The concept is to scan the bottle through the app to record refill and visualise the impact in an extended reality space.
The benefit of this idea is there's no competitors so far, but the constrains is it will involve longer development. So we mainly focused on the above ideas.
​
​
​
The solution we move forward with
The client decided to put 'acquisition' as the priority business goal and they wanted to develop further with the Solution 1: Build a better refill map that is easy to use'. It was important to them that the app have more business value so they could promote it better with the retailers and a useful success metric for the investor base.
​
Solution 1 was also already slightly developed from the little design work they did a year prior. The screens will be compared and optimised in the ideate phase.
Ideate
Brainstorming design opportunities among confirmed strategies
🔸 Rethink what opportunities we have with the confirmed strategy focus
At this stage, we continued exploring design with 'Coverage, Conveniency, Community' as the focal points.
We decided to focus on the below sections as touch points from the user journey:​
-
Refill map
-
Impact overview
-
User rewards (+Community)
​
With the strategy in mind, the client and I had a workshop to discuss ideas and I broke them down into design opportunities and categorised them into the below framework. I also included the potential business opportunities and risks we needed to think about for some of the ideas generated. This enabled us to make decisions for how to move forward.
​
Categorise brainstorming ideas into actionable design opportunities (Image change: Community - User rewards)
🔸 Simplified opportunities to actionable design breakdown
Before I moved to the design sketching phase, I suggested to summarise user tasks/design opportunities into 'Basic', 'Advanced' and 'Difficult' to set the priorities and constraints one more time. Furthermore, I made sure the client agreed with this scope and reminded them of the potential compromises before moving on.
​
Design breakdown for main sections of the app (change pic)
🔸 Review previous design and spot improvement opportunities
The previous design was aimed primarily at showcasing the different sections of the app, so it was just a few testing screens. As a result, some of the design was no longer useful for the current version or just design sketches. With that in mind, I continued the design process using the previous design as a reference and mainly focusing on 'Design breakdown' (pictured above) as instruction.
Review the previous design
-
Identified and analysed the good parts and areas to improve upon
-
Discussed with client the different levels of importance
The new design
-
Created new screens based on 'design breakdown', offering different design options
-
Discussed the new design for what is lacking and what is good
​
​
The previous landing screen design (left picture), the testing screens for the map feature (right picture)
New design:
Improvements from the previous design +
Realisation of actionable design tasks
🔸 New design overview
In the below demonstrated the design angle I had for this project, comparing to the pervious design.
Impact Overview
Has improved in:
-
Easy to understand your points
-
More space to add 'callout', it could be a tailored message or campaign callout
-
Add 'Impact history' section. It could be daily or weekly
Refill map
Has improved in:
-
Easy to find CTA buttons
-
Differentiated different refill spots
-
Easy to see how many points you can earn from these locations
-
More collaboration opportunities with retail shops
-
Added social proofs in the 'Shop detail' page
Reward
A new section:
-
Our low-effort, high-impact choice for reward section
-
Badge wall: A good way to show gamification
-
Good way to give users a sense of community by earning badges and seeing how many people have specific badges
Design process for: &
Reward
Refill map
Refill map
Refill map
Refill map
🔸 Wireframe demonstration of key user flow
'Refill map' was the part I focused the most on during my time with this project. It was aimed on clearly communicating call-to-action buttons and the easy-to-navigate map for refill spots.
The way we collaborated on this was that I as a UX designer would build the main user flow and conclude what elements were important and then work with the UI designer to further polish it.
Below illustrates the main user flow for the refill map:
​
Low-fidelity design for the user flow 1 and why I designed this way
🔸 A design explorations example: Homepage of the refill map
I explored different designs for the refill map and how we represent information to the users. I made an assessment of the design ideas and analysed them to make adjustments. The below picture is an overview of the other ideas I explored for the 'Refill map'.
​
Part of the other design ideas I explored for the homepage of the 'Map' feature
🔸 Other user flows: Design with existing components so it's easy to scale
The flow (1) led the design for the other flows; 'Add impact' and 'Add refill spot'. When I designed them in low-fidelity, I wanted to design based on the existing components so that I could develop a design system that would easily scale later on.
​
Key screens for the user flow 2: Add impact (change pic)
Key screens for the user flow 3: Add refill spot (change pic)
Reward
🔸 Reward 'Badge wall': How I developed this idea
This is the new concept that I developed while working on this project, the client and I were looking for a way to gamify the 'Reward' and bring a sense of community to the user and among our options, we thought using 'Badge' was the low-effort, high-impact option.
This was actually not our focus section to design but we needed to brainstorm ideas and move fast, so below is how I went about exploring design options for 'Reward':
-
Brainstormed ideas within 'Internal motivation' & 'External motivation'
-
Elaborated further with the ideas I thought had more potential and found pictures online to support them visually
-
Discussed with client and made final decisions
​
​
This is an overview of the idea exploration for 'Reward', the original file is all discussed in FigJam
A low-fidelity wireframe for the confirmed design direction
🔸 The design process of present 'badges' and 'a badge'
This is the new concept that was developed while I worked on this project. The client and I were exploring the ideas aiming at finding the most suitable ones to create some testing screens from.
​
Side note: The design wasn't completed entirely and the client decided to postpone developing further due to the budget and timeline. This is the last version I displayed to the client.
Sketch for the badge idea
Conclusion
This project isn't fully finished but due to the change of the plan, the above was what I contributed to the project. It was also the first project I actively discussed with the client of why something better to be change in their user research summary. And it ends up successful, and the client appreciated my contribution.
​
The difficult and challenge
💎 How to communicate proactively with the client through the project
For this project, the main challenge was to guide the client’s assumptions and expectations around HMW questions and the ‘Refill map’ solution, given they had already familiarised themselves with previous user research, hence they could hold biases against new directions for this refresh of their app design.
​
To work around the client’s biases, I communicated with emphasis on
-
Clear reasoning for both opinions/ideas to highlight advantages and disadvantages
-
Providing sufficient context to remind the client why we should do something differently as it could be that the priorities we set before would represent a compromise they forgot about, etc.
​
A good example can be when we make decisions around choosing either 'Solution 1: Refill map' or 'Solution 2: Habit (Refill+Record)'.
You can find a document that I prepared around ‘Benefits’, ‘Constraints’, ‘Business goals’, etc to guide the client to seeing the strategy space and comparing both ideas neutrally.
​
Through the above approach, the collaboration became more efficient and different members were happy to discuss things because the communication was focused on the problem instead of who's right or wrong.
​
🔸 Solution 1: Refill map
🔸 Solution 2: Habit (Refill + Record)
Examples of