ONEARTH | UX/UI CASE STUDY

Encouraging conscious consumerism through a marketplace of sustainability focused stores.

"onearth" was an independent project I completed in highschool. Hong Kong launched a plan to reach carbon neutrality by 2050, educating and funding businesses that helped achieve its sustainability goals. This led to an emergence of "eco-friendly" stores across Hong Kong.

However despite government efforts, government research shows that citizens were not shopping at these stores. This made me wonder, why weren't citizens supporting these sustainable businesses?

THE SOLUTION

A quick sneak peak at the highlights 👀

USER RESEARCH

Why aren't people adopting sustainable shopping?

To better understand the problem, I started by having conversations about sustainable shopping with five people who grew up in Hong Kong. I concluded the interviews by summarizing the most mentioned reasons in the four hypotheses:

UNDERSTANDING THE MARKET

With these hypotheses in mind, I wanted to better understand the market myself before coming to any conclusions. Through my research, I compiled a list of 40+ sustainably focused businesses, with many more I couldn't include due to the time constraints of the project.

I then showed this list to the people I had spoken to previously. All five people were surprised from the quantity of stores, to the product range and their prices, mentioning they didn't know there were this many stores. A few even asked for the list of stores to check them out.

Hence, I concluded that Hypothesis 4 was the most likely reason, that people simply just didn't know these stores existed.

EXPLORING MY TARGET AUDIENCE

The target group of the government was adults, but I made my target audience ages 16 and up.

While researching, I was surprised to see stores that I would also shop at as a highschooler. I decided to interview 10 students at my highschool (age 13-18) to find out whether others my age or even younger would be interested in these stores too.

USER JOURNEY

With my target audience set, I created two personas based on two of the people I had interviewed. I also sketched a potential user scenario to better gauge how my solution could work.

Isabelle Cheung

Age 19 / Student

• Learnt about carbon emissions throughout school and understands the severity of climate change
  
• Would go to eco-friendly shops but currently does not know any

"I want to start making changes in my buying habits, but I'm not sure where to start and what shops I can go to for the things I need."

Sandy Sun

Age 39 / Mother

• Sustainability advocate, teaches other moms how to live greener
  
• Regularly shops at eco-friendly stores but always looking for more shops to visit and share

"I regularly purchase eco-friendly and safe products for my kids, but the store I go to is far and I haven't found any stores near me yet.

MARKET RESEARCH

How should I approach the design process?

Although I had a clear product direction in mind, I was still unsure how to approach the design of the app. I decided to do a competitor analysis, not only to help identify a unique selling point, but also to get inspiration for the specific features and user flow of my product.

DESIGN PROCESS

User flows and navigating the onearth interface

Based on the goals I identified, I identified that onearth would have 2 main use cases: users finding and locating stores to save or visit, and users purchasing products from stores online.

There would be 5 main pages in the interface: ​Home, Explore, Cart, Saved, and Profile. The explore page would be for users finding physical stores, and the cart would be for users purchasing online. The other pages would be needed for both use cases.

I focused on identifying the elements needed on each screen for the app to work, creating a user flow diagram to mark everything out in detail.

DESIGN AND USER TESTING

Wireframes and early usability testing

I decided to do user testing quite early on in the process, as I was making an app from scratch and wanted to make sure everything made sense from a user perspective. I created mid-fidelity wireframes and used them to make simple prototypes for the two main use cases.

I then tested with  5 people who fit within my user group, asking them to navigate the two prototypes based on the two use cases without guidance, looking for the following:

• Whether they were able to complete the two tasks successfully
  
• Their thoughts and emotions throughout the navigation process
• Any improvements I could make to make the app more user-friendly

Further iterations

I was fortunate to be able to keep in contact with the same five people whilst iterating on my designs. I decided to work on improving the home page first, creating multiple versions then seek feedback.

For the final interface, I chose version 3 as it received the most positive feedback and was my personal favourite. I added in the text "welcome back!" which multiple users said they liked from version 2, as it made the interface feel more friendly.

For the tab bar, I explored the following four options. I discussed with the same five people and ended up deciding on version 2, as the order of the icons best matched the order users would interact with the interface, and there wasn't one specific page I needed to emphasize to users.

LOGO AND BRANDING

Clean, Minimal, Sustainable

These are the words I kept in mind while designing onearth's branding. The result was a limited palette of greens and yellows, and a legible and simple sans serif typeface.

Following the same minimalistic theme, I chose to incorporate the letters within the word "onearth," shaping them into the silhouette of a leaf.