UX/UI Design
LocalLift, 2023
A Mobile App That Helps Communities To Collaborate And Help Each Other During Times Of Crisis Such As Covid-19
Timeline:
January - April 2022
Tools:
Figma, iBisPaintX, React Native, JavaScript, MongoDB, GoogleForms
Role:
UX/UI Designer, UX Research, Software Development
The COVID-19 pandemic has greatly affected daily lives and led to extreme consumer behavior and panic buying. As a consequence, daily necessities, food and other resources ran out. World Health Organisation [WHO] suggested that in order to contain this virus, communities need to coordinate together. Even just small benefitting actions in individual communities can benefit the whole world.
Community resilience is a term used to describe the ability of communities to cope together to recover from large-scale emergencies. This means communities coordinating to strengthen factors such as social networks which will support people in times of crisis. This is proven by the committee for community engagement which was established by CDC in 1995 and the community engagement during the AIDS epidemic.
😷
Severely disrupted daily life, causing panic buying
🧻
High demand leads to shortages of essentials
🫂
Communities struggle to meet basic needs
The Solution
The location-based app is designed to empower communities by facilitating the buying, selling, exchanging, and donating of essential goods during crises.
It connects individuals when stores run out of necessities, ensuring resources are shared efficiently and fairly.
With intuitive navigation and real-time availability updates, users can quickly find what they need or offer surplus items to others nearby.
By fostering collaboration and mutual support, the app strengthens community resilience, helping people access vital resources when they need them most.
Competitive Audit
Feature/App | OLIO | Nextdoor | Village |
|---|---|---|---|
Unique Features | - Community Pledge
- Location-based listings
- Anonymous ratings | - Local business recommendations
- Community engagement
- News Feed | - Offer Help button
- Save listings to wishlist
- Follower system |
User Feedback/Reviews | Rate users anonymously | Rate & review businesses/users | Rate & review users |
Map Integration | Google Maps shows user location | Not specified | ❌ |
News/Updates | ❌ | Local news updates | ❌ |
Community Groups | ❌ | Join/invite to community groups | ❌ |
User Profiles | Distance, listing history, user ratings | Reviews with photos, messaging | Followers/following, reviews |
Chat Functionality | In-app chat | In-app chat | In-app chat |
Push Notifications | New messages, new listings | Not Specified | Not specified |
Listings (Buy/Sell) | Upload, share, like listings | List items, buy/sell goods | List items with photos |
Primary Purpose | Reduce food waste through local sharing | Connect neighbourhoods for tips, buying/selling, local updates | Community support, sharing, and helping with everyday tasks |
Platform Availability | iOS, Android, macOS, Desktop | iOS, Android, Desktop | iOS, Android, Desktop |
User Research
To understand user frustration, needs, and requirements, I conducted user research through a user survey for my project. My goal was to gain insights into the needs and wants of users, surrounding their experiences with shopping during times of crisis so that I can better design my app and responsive website.
There are two types of user research methodologies: qualitative and quantitative research. I chose quantitative research because I had a time constraint. Since online surveys are a faster method of data collection from a large number of participants, this allows me to gain accurate and efficient results.
1️⃣
(Isolated) Individuals Had To Rely On Others Or Delivery
The design will focus on easy-to-use location-based support features, allowing users to request help from the local community in an efficient way.
2️⃣
Uncertainity About Seller's Trustworthiness
The design will guide to include real-time inventory, ensuring users can quickly find available resources nearby and avoid long delays.
3️⃣
Delaying In Accessing Essential Items Due To Stock Shortages
To address this, the design will include a review system, allowing users to evaluate the credibility of sellers. This feature will build a sense of trust within the community.
User Personas
User Journey Map
Goal: To trade her unwanted items for something more useful, creating a mutually beneficial exchange with others in the community.
Starting The Design
I focused on several key tasks to build a solid foundation for the app. I began by creating a sitemap to establish the overall structure and navigation flow. Next, I sketched paper wireframes to brainstorm and visualise initial design ideas, which then evolved into digital wireframes that refined the layout and functionality.
These wireframes were used to develop a low-fidelity prototype, allowing for early user interaction and feedback. Finally, I conducted usability studies to test and gather insights, ensuring the design met user needs and expectations.
Lo-Fi Wireframes
I focused on the main priorities and insights I gained from the user research. Instead of using paper and pencil, I opted to use my I-pad to sketch the wireframes.
Digital Wireframes
The primary goal was to create a simple and intuitive user interface that enhances the overall user journey. By priortising clarity and ease of use, the design aims for an efficient navigation to ensure that users can quickly access and complete their tasks.
Digital Wireframes (Screen Size Variations)
I also started to work on digital wireframes for additional screen sizes to make sure the site would be fully responsive. This is for a desktop screen.
Digital Wireframes (Low Fidelity Prototype)
I first created a low-fidelity prototype from the user flow diagram and wireframes to test functionality. The user flow illustrated in this prototype shows every essential screen that guides users through their journey within their app.
Click here to see the prototype
Study Type
Unmoderated Usability Study
Participants
20
Duration
10 - 20 minutes
1️⃣
Users expressed that the categories and tradetype menu area seems cramped and makes them feel confused on what option to choose.
2️⃣
When adding a listing, the button which asks users to choose the category and trade type confuses them as there are two sections but there is only one button.
3️⃣
Users think it’s not very efficient to filter the items according to trade type and categories individually.
Usability Study
The users were asked to look at the app design and then submit their opinions on different aspects such as navigation and layout. The app design layout received a lot of positive comments from the survey participants as exactly 70% of the participants expressed that the app design is their favourite feature of the app:
Mockups: Before And After Usability Study
Before
After
I added a divider between the filtering section and the card display area to clearly separate the two functions, making the layout more intuitive for users. This also helps to create a cleaner and more organised appearance. Additionally, I’ve also added a search function for users to search the listings instead of just filtering them.
Before
After
Instead of combining categories and trade types into one button, they’re now separated into two distinct buttons, making it clear that users need to select both when uploading an item.
Accessibility Considerations
1️⃣
I made sure the colours met the WCAG guidelines and ensured strong colour contrast between text and background elements to enhance readability for users with visual impairments or low vision.
2️⃣
The design is optimised for one-handed use, making it more convenient and accessible for users who need to interact with the app while holding their device with one hand.
3️⃣
I established a clear text hierarchy across the app to guide users in navigating through different sections and information on the screen.
Final Mockup Designs
Final Mockup Designs
High-Fidelity Prototype
Software Development
LocalLift was developed by using React Native which is an open-source UI software framework created by Facebook. The app is a cross-platform mobile app meaning that, it is available for both iOS and Android.
The best way to test a mobile app is by testing it out on a real device as this gives the highest accuracy.
What Would I Have Done Differently?
I would extend the design beyond the mobile version to encompass a desktop version, thus enhancing accessibility across devices. Furthermore, incorporating multiple languages into the application would be a valuable addition, breaking down language barriers and ensuring a more user-friendly experience for a broader audience
Outcomes
Overall, the application met its initial requirements and 80% of the participants in the survey agreed that the app would be useful for local communities to help each other during times of crisis.
“I like the user interface and the colour scheme, i don't think it needs anything more other than what is already implemented”
Learnings
This project was a significant learning experience as it was my first time taking on both the design and development of an entire application independently within a short timeframe. It also marked my first full execution of the UX design process, allowing me to deepen my understanding of user experience and user research.
Additionally, the project was deeply personal, inspired by the challenges my home country, Myanmar, faced during the pandemic, including my own loss of loved ones. This experience reinforced the importance of designing solutions that can support communities in times of crisis, shaping my approach to problem-solving and human-centered design.
