Beacon

Beacon is a mobile app that enables users to support homeless individuals while promoting trust through clear guidance, transparent impact, and rewards for engagement. Interviews revealed that users want to help but often feel unsure about the outcomes of their actions. I created low and mid fidelity wireframes and an interactive prototype in Figma.

Mar 10, 2025

Beacon

Beacon is a mobile app that enables users to support homeless individuals while promoting trust through clear guidance, transparent impact, and rewards for engagement. Interviews revealed that users want to help but often feel unsure about the outcomes of their actions. I created low and mid fidelity wireframes and an interactive prototype in Figma.

Mar 10, 2025

Role

UX & UI Designer

Service

UX Design

Role

UX & UI Designer

Service

UX Design

Role

UX & UI Designer

Service

UX Design

Purple Flower
Purple Flower

Project Details

Project Details

Understanding the challenge

The challenge I aimed to address was understanding why people are less inclined to help the homeless today, and what could encourage a change. Through my research, I discovered that trust and financial constraints were major barriers. My goal, therefore, was to create a solution that enables people to support the homeless in a trustworthy way, requiring little to no financial commitment.

Designing a seamless experience

I wanted to use calming, safe colours and create an experience that felt trustworthy and transparent, while emphasising the act of helping others. Users can purchase items like blankets or hats and know exactly where their contributions are going. The app also offers the option to watch ads, generating donations automatically, provides ways to support others directly, and includes a reward system to encourage continued engagement.

Ideation & Iteration

I started by creating a mind map to capture all of my ideas. From there, I developed an opportunity solution tree to explore the best ways to address key challenges. Finally, I mapped out the user flow and journey to plan a friendly, trusting experience.

Primary & Secondary
Research

My Process

Next, I focused looking into the visual design of what I wanted within the app, I explored calm and trustworthy colours, ultimately selecting blue to convey this feeling. I created a set of questions and a script to gather user feedback through interviews, learning more about their donation habits and motivations. I also developed user stories to help me have a better understanding and empathise with the users I was designing for.

Sketching & Wireframing

My Process

I started by creating wireframes, focusing primarily on the placement of buttons and key interactive elements. This allowed me to visualise the overall layout and think critically about the user flow, ensuring that navigation would feel logical and easy to follow. By prioritising structure first, I could test different arrangements before adding visual design elements.

Mid Fidelity

My Process

Next, I began incorporating colour, selecting blue to convey a sense of trust and calmness. I also considered the tone of voice, ensuring it felt welcoming and approachable. I experimented with the placement of elements, testing different layouts and visual arrangements to see what worked best. Throughout this process, I conducted user tests to gather feedback, allowing me to improve the design. This helped me ensure that the interface was not only visually appealing but also clear, trusting and what my users wanted.

High Fidelity

My Process

Once my users were satisfied with the design, I finalised all the changes I had made to the UI. I carefully reviewed each element, ensuring consistency in colour, typography, and layout, and made sure that all interactive components functioned smoothly. I made sure most importantly that my users would trust this service and wether it would encourage them to help the homeless. I created a presentation that I shared in front of others and I had amazing feedback from them.

View Prototype

Create a free website with Framer, the website builder loved by startups, designers and agencies.