top of page

Modura

Modura is a new eCommerce clothing brand designed for trendy men and women between 18 and 25 years old. These individuals are early in their careers and are looking for an affordable solution for business casual clothing to wear to their jobs in urban areas. They are fashion-forward, and conscious of trends. They want to dress for the jobs they want without appearing overdressed.

Role: UI Designer

Industry:  Fashion | Retail | E-commerce

Duration: 24 hours | Mar 2023

Tools:  Figma, pen and paper

iPad Mini.png
iPhone 12 Proe.png
iPhone 12 Proe.png

Purpose

Modura is a new eCommerce clothing brand that wants to add three screens to its mobile app - Sign in / Sign up screen, screen showing details of an individual item of clothing and account settings screen.

Challenge

Screens should be designed in a way that the app projects affordable clothing that looks chic.

UI process

As a UI designer on this project, Modura wanted me to focus on just designing the three mobile screens to enhance the visual appeal of the app. User research was already conducted by Modura's research team.

Keeping user needs and project needs in mind, I came up with the below UI process.

Empathize

Define

Ideate

Prototype

Test

I browsed through user research data provided by the Modura team to empathize with user needs and make sure the product is designed to simplify user interface. The problem statement was already defined by the Modura team. I wanted to deep dive into the findings of user research task and know how was the problem statement derived. My area of work on this project was to ideate on the User interface of the product, develop a prototype and run iterations post the usability test conducted by the Modura team. 

Problem

During research, Modura team got below response from the user interviews.

81%

Users said they shop for clothes online and look for affordable options.

98.4%

Users said they like wearing trendy business casuals at work that look chic and are not expensive. 

67.8%

Users said they want like have options to customize preferences and app themes.

This brought them to the primary problem, how might we help travelers discover new locations, get information and travel tips from travel experts, and increase user traction?

Goal

Build three screens for Modura's mobile app - Sign in / Sign up screen, screen showing details of an individual item of clothing and account settings screen. The design for the mobile app should promote affordable and trendy clothing for target users aged 18 to 24.

Let's know the users more

After thoroughly analyzing user research data, I categorized Modura's list of users as mentioned below:
 

  • 18 to 25 years old men and women

  • Digital technology savvy

  • Trendy and fashion forward working professionals

  • People looking for affordable urban business casuals

  • People who don't want to look overdressed at work.

  • People who shop for office wear online


I recognized the roadblocks and pain points to correct, by identifying improvement opportunities. An example of this would be understanding the average price point the users would like to buy clothes at and their buying behavior on an eCommerce site.

I was able to hone the idea of providing them an easy to navigate user interface by incorporating UI design principles and providing options to customize preferences in account settings. 

Let's know the competitors more

After studying Modura's competitor analysis report, I was able to draw below inferences:

  • There are very few eCommerce clothing brands that focus on affordable clothing for working professionals..

  • Product images don't match the actual product in many websites which increases returns and exchange.

  • Not all websites focus on providing detailed information about the product which makes the user search for information on other websites. This can lose customers and affect business.

 

Identifying gaps and opportunities

How might we help working professionals start buying clothes from Modura, stay engaged and return as a happy customer amidst heavy competition.

Through detailed analysis, I came up with below ideas:

  • Make Sign in / Sign up process simple.

  • Add accessibility icon and sizing options to images that display adaptive clothing

Initiating product designing

In the design stage, I made sure user goals align with business goals while keeping technical considerations in mind. I started working on building information architecture - sitemap, user flows and task flows. This was followed by low, mid and high fidelity wireframes.
 

 Wireframes

Sketching wireframes laid a great foundation for building mid-fi wireframes. I incorporated few iterations here and added details such as titles.

Desktop - 5.png
MF.jpg

UI Component library

Desktop - 7.png

Brainstorming logo designs

I wanted Modura logo to be simple, modern, professional and easy to read. I sketched many concepts and finally selected the one next to the blue arrow in the image on the right. 
 

IMG_3227 1_edited.jpg
IMG_3228 1_edited.jpg

Hi- fi  wireframes

Frame 1.png

Final product

iPad Mini.png
iPhone 12 Proe.png
iPhone 12 Proe.png

Modura journey

Being one of the first UI projects, Modura helped me gain knowledge on designing logo, brand style tile and e-commerce user interface. I have since then used this learning in all my projects. My initial biases with regards to UI designing changed a lot when I built the screens for this product. 

bottom of page