E-commerce website Maxi Princess
Maxi Princess is an E-commerce website in the fashion industry. The company specializes in plus size women’s clothing. Outerwear is available in a wide variety of sizes and colors.
My role
UX/UI designer
Tools used
Figma, Adobe Illustrator, Adobe Photoshop
Scope
Feb. 2018 – Apr. 2018
What I did
Competitive Analysis, User Research, Information Architecture, Desktop & Mobile design, User Journeys & Flow, Card Sort, Sitemap, Usability Study, Product Design, WordPress Design & Development
The Problem: How could we help people on the emotional journey of buying maxi clothing?
The challenge:
I set out to develop an E-commerce website Maxi Princess so that potential customers could quickly access the products by structuring them in the main menu. I also developed a payment form for Oder Summary, Shipping Method, Payments Method and Shipping.
The Background
The fashion e-commerce market consists of sales of fashion goods and their related services through online channels. Fashion goods include fashion accessories, clothes, shoes, bags, jewelry, cosmetics, and other luxury goods. The fashion e-commerce market comprises revenue generated by establishments using several online platforms and tools for trading fashion products.
The Industry
Cumulative data compiled within The Fashion Industry Report paints a bright portrait with worldwide revenue expected to rise from $481.2 billion in 2018. Fashion consumers will also have more buying power, as the number of potential customers is projected to grow to more than 1.2 billion by 2020. The good news for fashion is that the majority of these new consumers are within the 16 to 24 and 25 to 34 age groups. while clothing’s absolute numbers are steadily climbing, worldwide revenue growth — as represented by compound annual growth rate (CAGR) — is slowing: down from 15.3% in 2018.
The Iterative Process of Designing E-commerce website Maxi Princess
When working on E-commerce website Maxi Princess, I adopted the Double Diamond strategy, which divides the design process into four stages: Discover, Define, Deliver, and Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.
DISCOVER
What is out there: E-commerce & Maxi Princess
I conducted a competitive analysis of E-commerce with a focus on UX analysis: to evaluate their navigation, layout and overall usability. This helped me to understand what Maxi Princess had to provide to stand out from the competition.
Here is a list of competitors: Unico, Maxifashion, Glami and Fashion Choice.
I also did a detailed SWOT analysis of the competition and found out their strengths and weaknesses, which greatly helped to build Maxi Princess’s competitive advantages.
User Research: Can you walk me through your process?
It was time to see what E-commerce enthusiasts thought about the competitors. Equipped with the preliminary research discoveries, I conducted 2 user interviews with people who have different levels of experience with E-commerce platforms.
My research goals were:
1. To understand the general attitudes and processes.
2. To uncover what (common) difficulties people might face.
3. To discover if they use any apps or websites to help them achieve their goals.
DEFINE
The Research Analysis: Moving Forward
After the Research phase, I reexamined my assumptions based on the insights from the User Interviews.
It was clear that:
• People are flexible in choosing an E-commerce platform and their decisions depend on the circumstances. Often their choices are based on recommendations and they thoroughly research each platform before making their choice.
• Delivery on time.
• They require E-commerce platform to be sufficiently simple and understandable for users.
• Good support and feedback.
• More options, good structure and search filters.
• Above all, they care about the quality of the products and the standards they cover.
Revision of Problem Statement
I revised my hypothesis problem statement to align better with the users’ needs and goals.
E-commerce’ users need to find the right platform for their needs. They expect to receive quality service, good menu navigation, high quality products, delivery on time and this to help achieve their goals.
What would Zdravka’s experience with E-commerce Maxi Princess be?
Informed by each persona’s experience, attitudes & goals, I have created User Journey Maps to outline the processes needed to achieve their individual goals within E-commerce Maxi Princess. This allowed me to focus on possible critical pain points and plan how to address them in the following design decisions.
User Flows: How would Zdravka go about finding maxi clothes on E-commerce Maxi Princess?
I set out to map out their User flows. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of my user personas.
Sitemap after Open Card Sort.
Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the platform into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort.
DEVELOP
Wireframing: From sketches to first clickable prototype.
Ones the Sitemap information architecture was decided, I began sketching paper wireframes progressing them.
Desktop Low-Fidelity Wireframes
Desktop High-Fidelity Wireframes
Mobile Low-Fidelity Wireframes
Mobile High-Fidelity Wireframes
Usability Study.
Focusing on navigation and main features, I designed clickable prototypes for Desktop & Mobile versions of the responsive web app. It was tested in a usability study, conducted remotely with 3 users. The issues, discovered in the usability test were addressed and fixed.
Problem
“I need to add additional size options.” – Milena
Solution
Problem
“I need to adjust the search field to only apply to products.” – Galia
Solution
Designing the Look & Feel of Maxi Princess: Style Guide
E-commerce Maxi Princess has a stylish and practical design that aims to help people use it easily and affordably.
I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of Maxi Princess to designers and developers.
DELIVER
Final Showcase.
When I started working on this project, my goal was to create an E-commerce website according to the client’s requirements. The main goal was to have a good menu navigation, a clean look, easy access to the products and a modern design. I believe that E-commerce Maxi Princess has succeeded in achieving the goals as it has its own distinctive style and branding, but also offers an easy user journey for customers to buy the products.
