App Mobile & Ui Kit

Makeimpact

January to June 2021
Image of iphone with interface in the mockup

Problem Overview

My Role

Product designer, UI KIT

My Team

Quick scope of the mission

Our mission in MakeImpact is to level up the design and structure in design team. Also, to get up my level of English for my next story.

Who is

MakeImpact ?

Make!mpact is a fast-growing Nordic fintech startup visioning a world in which the gain of financial wealth does not compromise the future of our planet and our communities. Our mission is to encourage, guide and mobilize everyone to generate a positive impact through investing. For too long we have overlooked our power as citizens, consumers, and investors to shape our present and future.

Mockup iphone with wooden hand with interface of mack impact
Define

The Objectives

→ The company hopes to reconsider the app's “matching” feature. This is important because it allows users who want to invest to find companies that match their values (women's rights, poverty eradication, access to education, etc.).

→ We had a problem with the frequency of use of this feature, because the matching system via the use of filters is too complex and discouraging.

→ How to allow users wishing to invest to easily find companies that correspond to their values?

iPhone mockup with interface
Define

Our Goal

1

Have positive feedback on the user of the feature match.

2

Have more information and transparency about publicly traded companies

3

Build a company you can trust in terms of sustainable investment

Define

Check in before start

By starting the application in detail, we could observe some problems to overcome before being able to work on the re-design of the feature match. Because we were missing a synthesis of user needs and a tone of voice, as well as a UI KIT.

Mission 1

Build an UI Kit

The first mission, was to solve their problem of designing without guidelines with the creation of a UI kit. This UI kit allows having a better coherence within the product, but also to save time on the design as well as the development. So the product team can more easily focus on user research and design.

Image with tips for what is a ui kit
Format list
1. Make an inventory

Checklist of existing components that are used in different parts of the application, in order to identify duplicates and visualize missing components.

Icon- 2 people
2. Build together the ui kit

Realization & animation of workshop with the developers & designers of the company in order to have their feedback and to involve them in the ui kit.

Task - icon - document
3. Deliver the UI Kit

Production of an Adobe XD document with the components sorted by major categories and accompanied by guidelines for future designers.

icon for share
4. Share the UI kit

In order to improve the benefits of a UI kit, use & answer questions, we held meetings throughout the project.

A Selection of workshop
image wit people
image result of workshop
Workshop
Make Impact UI KIT
Make impact UI KIT
Mission 2

Co-create the tone of voice

During the creation of the UI kit, we realized that make impact was speaking in an uncoordinated way between the application, the social networks and the e-mailing. In order to make this way of communication more coherent, we proposed to make a tone of voice. In addition, make impact wanted to change their way of communicating in order to be more human and to stand out from the competition.

Tips for what is a tone of voice
Icon - team & collaborate
Collaborate with teams

In order to improve the benefits of a tone of voice, the use & answer questions, we held meetings throughout the project.

Icon- 2 people
Co-create the tone of voice

Realization & animation of online workshops to define together the 4 main tones of voice of Makeimpact

Task - icon - document
Deliver the tone of voice

Creation of a synthetic guideline from voice tones and some examples of dos and don'ts.

icon for share
Distribute the tone of voice

Presentation of the tone of voice in order to present it to everyone & posting of the documents on the walls so as not to forget how to speak to the customers.

image of tone of voicetone of voice do and don't
Define tone of voicedefine tone of voiceDefine tone of voice
Mission 3

User research

After creating a UI kit and knowing how to talk to users, we needed to understand their needs. We asked if there was any user research, yes, but it was not properly used and analyzed, so we started with that. Then start designing the new feature match.

icon - crayon
1. Refined existing data

Review of existing user interviews, analysis of information and highlighting of user problems and needs

Icon- 2 people
2. Conducting online interviews

Interviews (name) of (number) online (name of tool) focused on the feature match

Pen tools - icon
3. Crafting the solution

-> Zoning
-> wireframes
-> prototyping

content paste - icon
4. Adapting with guerrilla testing

Rapid testing during the pandemic with Make!mpact members representing the target

zonning image
user interviews
Prototype
iphone in mockup- feature match
iphone in mockup- feature match
iphone in mockup- feature match
iphone in mockup- feature match
Design

Key Feature

iphone in mockup- feature match
icon love
Match with companies

Find out which companies are in line with your values and in which to invest sustainably thanks to a precise filter system.

ion - ask
Be informed in a transparent way

Keep up to date with the news of each company by consulting their dedicated and updated files

iphone in mockup- feature match
iphone in mockup- feature match
icon - give love
Be accompanied

Let us guide you and learn the technical terms of the stock market in order to make reasoned choices

Reminder

Learning

Choosing the right design tool :

Choosing the right tool to design and prototype is essential. Here, we had to use Adobe XD. This tool, although sufficient for small projects, was not suitable for the Make!mpact organization. It proposed a collaboration solution that did not meet our needs and did not offer the branching system that would have been very useful for testing features. We suggested to the company to use Figma, which met the requirements of designers and developers who have access to the code directly in the tool.

Constant communication:

Many designers want to undertake projects that are of obvious interest to the company and to the users. However, it is important to involve people from other teams from the start and to continually explain and discuss the progress of ongoing projects. This helps to get buy-in from stakeholders and to get different points of view to create a better product.

Next Project
Jidéaire
arrow