UX / CX / UI / Product designer

Portfolio

B2B UX Case Studies

WEB 3.0 UX Case

Saas Experience

User Interface

Motion

Recycling water with WEB 3.0

Design System

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.

 

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

I manage to create 2 personas that will represent the goals and the needs of the larger group in the organization.

Case Study: Startup Investment Plateform - Byrssa

BYRSSA is a trusted European digital execution platform for SAFE based seed funding and Security Token Offering.

I purpose :

  • Digital marketplace that connects all players in the Fintech ecosystem.
  • It facilitates the end-to-end investment process between fintech start-ups and professional investors.

The Problem

 
Need a platform to unite the two parties then in one platform i need a complete system to manage contracts and communication between funders and funders. So that all needs can be accommodated by one platform, making it easier for bookkeeping and data retrieval.
 

 

The Solution

Need a platform to unite the two parties then in one platform i need a complete system to manage contracts and communication between funders and funders. So that all needs can be accommodated by one platform, making it easier for bookkeeping and data retrieval.
 

UX Objective

I will address those concerns by designing a place for funders and fundraisers to meet. So that they can efficiently and quickly view, choose, transact and communicate in one platform.

 

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

I make the first page of the requirements provided by the stakeholders.

When the first page has been approved, i develop it by including the required features based on the desired user criteria. Several iterations are carried out to find the right flow to solve user problems so as to produce a final result that is suitable for use by users.

Then i divide into 2 flows. The first one is the startup flow, starting from startups wanting to register on the website, filling out and making funding, to making contracts with investors.

The second is the flow for investors. Just like the flow for startups, this explains how the process of investors entering this website, then wanting to register until they find the right startup to invest in and make a contract in it.

Lastly, the end of this process is to send the contract to a notary for review and it will be updated on the funding detail page automatically the flow of the contract is carried out.

Here are some images of the redesigned application with a gamified functionality then i finish all the features that the client wants which takes 2 weeks to complete with some changes and feedback from the client. I combine them into one flow which is expected to make it easier to understand what has been made.

The following is an example of all the files that have been created:

The Conclusion

Then i finish all the features that the client wants which takes 2 weeks to complete with some changes and feedback from the client. I combine them into one flow which is expected to make it easier to understand what has been made.

The following is an example of all the files that have been created:

By Client

User Interface

www.vedett.be

UI redesign for Vedett. working on the branding and UI of that beer showcase site. Working on Worpress Template.

www.abconcerts.be

www.archi2000.be