I was initially interested in the idea of the app itself. Its essence for the user is to make smart purchases in accordance with their beliefs and values. The essence of the app is to gather information about each brand, shop, manufacture and product and provide this information to the end users. Brands/stores/manufacturers can associate themselves with certain beliefs, and users can assess whether the companies' actions are in line with their beliefs and buy from those brands/stores/manufacturers whose values are close to their values.

What problem should the app solve? Everyone has their own belief and value system, e.g. attitudes towards "caring for the environment" or "attitudes towards storing weapons" and so on. And some businesses have their own beliefs, for example regarding environmental care. And if the user's beliefs coincide with the company's beliefs, then the user will be able to be guided by their beliefs when buying a product. But in addition to coincidence of values, it is desirable for the user to check whether the company/brand actually follows its beliefs. This is what the scoring system is for.

But I won't write any more explanations of the app. Let's move on to my process of working on the app. As with any app, my work started with research.

ABOUT THE PROJECT

While discussing the details of the project idea with the client, I highlighted the main functionality of the app and mapped the app. I needed to capture the user journey visually to see if I was missing something important. During the creation of User Flow, I highlighted a few key points where decisions needed to be made. After discussing all the details with the customer, we eventually decided on the core functionality and I ended up preparing a map of the app (I provide it here in three parts, but have framed it all together in figma).

UX Research

User Flow

Next, I needed to create the wireframes for each page, given the functionality fixed in the application map. This was probably the most difficult part of the app design process. Because during the wireframes work, things came up that I had missed when designing the site map. But in the end I successfully completed the wireframe by making some design decisions. Below I'll present a few frames of the three categories, and then I'll go into more detail about my other solutions.

Wireframes

Let's look at a key design element of this app. It was necessary to make the values of brands, shops and products displayed (products have brand values displayed), and it is important for the user to understand how well brand/store values coincide with the values of the user himself. However, it is also important for the user to know how well brands/stores match their stated values. Initially, to determine the user's values, the user himself answers several questions in a test regarding his chosen important values:

Design solutions

Next, inside the app it is important for the user to see matches with their values for all brands/stores/products.
To match the values of the user and the brand, I have taken an element from the dating app as the basis.

How it works: There is a topic that is matched by two different users and "matches" (matching topics) are visually highlighted for them. But as it is also important to display matching values (figure in %), we need to display two figures for matching values:

1. Percentage of overlap between the user and the brand
2. Percentage of alignment between the brand's stated views on value and its actual attitudes (collected through user voting)

And one figure at values that are indicated as important to the brand but not important to the user (without match):

1. Percentage of alignment of the brand's stated views with their real cases (to calculate this point, a rating system is implied, in which any user can rate the brand's alignment with their stated values)

This is what it looks like in wireframes:

As it is important for us to display product/brand values before going to the product itself, but it is also important that this information does not take up too much space, I used horizontal scrolling for values bar.

Designing

After completing the UX part, it's time to move on to the visual part of the app. More specifically, transforming the framework into a full-fledged design. First of all, I created a UI kit to make things easier for myself.

UI kit and Components system

And then I started "giving life" to my wireframes. To do this, I needed to create a library of components (I made the components in three versions at once, as I was going to make the design in two resolutions for iOS and in one for Android).

UI Wireframes

Animation is an integral part of the design, so the clickable prototype was the final stage in the design of the app (the first version of the app).

Clickable Prototype