Overview

🤔 What is PlusVault ❓

PlusVault is a hypothetical fashion startup that sells plus-size jeans. Their items are made with sustainable materials and are available online only. Their target audience is millennial women. They want to showcase body positivity and diversity in fashion.

🔍 The Challenge 🎯

The aim of this project was to design a website for PlusVault that showcases body positivity, diversity, and provides an engaging user experience for millennial women.

🎯 Goals & Responsibilities 👩🏾💻

As the sole UX/UI designer and researcher, I took on the challenge of creating a visually appealing and intuitive website that would resonate with with millennial women, offering a seamless shopping experience. Throughout the project, I conducted extensive research, developed the information architecture, designed wireframes and prototypes, and implemented a user-centred visual design.

🧰 Tools & Skills 🛠️

  • 💼  UX Research

  • 💼  UI Design

  • 💼  Web Design

  • 💼  Wireframing

  • 💼  Prototyping

  • 💼  Symbol & Typography Design

  • 💼  Format & Layout Design

Introduction

📏 Project Scope 🔄

In the absence of direct user interactions, I leaned on a user persona that I created based on the user research and competitive analysis. As someone that happens to be a member of the target demographic, I was also able to rely on my own insights, assumptions, and experiences to aid some of my design decisions for this project.

For me, this journey wasn't just about design; it was a personal exploration, weaving together assumptions, creativity, and a shared understanding of what resonates with users like me. The result is a vibrant and user-centric redesign that speaks to PlusVault's essence, even in the absence of direct user voices.

Phase 1

Research & User Understanding

🔍 Understanding Our Audience 👥

During the initial research phase of the project, I focused on understanding our target users and their needs to inform the design decisions for PlusVault's website.

👤 Crafting a User Persona 📝

To commence this process I created a user persona, Simone Johnson, an elementary school teacher, who served as a representation of our target audience. This persona helped me empathize with the users and make design choices that would resonate with them.

🚶🏾 Mapping the journey 🗺️

I developed a user journey map that illustrated Simone's typical scenario, from discovering PlusVault to completing a purchase, identifying her actions, mindsets, emotions, pain points, and opportunities throughout the process.

Through this, I aimed to gain a deep understanding of user shopping habits, preferences, and pain points when it comes to purchasing plus-sized jeans online. Creating the user persona and journey map produced insights that guided my design decisions, and every design choice catered to the unique needs of our target users within the scope of the project.

Phase 2

Competitive Analysis

🕵🏾 unveiling industry insights 📊

To identify PlusVault's unique proposition, I relied largely on competitive analysis. I explored TeenVogue's curated list of the "15 Best Plus-Size Brands," and I conducted a thorough analysis of a few the listed websites; focusing on brands that were primarily for plus-size women, as some of them were just generic clothing brands with “inclusive” sizes.

The plus-size brand websites I analyzed were:

I focused on their website designs, user experience, product offerings, sustainability initiatives, and community engagement. I noted their similarities, as well as their differences and unique attributes. This analysis helped me to identify industry standards, areas of opportunity, and potential differentiation for PlusVault.

👀 Recognizing Patterns 🧠

Observing industry standards, I noticed the following commonalities:

  • 📝  Pop-up windows appearing upon opening the website, encouraging users to sign up for mailing list in exchange for some form of discount, varying from site to site.

  • 📝  Structural similarities in terms of information architecture, content, and page layouts, especially on the home page.

  • 📝  The hero section of the home page would either always promote the latest collection, with a featured product section from that collection directly under it, OR it would be promoting a sale / discount of some sort, again, with a related featured products section directly under it.

  • 📝  “Sale”link in the nav bar is always highlighted in a contrasting colour to stand out to the user.

Phase 3

Design Process

💻 Crafting a user-centric platform 👥

My goal for the design of this project was to create an inclusive and empowering online platform that showcased body positivity and diversity in fashion. I aimed to provide a seamless and enjoyable user experience for millennial women who value sustainability and are seeking fashionable plus-sized jeans. The design choices were driven by a desire to promote a sense of confidence, individuality, and environmental consciousness, while facilitating easy navigation, product discovery, and a streamlined checkout process. This structured approach ensured a logical flow, guiding users seamlessly through their journey.

🔨 Information architecture 🗂️

I developed a clear information architecture specifically for the web pages I was going to design(i.e. the homepage, shop page, product page, and pages that show how users would complete the checkout process), organizing content and features based on user needs and priorities. This involved creating logical hierarchies, defining and organizing page structures, and determining the relationships between different sections and pages.

📐 Wireframing & prototyping 🖥️

For this step in the design process I utilized Figma to create low-fidelity and high-fidelity representations of the website's pages, referencing the industry-standard practices, and findings from the competitive analysis, in order to validate my design decisions.

(**images used in the mockups for the product and results pages were taken from various retailer websites**)

A wireframe of the home page of the PlusVault websiteA high-fidelity mockup of the home page of the PlusVault websiteA wireframe of the product results page of the PlusVault website.A high-fidelity mockup of the product results page of the PlusVault website.A wireframe of an individual product page on the PlusVault website.A high-fidelity mockup of an individual product page on the PlusVault website.A wireframe of the checkout page on the PlusVault website.A high-fidelity mockup of the checkout page on the PlusVault website.

✨ Visual Identity & Colour palette 🎨

I employed design principles, colour psychology, typography, and imagery to create a visually appealing and cohesive brand identity. For the logo I went with a simple and minimal wordmark, which was a common practice among all the other plus size brands I studied for the competitive analysis.

a png of the PlusVault logo that I designed.

E-commerce websites feature multiple products, with images that tend to already have multiple colours. I didn’t want those colours to clash with the colour scheme of the website, so I opted for a more simple palette.

The primary and secondary brand colours are a light coral pink, a soft mint green, and charcoal grey, complemented by muted, neutral, versions of the main three colours. The combination of these colours evoke feelings of femininity, compassion and tenderness, while presenting sophistication, harmony, and simplicity.

coral pink
sage
charcoal

For the typography I chose two sans serif typefaces, and one serif font.

A screenshot of the listed brand fonts that I used for the PlusVault plus-size jeans brand. It reads as follows: 

Wordmark:
Houschka Pro Extra Bold
Houschka Pro Medium Italic

Call-To-Action Buttons:
Houchscka Pro - Medium

Body:
Futura PT Light

Accent:
Operetta 12 Extra Light

I decided to go with a serif accent font because it’s something I discovered a lot in my competitive analysis. Most of the other brands I looked at utilized minimalistic sans serif fonts for the majority of their branding, and opted for simple serif fonts to accent the font styles of the website.

My aim was to reflect the values of sustainability, inclusivity, and body positivity, using inclusive imagery and thoughtful use of colour and typography. I also applied UX/UI principles to create a visually appealing and user-friendly interface that aligns withPlusVault's brand identity and values.

💻 uX/UI Principles in Action 🎨

I considered and utilized the following UX/UI principles in the visual design:

  • 📜  Consistency: I maintained a consistent visual language throughout the website, including typography, colour palette, and iconography, in order to help users understand and navigate the website more easily.

  • 📜  Clear Hierarchy: I used visual cues, such as font size, colour, and spacing, to establish a clear hierarchy of information. Important elements, such as product names and call-to-action buttons, were visually emphasized to guide users' attention.

  • 📜  Intuitive Navigation: I designed an intuitive navigation menu that is easily accessible and consistent across all pages. The industry-standard practices that I was able to identify and utilize, through competitive analysis, helped determine the most logical and user-friendly organization of navigation categories to ensure smooth browsing and seamless transitions between pages.

  • 📜  Visual Imagery: I incorporated high-quality inclusive and diverse imagery that resonates with the target audience, showcasing models of different body types and ethnicities. Visual imagery was selected to evoke positive emotions, promote body positivity, and reflect the brand's values.

  • 📜  Readability & Accessibility: I paid attention to typography choices, font sizes, and contrast to ensure readability for all users, including those with visual impairments.

  • 📜  White Space & Simplicity: I leveraged ample white space to enhance visual clarity, legibility, and focus on key elements. The use of clean and minimalistic design elements contributed to a modern and elegant aesthetic. Another reason I opted for a more minimalistic aesthetic, as opposed to an overly complex design, was not only to avoid overwhelming the user, but also because I wanted to be more in line with the brand voice which also promotes simplicity and sustainability.

In incorporating these UX/UI principles into the visual design of the PlusVault website, my aim was to create a visually engaging and user-friendly experience for our target audience. My design choices were made with the goal of providing a seamless and enjoyable journey for users, while effectively communicating the brand's values of sustainability, inclusivity, and body positivity.

Conclusion

Assumptions & Iterations

💖 Empathy-Driven Assumptions 🧠

Target Audience Preferences:
I assumed that millennial women, specifically elementary school teachers, would be interested in sustainable fashion, value size inclusivity, and appreciate body-positive messaging. These assumptions were based on the knowledge that both millennials and gen-z are known for promoting acceptance and self-love, and are all for being the change they want to see in the world. It would make sense that people responsible for shaping the minds of tomorrow’s leaders would want to exemplify such values in every aspect of their lives, right down to the brands they choose to purchase from.

I also felt that since being a teacher is an occupation that requires a lot of moving around, whether it’s from table to table, classroom to classroom, or up and down the school hallways and corridors, it was important to note certain issues that the target audience of plus-size women face when it comes specifically to jeans. The issue being chaffing and wearing away of the fabric between their thighs, which can cause discomfort, and eventually leads to them having to throw pants away due to damage. I felt it was important for this assumption to influence certain structural choices in order to present the target user with information that eases their concerns about the durability and breathability of the products.

This assumption was based on my own experience as a plus-size woman that also experiences chaffing, and the disappointment of having to discard my favourite pair of jeans due to the prolonged wearing away of the denim between my thighs as I walk.



Online Shopping Habits:
I assumed that the target audience prefers the convenience and time efficiency of online shopping, especially when it comes to browsing and purchasing clothing items like jeans.



User Trust In Sustainable Brands:
I’ve seen a lot of online discourse in millennial and gen-z spaces surrounding the importance of sustainability in fashion, as well as discourse highlighting the harm that fast-fashion causes our planet and eco-system. I assumed that users from the target audience would prioritize sustainable and ethical practices when choosing a fashion brand and would be more likely to engage with a brand that demonstrates transparency in its sustainability efforts.

📌 Continuous Validation📌

While I partially relied on these assumptions to guide my design choices, given the context of this project, I would like to point out that in a real-life client scenario, it is important to continually validate and iterate based on user feedback and real-world data to ensure the website meets the actual needs and expectations of the targe taudience.

💭 Final Thoughts 🏁

My overall goal for this project was to take into account the insights I gained from my research, the design process, and assumptions, and use them to create a user-centred, visually engaging, and intuitive platform that resonates with the target audience of millennial women, while aligning with the brand's values of sustainability and body positivity.