Project: app finder

This project was carried out as part of a course on Figma and UX/UI design.

Assignment
During this course, you learn the principles of UX and UI design by developing an app that can find items using a Bluetooth keychain.

My approach

I followed the course step by step. An important part was outlining the user journey and creating a persona.

The user journey is a written step-by-step plan that describes how a user navigates through the app. It also maps out the user’s emotions, needs, goals, and more. This information is crucial for the design and navigation of the app.

Persona

First, I created a persona. A persona is a general representation of the user, including name, job, location, as well as their goals, needs, and frustrations. This example is based on the course.

User journey

I built the user journey based on three different scenarios:

Creating a new account.
Adding a new Bluetooth key.
Detecting an item.

On the side, you can see the flowchart that the user follows. Each block represents a screen that needs to be designed. The flowchart clearly shows which designs are needed and how they relate to one another.

Purple pentagons: Represent choices the user can make, which impact the app’s navigation.

Blue squares: Represent actions within the app itself, without affecting navigation.

The Design

I developed a simple brand style for the app, taking into account the persona and the app’s function.

The app helps users detect lost items. Users are often stressed while using it. I incorporated these insights into the design:

Logo: Based on sonar, aligning with the idea of searching and finding.
Colors: I chose shades of purple to create a calm and user-friendly appearance.
Usability: A simple user interface helps prevent additional stress when searching for something like a wallet.

Scenario 1: Creating a new account

When the user opens the app for the first time, they are curious and excited. The user creates a new account by clicking the 'Sign up link.'

The 'Create account' button is initially transparent.
Once all fields are correctly filled out, the button becomes fully visible and clickable.
After clicking the button, the email verification page opens.

Scenario 2: Add a new key

This scenario dives deeper into a feature of the app.

The user logs in and arrives at the ‘home screen.’
Several options are visible, including ‘add key’ and a navigation bar at the bottom.
The user personalizes the key with their own name and icon.
After clicking ‘Confirm,’ the user sees an overview of all the keys.

Scenario 3: Detecting an item

The user is searching for her wallet and can't find it anywhere. In high stress and frustration, she opens the app.

Thanks to the user-friendly and easy-to-navigate interface, the user only needs to log in and click on the desired key to locate the item.