UX / CX / UI / Product designer

Portfolio

Investment Plateform Blockchain

Study Case: Recycling water with WEB 3.0 - Botanical Water

Botanical Water is a new way to filter and distribute billions of litres of safe drinking water that is currently discarded every year. The foundation exists to bring this water to the people who need it most.

The Problem

Many areas do not get enough clean water, so that it interferes with daily needs and may cause health diseases. How we can easily provide and order clean water to those in need so that they can meet their needs.

This is a new realm that has not many actors in it. So the client wants to provide an innovation for water filtration which client can call water production and water ordering. So that can provide water in areas that lack clean water for the purposes of life in a more structured and efficient manner.

Actually they already have a form of display from the dashboard. However, Fujitsu wants to update the User Interface and also some process flows so that Botanical Water becomes more user frendly. Therefore the main task here is to evaluate and redesign the old look to the form of the display and the process flow of each feature to a newer and refreshing form.

The Solution

I redesigned Botanical with a newer and contemporary look and also by analyzing workflows and improving them to make them look newer and easier for users to use.

UX Objective

I try to bridge the company that will carry out water supply and the process of developing water production infrastructure with the hope that the products will be widely used in one platform to facilitate the process of supplying and producing water.

My Design Process

1. User Research

– Identify the problem
– Identify the solution
– Define the objectives
– Sector Competitor Analysis (moodboarding)

2. Define

– User Personas

The User Research Phase

1. User Personas

I created 2 personas that represent the problems faced by every person or field who plays a role in the transaction process between the funder and the fund seeker.

Two types of user personas that represent each goals of the organization.

The Design Process

1. Mock Up

First, i am asked to make an onboarding flow by the client which is the registration process. Starting from the user registering, filling out the KYC form after registering, then the form will be checked and sorted by a real human from the Botanical Water admin side. After that, if they pass the user will get a notification to fill in the details of their company which they will register.

After the registration flow is approved, i create an iteration of the provided flow. Starting from the dashboard page, company, to the user profile page i redesign from the old look.

On the company page, what is interesting is the graph to find out the company’s performance which includes how many liters are produced for sale, how much water is for own use, and how much water has been sold.

This is good for assessing company performance for internal teams because we can see and evaluate the company’s monthly performance.

Not only designing the dashboard page, i also designed an email template for notifications via email when doing something and requiring notifications to the user’s email on the Botanical Water platform.

I also improvise in the form of small animations when i successfully make a market offer and when no search results are found.

The Conclusion

Very interesting experience to be able to work with a company as big as fujitsu to redesign the appearance of a platform from them. I also learned a lot about good and structured design through components that are integrated with the system design and make it easier for developers to use spacing and spacing through autolayout.

Study Case: Fluxymat Atomic Design System

Context

As part of a digital transformation project, Fluxys, which is a large company, wanted to create a specialized department (Digital Lounge) to open up to a new ways of working and mindset. The main idea id to create each application like a new start-up. Methodologies such as design thinking and scrum have been implemented and practiced.

What is Fluxymat

This is the atomic design system for Fluxys Digital Lounge. Fluxys companies that develop various platforms for their companies that are going digital really need what is called a design system. Because with the design system, can create various kinds of products with references and styles that still represent the company. My Role as UX-UI lead was to create, structured, develop, update and design FluxMat.

What is a atomic design system

Design systems can help bring together the various perspectives of people working on a project. This design system will unite the thoughts of everyone whos working in creating a digital product, starting from building tools, guidelines, and principles.

Finally i thought to create a design system to unify it all. By adopting the concept created by Brad Frost, namely atomic design, this is the order in atomic design. Scientifically, this is the meaning of each type of atomic:

Atom, is the smallest substance that can not be divided further. A molecule, is something composed of two or more atoms bonded together by chemical bonds. An organism is an assemblage of molecules that influence each other in such a way that they function stably and have the characteristics of life. The template is a composite of several organisms. As the name suggests, it is the blueprint of a web page. Pages are the final product of atomic design. It is a template filled with real data. With this method, you have to start designing from the smallest components. These components include labels, paragraphs, headings, and buttons.