Finding the real
design question.
Keep the brand expressive without letting editorial moments compete with product discovery.
Sahebeh BabaeiProduct Designer
E-commerce · 2023
Khatoon
Fashion commerce with a confident editorial rhythm.
RoleUX/UI Designer
StatusPortfolio project
FocusFashion · E-commerce · Responsive · Visual Design
A fashion e-commerce concept combining strong visual merchandising with an uncomplicated purchase flow.
FashionE-commerceResponsiveVisual Design
05 / Text Story
Khatoon
Sustainable Fashion Adaptive Website Discover "Khatoon" – a sustainable fashion brandborn to make a positive impact. With the fashion industry's global prominence and growing popularity, our concept project took flight. At "Khatoon," we believe in a fashionable, sustainable world. Our website inspires people to embrace sustainability without sacrificing style. Join us on this journey towards a greener and trendier future. Together, let's redefine fashion and make a lasting difference.
06 / Text Story
Project Overview
As a student at UXland, my assignment was to create an adaptive and sustainable fashion website for both mobile and desktop users. The details included optimizing user experience, implementing eco-friendly design elements, and ensuring seamless functionality across devices. Throughout the project, I focused on balancing aesthetics and sustainability to deliver a user-friendly and environmentally conscious platform.
07 / Process Steps
How the work progressed
- 01Duration
Whitin 3 Month
- 02Team
3 People
- 03Role
UX/UI Designer
- 04Tools
Figma, Figjam, Photoshop
08 / Text Story
Stakeholder needs
During the initial stage, we began by identifying a hypothetical stakeholder for "Khatoon " and carefully outlined their specific requirements and constraints. Considering "Khatoon" is a nascent sustainable brand with a limited product range, our focus was to create a website that maximizes sales potential while emphasizing its eco-friendly values. Given that this is the brand's debut website, our primary goal was to develop a simple yet user-friendly website that lays a strong foundation for future growth and expansion over time.
09 / Text Story
Challenge
Motivating customers for sustainable products is tough; fast fashion's cheaper and sells faster. Spread sustainable fashion through education and awareness. Inspire the third group by incorporating appealing designs into sustainable fashion.
10 / Text Story
Goal
Promote sustainable practices to empower individuals. Emphasize product sustainability for increased transparency. Create a friendly and authentic website experience. Educate and encourage customers to choose sustainability. Improve the user experience through a user-friendly interface and 3D measurements for accurate product customization and visualization.
11 / Image Showcase
Design Strategy
Our exciting 3 months design sprint was split into 5 key phases, and it's important to keep in mind that iteration is a must in every single one of them.
12 / Process Steps
How the work progressed
- 01Empatheize
- 02Define
- 03Ideate
- 04Prototype
- 05Test
13 / Text Story
Survey
We created an online survey to collect quantitativedata from people of different ages with a varieties sizes. This survey had got 100 responses. The result of this research: “The first part consisted of a demographic survey, which revealed that our target audience includes individuals with allergies to certain materials who are interested in using sustainable clothing. We also discovered that our target audience is seeking more guidance on sizing and the good news is that people are enthusiastic about embracing sustainability. They prefer customization and taking measurements using 3D measure.” The survey helped us to know who is our users and what is their real needs.
14 / Gallery
Selected screens
16 / Image Showcase
Affinity Diagram
Users prefer to have a seamless and enjoyable shopping experience when selecting clothing that suits their personal style. These factors are important and should be considered: Product variety Affordability Size and information Material quality Color option Customer reviews and ratings Fast and reliable shipping High-quality product images User-friendly navigation
17 / Image Showcase
Competitive Analysis
Khatoon has many main competitors who have the same business model and same features. We organized all features they have and started to research how useful are they and how can we improve those features our platforms and design the new features for users' convenience, and business goals.
15 / Text Story
Top Takeaway:
Effective Size Guide Implementation Filter Functionality for Streamlined Shopping Customization Sets for Personalization Determined a Minimal and Modern Design Identified Categories of the Navigation Bar
18 / Image Showcase
Challenges and Solutions
After analyzing survey and competitive analysis data, we understood the challenges associated with our project and incorporated solutions into our design.
19 / Image Showcase
Card sorting
We improved navigation by using open card sorting with 15 participants, allowing them to create their own categories for faster and easier information finding. Here's a sample card sorting result.
20 / Image Showcase
Persona
We defined the user's persona to analyze people's behavioral patterns, and analyzing and synthesizing research helped me make accurate product design decisions.
21 / Image Showcase
User flow
Introduce what the viewer should notice in this image.
22 / Image Showcase
Site Map
Introduce what the viewer should notice in this image.
23 / Image Showcase
Sketches
We started our design with paper and pencil and that gave me some idea of how I wanted to start my design.
24 / Image Showcase
Wireframes
Mid-Fidelity quickly led us to create a clickable prototype. before designing the High-Fidelity wireframe we tested the prototype with the users. Based on their feedback we redesigned several screens and implemented the user interface.
25 / Image Showcase
Mood board
We created our mood board based on nature nature, Organic shapes and soothing colours and Careful consideration of brand attributes: safety, sustainability, and identity.
26 / Image Showcase
Ui kit
This living document ensures consistent visual design as the website evolves. Aspects considered: Neutral, nature-inspired colors for inclusivity. Sleek Sans (Frank Ruhl Libre) and serif (Montserrat) fonts for a soft and safe feel. Abundant white space for clarity and minimalism.
27 / Image Showcase
High Fidelity Desktop Wireframes
28 / Image Showcase
High Fidelity Mobile Wireframes
29 / Text Story
Usability Test and Iterations
We conducted usability tests with 3 potential users to gather valuable insights and refine the user experience. Their feedback informed design improvements for a more user-centric product.
30 / Image Showcase
Home Page Iterations
31 / Image Showcase
Product Page Iterations
32 / Image Showcase
Product Page Iterations
33 / Image Showcase
A/B Testing
A 10-participant A/B test was conducted to assess user satisfaction and functionality for two products card designs. The results indicated that participants preferred (Sample B) over (Sample A) due to its superior functionality and appearance.
34 / Text Story
What did I learned?
Upon reflecting on my experiences, I discovered the importance of balancing users' needs with stakeholders' marketing strategy when designing. One of the key takeaways from my journey was mastering effective communication with team members and successfully leading through challenging situations. I realized the significance of holding regular meetings with developers to ensure everyone stays aligned and focused on our common.
Finding the real
DiscoverListen before deciding.UsersContextConstraints
From signals to
structure.
Bold composition, consistent product cards and clear filtering create a balanced browse-to-buy experience.
- 01Understand the context
- 02Map the experience
- 03Explore & prototype
- 04Evaluate & refine
Clarity is the
designed result.
A responsive fashion storefront with a reusable, campaign-ready visual framework.
“Make the next step feel obvious—without making the experience feel ordinary.”