Klotho is a responsive online shop for women that provides versatile, stylish clothing that bridges the gap between formal and casual wear. Drawing inspiration from leading fashion brands, our user-friendly platform makes it easy for women to discover and purchase outfits for various occasions at affordable prices. We are dedicated to making fashion accessible and enjoyable, ensuring a seamless shopping experience for all our users.
Overview
Project Overview
Timeline
8 Weeks
Team
Group of 3
Role
UX/UI Designer
Tools
Figma, Figjam, Photoshop, Canva, Google Form
My Contribution
I was one of the UX/UI designers. I was involved throughout the entire process, starting from conceptualization to creation of the prototype.
Problem Statement
Women often struggle to find clothing that strikes the right balance between formal and casual for various occasions. Many existing options are either too formal or too casual, making it difficult for women to find versatile outfits that suit different events without compromising style. Additionally, coordinating outfits can be time-consuming and overwhelming, especially for those with busy lifestyles.
Business Goals
Offer Versatile Clothing Options: Provide a curated selection of outfits that are perfectly balanced between formal and casual, catering to a wide range of occasions.
Enhance Shopping Experience: Implement a mix-and-match feature that allows users to easily coordinate outfits, reducing the time and effort required to put together stylish looks.
Increase Customer Satisfaction: Ensure the clothing offered meets the needs of women seeking versatile, stylish options by providing high-quality items at an accessible price point.
Occasion-Based Shopping: Develop an intuitive, occasion-based shopping experience that helps users quickly find appropriate outfits for different events.
Target Users
Design Process
Women with busy lives who need versatile, stylish clothing that seamlessly transitions between semi-formal and casual occasions.
We Concentrated on designing a website for both targets
Our team of 4 followed a Double Diamond approach based on the Design Thinking methodology. It was not a linear path; we bounced between stages as the project progressed.
Women who struggle with outfit coordination for specific events and seek a convenient shopping experience with curated, occasion-based outfits that aren’t overly formal.
Discover
Observing, listening and learning
Competitive Analysis
We analyzed four similar websites and began the design process with a thorough competitive analysis. This approach provided insights into essential features and current design trends, helping us understand crucial functionalities and identify gaps or opportunities for innovation.
Above, we outlined the key aspects that influenced our design process.
Examining competitors’ navigation helps us ensure that information is easily accessible for users.
Reviewing competitors' features allows us to integrate valuable functionalities into our website.
Analyzing competitors' UX/UI reveals current design trends and best practices for creating a modern and visually appealing website.
Top Key Takeaways
Survey
We conducted an online survey with 11 questions and 32 participants to gather insights on users' concerns and needs. our goal was to understand the essential factors for users when buying clothes online and identify any barriers that might prevent them from doing so. below are the main challenges highlighted by users regarding online shopping.
1- User found it challenging to lack of information about the product on the clothing websites.
2- Users found it challenging to asses the quality of products related items on the website.
3- Users find the feature of viewing clothing on peoples body is helpful.
I developed a script and conducted interviews with 8 people who either shop for clothes online or have stopped doing so, aiming to understand their challenges during the purchasing process.
%60 of users prefer to create their own styles, while %40 percent lack confidence in choosing clothes online based on their taste, often purchasing items in the same color due to uncertainty in color coordination and a need for guidance.
%50 of participants often find it difficult to complete their online purchases, especially when browsing through many clothing pages. They particularly struggle when trying to buy matching sets, as they have trouble visualizing how clothes will look together.
Our participants provided valuable insights that underscored the importance of reviews and quality photos in showcasing clothing. In particular, users were looking for suitable categories and filters for easier online shopping. Also, a large percentage of users preferred to shop in person due to ordering the wrong size of clothes in online shopping.
what we understood from interviews:
Affinity Diagram
Interview
Conducted user interviews to gain a deep understanding of users' problems with the online shop
Some quotes mentioned from interviews:
"Some websites are very difficult to work with, complicated words to describe clothes and inappropriate categories are really awful"
"A big frustration was ordering from a site with misleading images. The clothes looked great online but were poor quality in person."
"the feature that helps me the most in deciding to make the purchase is customer reviews. "
"The biggest challenge is ensuring the right fit and quality. Without trying them on or seeing them in person, it's hard to know if they'll be comfortable or look good. "
Top Key Takeaways
Users struggle with finding the right size for their clothes.
Users face challenges in assessing product quality during online purchases.
Users prefer reviews with pictures to see how clothes look on real people.
Users need simplified navigation to improve their browsing experience.
Define
Establishing the priorities and key features
Persona
Based on our research findings, we built one primary persona to build empathy and keeping the user at the center of the design process
Designing the information architecture
Site Map
User Flow
Develop
Exploring various ideas and solutions
Challenges
Solutions
1
visual aids by Pictures
4
Implemented a navigation bar with featuring pictures for each item to help users easily identify and select products.
2
Enhance User Engagement
Increasing Purchase Decisions
Added a section for reviews with customer photos, offering better visual context for informed purchasing decisions.
Designed a product display that includes clickable color options showing real photos from various angles and a zoomed-in fabric view, offering a detailed perspective on the product for detailed fabric inspection.
Enhance User Experience Through Visual Quality
3
Ensuring the Right Fit Without In-Person Try-On
Implemented a Fit Assist feature that asks users a few questions and provides instructions on how to measure their size accurately. This feature then recommends the correct size based on their measurements, helping ensure a better fit and reducing the uncertainty of online shopping.
5
Enhance User Trust for clothes quality
Creating a navigation bar that allows users to quickly find products by category for a seamless shopping experience.
Implemented a sticky navigation bar that stays visible as users scroll, making it easy for them to quickly locate and select items like "Sale."
Website Mid-Fed Wireframe
We sketched some ideas and designed low-fidelity wireframes that would allow us test and get feedback quickly.
Home Page
Sketches
Dresses Page
Menu
Product Page
Deliver
Refining the final design
Here are the planned brand attribute
Natural
Elegant
Modern
Mood Board
UI kit
High Fidelity Wireframe
Here are the final high-fidelity desktop and mobile designs that we've designed after going through multiple iterations on different pages.
We have designed over 30 desktop pages.
Home Page
Menu
Dress Page
Dress Page
Product Page
Quick View
Find Your Size
Checkout
We have designed over 30 Mobile pages.
Register Page
Home Page
Dresses Page
Dresses Page
Product Page
Purchased Page
Checkout
Favorite Page
Choose Size
Filters
Hamburger Menu
Hamburger Menu
Iteration and Usability Test
Throughout the project, we went through multiple iterations, driven by the insights we gained from usability tests. These tests were instrumental in shaping our decisions and constantly enhancing our project.
2
We developed four different concepts for our homepage. After testing and refining them, we selected versions 3 and 4 for the initial phase.
Users particularly favoured design 4, appreciating its dedicated section for showcasing new occasions. This layout simplifies the shopping experience, making it easier for people to find and purchase items.
Version 1
Version 2
Version 3
Version 4
1
Homepage Concept Development and Selection Process
Knowing their location on the website was important to users during usability tests, so we added Breadcrumb navigation at the top of the pages to enhance clarity and reduce confusion.
Users initially missed that there were more pictures available for scrolling. To address this, we added a scrollbar and scroll indicators to make it clear that they can scroll down to view additional images.
A
B
Users mentioned that having the favorite heart icon directly on the picture feels more accessible and familiar to them.
C
Enhancing User Navigation and Interaction
Our goal was to find a hero image that instantly conveys our core message: a curated selection of outfits that seamlessly blend formal and casual styles, making it easy for users to find the perfect look for any occasion.
3
Finding a Hero Image That Conveys Seamless Formal and Casual Style Integration
Reflections
What I have learned?
The critical role of user research in designing intuitive and effective solutions.
Collaborating with cross-functional teams to align on vision and ensure timely project delivery.
Iterative testing and feedback loops significantly enhanced usability and user satisfaction.
Creating a UI kit to maintain design consistency and streamline team communication.
What Next?
Finalize the mobile version of the design to ensure seamless adaptability across devices.
Conduct further usability testing and iterations to refine the user flow and enhance the overall user experience.