Loading...

Lifeclick app v.1

Mockup of a cell phone with the home page of the lifeclick v1 project applicationMockup of a cell phone with the cryptocurrency page of the lifeclick v1 project application

UX/UI Design

Branding

Prototyping

Year
2021

Project time
4 months

Tasks
Ideation;
Visual Identity;
Research Methods;
Wireframing;
Interactive; Prototype.

Overview
This project resulted from an academic briefing, it was a team project, with the aim of learning new testing techniques and ux/ui methods. It was a project with the aim of trying to significantly reduce a major problem present in society, which will be possible to see throughout this presentation.

Goals
The aim of this project was to learn how to design and develop a process for creating an application, from scratch. Starting by defining the idea, doing research and market studies to find out what already existed and if our idea was innovative, making the brand's branding follow this idea, doing studies and testing on the target audience, making wireframes, and finally making a prototype.

Tools:

Ideation

Idea
The idea of ​​creating an application that could be donated without spending money came from branstorming with the team involved in this academic project. The idea appeared while we were talking about ideas related to current affairs. In 2021, the world was going through the covid-19 pandemic, which made it difficult for people to help those most in need, it was also at that time that cryptocurrencies started to be more talked about, so with some knowledge we already had on the subject of cryptocurrencies, the idea came up to develop a mobile phone application that had a “mining” mechanism (in short, it is a term for creating cryptocurrencies). So bringing the two themes together came the magnificent idea of ​​creating a mobile phone application in which users could donate to their favorite institutions, without spending a single cent.

Visual Identity

Project Lifeclick v1 logo

Logo
From the idea, we began to sketch the logo, and as the concept touched on two important themes, we wanted to create a different and modern logo and visual design. The logo had to be something that could be understood perfectly, that anyone looking at could understand the brand's concept, so we developed this logo. The heart represents the good deed, the hands represent the action, and the coin depicts the method used in that action.

Colors
The blue and pink tones were chosen because we wanted to represent the futurism, innovation and technology of this application in a way. Therefore, the colors representing these contents are blue and pink, which when mixing both gives not only a better appearance but also a futuristic look.

research Method

Card Sorting
As a team we decided to test the card sorting method. This method aims to understand each user's journey through the application to perform certain functions, and works as follows: define and list the topics that we think make sense for our application, such as “home menu”; "information"; "about us"; “suggestions”; among others and we wrote on several cards, then we selected several groups of people, but mainly the target audience. These groups of people individually have to organize the cards in a way that makes sense, organizing the cards creating a kind of sitemap (app structure in this case).

Testing
The card sorting method was then tested on people who would like to use this app. We carried out 13 tests on our target audience and were able to define the best structure for our application.

Wireframing

Image of wireframes from the lifeclick v1 project

Wireframes
The creation of wireframes is always essential, but before this process comes the creation of sketches, which is quite simple, defining the location of content and functions, thus creating possible layouts. In wireframes, we transfer these sketches to digital and work on them better, organizing all the processes and utilities of the app. In short, wireframes are low-fidelity prototypes, without images or content, which are used more to organize the layout of each page and the relationships between them.

Prototyping

mockup of several cell phones, with images from the pages of the lifeclick v1 application

Prototype
To finalize the academic project, we were asked to create an interactive prototype, which, unlike wireframes, is a high-fidelity prototype, as it already contains all the content, and at this stage is where we bring together all the previous steps and apply them. in this one. The interactive prototype only serves to demonstrate its interface, the relationship between pages and the actions that would be implemented in the “real” application, as this is just for demonstration. In this same phase, we carried out several unmoderated usability and UX tests, using the Usability Hub tool, to understand whether users could easily perform certain actions. After collecting this information, we made the necessary changes.

The prototype is not available due to Adobe XD being under maintenance.

Next project

Lifeclick App V2  - Donation App

Mockup of several cell phones with application pages from the lifeclick app v2 project

Previous project

Sportag