top of page
Stripe photo.png



> NOV - DEC 2021 (2 weeks) 


Designing a map-based web app for a sustainability platform


My team and I worked on building a community flagship feature for Locale


Project leader
UX Researcher 
UX Designer
UI Designer
Prototyping and Wireframing




High fidelity prototype in the form of web and mobile
UX research with UX artefacts
Interview research findings
Style guide and Design system


An overview of the project

Locale is my second client project during my UX/UI Bootcamp in Hong Kong. There were 4 teams in total, responsible for different functions of this platform. My team and I were in charge of the flagship feature of the platform.

The client has an initial idea namely a “Plan my day feature”. He wants a feature in the platform that users can schedule their day and do different kinds of activities through this platform. The goal is to provide activity suggestions based on the user’s preference and interest, suggesting them a starting point, alternate route, along with taking traffic, weather and discoverability into consideration.

We picked up this challenge and started our user research to validate his initial idea. We talked to a lot of different users to find out their interest in this feature.

The turning point!

Our interview results showed that most users would normally use their personal calendar to plan out activities, therefore a “plan my day” feature on the platform may not be something users would be interested in. However, based on our conversations with the interviewees, they are likely to be more interested in knowing what events people who are at a similar age and similar interest are attending. As a result of an extensive user research, we came up with a better feature for the platform!

My role

What were my responsibilities?

I was the team leader, working along with 2 other UX/UI designers, Jasmine and Cici. My role was to provide clear and compelling direction to the team in creating the flagship feature of the app. I oversaw the entire project, provided support, and ensured my fellow teammates worked towards the objectives we agreed on.

We did a lot of UX research to validate our initial assumptions. We conducted market and user research by reaching out to potential users. We then produced UX artefacts such as personas, customer journey map, affinity mapping, user flow and sitemap. Our final output concludes with a high fidelity prototype which exists in the form of Mobile and Web screen size.

Project overview

What is Locale?

Locale is a platform that promotes sustainability for enthusiasts & organisations. It aims to scale people’s knowledge with sustainable activities and nurture different kinds of lifestyles.

This platform is a map-based web app which exists to empower citizens to connect with like-minded people through experiences, services, and events. The goal is to promote social responsibility and strengthen environmental awareness in their local communities.

The project objectives are (1) to raise awareness on sustainability in the local communities (and beyond) and (2) to create a platform for like-minded people to connect and make an impact.

Our main focus is to design the platform from scratch by executing the proposed ideas and to deliver a seamless end-to-end user experience.

Locale mockup.png
Discovery & Define
Final Prototype



Secondary Research

As with all the project starting point, we did secondary research and market analysis. By conducting a competitor analysis, we tried to find gaps and opportunities which helps to gain competitor advantages.

We conducted semi-structured interviews to find out user practices and behaviour. The objectives of the interview are:

  • To understand their awareness regarding sustainability

  • To find out what platform do they normally use to search for events and the reasons of why they use those platforms

  • To gain empathy so as to understand their frustrations, hopes, abilities, and goals

  • To find out their scheduling practices and access whether a “Plan my day” feature on the platform would be usefulness for them

  • To explore if there’s any other features the users would like to have in the app

Based on our conversations with the interviewees, we categorised them into three types of personas and produced customer journey maps respectively.

Personas and customer journey map

I compiled insights from my research into personas representing our target audiences. I would refer back to these artefacts through the rest of the design process to ensure Locale would help them to achieve their goals & relieve their frustrations.

Locale_ Persona_ Enthusiast.png
Locale_ CJM_ Enthusiast.png
Locale_ CJM_ Activists.png
Locale_ Persona_ Activists.png
Locale_ Persona_ Ambassador.png
Locale_ CJM_ Ambassador.png

Affinity Mapping

We used affinity mapping method to sort and gather our interview results. 

Locale_ Affinity mapping interview results.png

Interview Results

Key Findings


The majority of users use social media and newsletter, such as Instagram and Whatsapp groups to find out about current activities and events, but the information is dispersed and disorganised.


Users are aware of the impact their actions can have on the environment, but there is a lack of a platform available to share their message and educate others. 


Most interviewees prefer to attend activities and events that are recommended by their friends rather than those that are advertised (word of mouth). 


Most of the interviewees use digital calendar as their planner, mostly Google Calendar and Apple's inbuilt because it makes scheduling quick and easy, also sync with other devices (usability).


Interviewees mentioned the need for a platform for sharing event information for individuals and businesses.

Key Insights

Enthusiasts want to adapt a greener sustainable lifestyle because they would like to make small impact to the society but currently most users don't know any platforms that offers a wide range of information and activities regarding sustainability.


Activists want to join more activities and connect with more like-minded people because they would like to widen their network but information about sustainable events are promoted on different Closed WhatsApp groups only of which made them question the reliability of the events and undergo complicated, unpleasant joining processes.


Ambassadors want to share Sustainable Development goals and resources to more people because sustainability encompasses a wide range of aspects. However, some information is constrained to only internal groups and a lot of them do not have proper channels to promote them. 


Most users want to attend events that are recommended by their friends (word of mouth) because they do not want to go to events that are lack of credibility but currently some businesses misuse the word “sustainability” for a commercial purpose.

Most users

fabio-neo-amato-xhHQNHM9Sus-unsplash 2 3.png

“I love to go to different events and meet new people. However, I often received too many event promotions on different Whatsapp closed group, which eventually becomes very disorganised.”

POV Statements


User needs a way to organise their schedule because often they receive many event invitations from different Whatsapp group chat.


User needs a way to join trustworthy, credible events/activities because some businesses misuse the word "sustainability" to market their campaign.


Enthusiast needs a way to meet like-minded people because they want to widen their networks and meet new friends.


Enthusiast needs a way to explore activities around them because they want to act sustainable but they don't know where to start.

fabio-neo-amato-xhHQNHM9Sus-unsplash 2 3.png


  • Utilities the platform to help users meet likeminded people and expand their networks in the local communities?

  • Increase the credibility of the platform and encourage more people to join the events? 

  • Build stronger and better relationship between Enthusiasts and Ambassadors through community feature?

  • Promote various events and activities effectively for different companies to raise awareness of Sustainability?




Our interview results showed that majority of the interviewees use digital calendar as their main planner. Only minor proportion of the interviewees were interested in the “plan my day” feature.

On the contrary, our research findings shows that people are more interested to know people at their similar interest and age attended what events. Consequently, we respected our research findings and switched our scope a little bit. Instead of building a planner system, we came up with a community feature and bookmark system.

Low Fidelity Wireframe


Low Fidelity Wireframe

Locale_ sitemap_mobile.png

Sitemap for mobile

Locale_ Sitemap_web.png

Sitemap for website

Brand Style Guide




Feature 1 - Explore

The initial idea of Locale is that users can search nearby events through their location using the map. However, after gathering all the insights, we found that it was also vital for users to explore events by category. For that being said, an expore page is added to the platform under the hamburger menu.

Frame 2720.png

Feature 2 - Bookmark system

Our researching findings showed that a bookmark system were important to users. They would like to keep a record of places or events they are interested and plan to go in future. Although we didn’t execute the “Plan my day” calendar to the platform, this bookmark system essentially provide the same functionality. 

Bookmark system flow.png

Feature 3 - Community

"I enjoy meeting new people and connecting with those who share similar interests with me.”- an interviewee

In the community feature, there are three sections:
Discover, (2) My communities, (3)Create.

Frame 2715 (1).png

Final Prototype

Final Prototype



Our client, Aman, was very impressed with our output. He was happy to see how we changed our scope based on our research findings. He was convinced that a community feature in the platform is more important. 

I am very grateful that my client accepted my idea of having "Community" over "Plan my Day". My team and I had encountered hundreds of debates of deciding whether to stick with our client's initial idea or to develop a new idea based on our research findings. We have even thought of building two features at the same time, however, given the short time frame, we do not want to sacrifice our time on developing something users are unlikely to use; we would rather spend our time to improve the user flow of one useful feature. 

fabio-neo-amato-xhHQNHM9Sus-unsplash 2 3.png

Feedback from our client

I am super impressed. I can't believe the team has achieved so much in 2 weeks. The Explore page is good while the bookmark feature makes me happy. 


Not only I have gained all the hard UI skills in building components and prototyping, I have learnt a lot ranging from project management to coordinating with different stakeholders. The fact that I held the role of a team leader, I had to reach out to interviewees, schedule virtual meetings, and make them comfortable during the interview. These experiences have definitely increased my confidence level and interview skills.

Thank you for reading!

fabio-neo-amato-xhHQNHM9Sus-unsplash 2 3.png

Endorsement from Client

As a student in the Xccelerate UI/UX program, Janice led a team of budding UI/UX developers to understand, adapt and integrate a key feature proposed in the project brief into a systemic experience for users demonstrating a clear understanding of design principles and human centered design. I have been very impressed with the output, communication and collaboration Janice and her team demonstrated in delivering quality. I look forward to following her progress as a UI/UX designer.

Aman photo.jpeg

Aman Satyam Bharti, 
Founder of Locale                          -  Dec 2021

Read other case studies...

Bixie - Cover.png


I improved current user flow and enhanced user’s experience through revamping their existing mobile application.

Frame 2Rooftop republic.png

Rooftop Republic

I designed a recommendation system that helps Product managers to plan the crops for their clients.  

Cover mockup.png


I  challenged the initial assumptions and came up with a better feature backed up by my user research findings.

bottom of page