UI Design Case Study Yoma
Branding | Logo Design | Style Guide | Mockups | Prototype
Overview
What is Yoma?
Yoma is an e-commerce app that enables the creation of customized dresses. Clients choose with a configurator from different styles of dresses, fabrics, patterns, and colors. I created this app as a personal project because I wanted to show different styles (colors, typography) in my portfolio. In my portfolio, I wanted to show different styles.
My Role:
- UI Designer
Duration:
- 4 Weeks
Tools:
- Figma
- Photoshop
- Rotato
Case Summary
Background
To some females, it's hard to find dresses with the right dimensions. Furthermore, some clients like certain cuts or colors of a dress, but not the pattern or fabric. Other clients want to wear individual dresses that nobody else wears. Normally, other brands offer ready-made dresses that are supposed for everyone.
Problem Statement
Our users need an easy and quick way to change some details on existing dresses or create a completely new dress from scratch. User should be able to change every important aspect of a dress like cut, fabric, color or pattern. Besides, it should be possible for really creative users, to create own pattern for dresses.
Potential Solution
An ecommerce that offers dresses in various styles. The site enables to change every important aspect of the dresses. Besides, the ecommerce site enables, to create completely individual dresses from scratch. Additionally, users can create individual patterns via the ecommerce site.
UX Design & Research
The Yoma ecommerce was a free project to show different styles and designs in my portfolio. I created the Problem Statement that is based on the problems my girlfriend tells me when buying dresses. The User Persona is a bit based on her. The user stories and the rest of this project were authored by me based on my girlfriend's experiences and my own research. This allowed me to deepen my knowledge for the users and define their needs and goals to design a solution.
User Stories
User Flows
Based on the user persona and his story, I created the user flow to ensure users had an efficient and simple way to reach their goals in the app. User's needs were: to change measures on an existing dress so that it fits better, to create a dress completely from scratch and to create individual patterns for dresses. Next, I built the first sketches and prototypes to test the solutions with users.
User Flow 1
User Flow 2
User Flow 3
Wireframes
I sketched the most important screens of the app with pen and paper, representing the User Flow Diagram. I discussed these wireframes with my girlfriend and with some of my (female) friends that match most criteria (needs, age, job, education) from the User Persona. In the next steps, I considered the changes suggested by the mentor and created digital lo-fi wireframes.
Mood Board
When focussing on app style, I created a mood board for the Yoma ecommerce site aimed at people that want a more visual and succinct way to present a product. It features screenshots of a product configurator, a logotype, a clean and modern color scheme to create an overall modern look and feel. The general style of the app is feminine, emotional and a bit playful.
Color Palette
The main goal was to find a color palette, that let the app appear feminine and distinguish it from competitor apps that use mainly black and white. Therefore, I decided for pastel colors. A light beige and an emotional red are the main colors, accompanied by various lighter shades of beige and a light green.
Typography
I choose a type (Judson bold) that is remarkable and a bit playful for the logo and all headlines of the site. A discreet and clean type (Montserrat Medium) is used for copy text and label. Besides, this typeface has a high readability, which is important too.
UI Elements
When focussing on app style, I created a mood board for the Yoma ecommerce site, aimed at (not very tech-savvy) females that want to change or create individual dresses easily. It features a modern color scheme to create an overall emotional and feminine look and feel.
Breakpoints
I used a mobile first approach and designed all the content for mobile screens. To create responsive layouts, I used a 4-point-grid-system and adapted the most important pages of the app. I adjusted button sizes, image sizes and font sizes to bigger screens in order to optimize user experience. In the desktop layouts, I kept the hamburger menu to make the usage of the site seamless to the user.
Interactive Prototype
I created a digital prototype and shared it with 3 friends to gather feedback and uncover potential issues. After the feedback, I changed spacing, button sizes and font sizes to improve usability.
All Layouts
Here you can see all layouts for the Yoma ecommerce site.
Key Learnings
- Every UI element, colors, spacing, typeface, and visual hierarchy plays an important role in creating a cohesive user experience
- I learned how typography changes the overall look and feel of a site
- I learned, how round shapes for UI elements (accordions, buttons) and pastel colors create an overall playful and more feminine look and feel
- I learned how to create a product configurator that enables to change every important aspect of a product
Next Steps
- I'll test different versions of these layouts with AB testing
- With the final layouts, I'll create a prototype as if it were the real app
- I'll test this prototype with various potential users, do interviews with them and optimize the layouts of the app
😀 Thank you for scolling
More Works
Discover case studies for apps and websites with different styles.
