Tiago Muller | Koji UI Kit Case Study

01

Research

At this stage, the focus was on conducting market research to evaluate the offerings of UI kits with similar themes. This involved analyzing the user interfaces and usability of existing products, as well as gathering style references to guide the development of the new product.

01

Research

At this stage, the focus was on conducting market research to evaluate the offerings of UI kits with similar themes. This involved analyzing the user interfaces and usability of existing products, as well as gathering style references to guide the development of the new product.

02

Defining Guidelines

After compiling and analyzing the research data, we consolidated the findings to establish the project guidelines.

02

Defining Guidelines

After compiling and analyzing the research data, we consolidated the findings to establish the project guidelines.

03

Creating Elements

With these guidelines in place, we initiated the creative phase by freely generating elements and screens. We then selected and refined these components, further reinforcing the guidelines. Additionally, insights from research on essential e-commerce elements were used to ensure the design adhered to best practices and met identified needs.

03

Creating Elements

With these guidelines in place, we initiated the creative phase by freely generating elements and screens. We then selected and refined these components, further reinforcing the guidelines. Additionally, insights from research on essential e-commerce elements were used to ensure the design adhered to best practices and met identified needs.

04

Design System

To maintain an organized workspace and create an easily editable system, I began structuring it from the first approved elements. This approach facilitated the workflow and prevented potential overwhelm during later stages.

04

Design System

To maintain an organized workspace and create an easily editable system, I began structuring it from the first approved elements. This approach facilitated the workflow and prevented potential overwhelm during later stages.

05

Handoff

After finalizing and approving all elements, I added usage instructions, along with tips and examples, to enhance the overall template experience.

05

Handoff

After finalizing and approving all elements, I added usage instructions, along with tips and examples, to enhance the overall template experience.

Koji

Project Overview

DeCD

01

Research

01

Research

02

Defining Guidelines

02

Defining Guidelines

03

Creating Elements

03

Creating Elements

04

Design System

04

Design System

05

Handoff

05

Handoff

Framer Template

Final Design Showcase

Other Projects

Varda

Varda

Dremica Website

Dremica Website