Modura

Modura is an e-commerce clothing brand that offers affordable business wear while staying on top of the latest fashion trends. Targeted at young professionals who juggle the demands of professionalism with their desire for personal style, Modura aims to strike a balance between the two.

Project Overview

ROLE

UI Designer

TIME

CHALLENGE

As an Ecommerce brand, the primary concern is to highlight the convenience and flexibility of online shopping.

2 weeks

TASK

A DesignLab UI challenge to create an IOS mobile platform and branding

TOOLS

Figma

SOLUTION

A minimalistic, geometric shape-centric design with vivid colors that appeal to the younger generation's aesthetic.
The browsing page offers recommendations based on categories and popular items.
A simple product page featuring detailed information and order options.

Wireframes

Lo-Fi

Mid-Fi

View More Lo-Fi

View More Mid-Fi

Branding

Logo

Version 3 was the final logo design chosen. I focused on a minimalist, geometric design to reflect the current millennial trend. Before making the final decision, I reviewed the top three designs that aligned well with the brand image and ultimately chose the current one.

Colors

Primary

Secondary

Neutrals

Buttons

Normal

Hover

Disabled

Typography

Header 1
Jost 36px Extra Bold
Header 2
Jost 30px Semi Bold
Header 3
Inter 70px Semi Bold

The font JOST was used in varying weights, ranging from Extra Bold and Semi Bold to Regular, for the mobile application.

Body 1

Jost 16px Regular

Illustration

Using overlapping geometric shapes, I aimed to connect the design back to the brand logo and create a cohesive visual pattern throughout the application. In addition to shapes, I incorporated lines into the design to add more detail to the background. These geometric elements are repeated throughout the app.

Final Screens

Since different countries have varying administrative divisions, such as prefectures or states, in the "Create New Account" section, I decided to include a dropdown feature that adapts to the user's region. Indicators were also added to show the correct completion of each section, further guiding users through the process.

For the visual hierarchy on the home screen, I focused on showcasing the bestselling products to make it easier for users to find the most popular items. Additional products were organized into three main categories to improve accessibility. On the individual product screen, I included details such as reviews, ratings, and coupons to enhance interest and establish the product’s reputability.

Final Prototype

Learning Outcome

This project was part of my 6-month UI design course at Design Lab. Through consistent feedback from my mentor and multiple iterations, I learned about the process from branding to prototyping for a company. I also gained a deeper understanding of the importance of typography on user flow and how a small variation or mistake can impact the overall interpretation of the app. The project gave me more insight into color theory and brand aesthetics, and how they translate into the actual production of a mobile app. I also experimented with creating visual cohesion by developing different versions of the color pattern and the elements used in the layout. The most challenging part of this project was creating a visual component that not only reflects the brand’s values but also appeals to the targeted users. If I were to revisit this project, I would explore alternative placements for the components to see how it impacts the visual hierarchy of the overall design.