Beau Monde
E-Commerce Responsive
Web App Case Study
PROBLEMS & APP SOLUTIONS
COMMON PROBLEMS WITH CLOTHING APPS
FRUSTRATING CHECKOUT PROCESS:
Mandatory account creation leads to cart abandonment.
Limited payment options and secure payment methods.
POOR FILTER/SEARCH OPTIONS:
Inadequate filters, such as missing color or material filters.
Search results irrelevant and broad.
No auto-suggestion.
LACK OF INFORMATION:
Low quality images & insufficient product details.
Fake and/or hidden reviews.
CONFUSING NAVIGATION:
Cluttered interface.
Complicated dropdown menus.
Too few or too many categories.
Poor mobile experience/not responsive.
SOLUTIONS THAT BEAU MONDE OFFERS
STREAMLINED CHECKOUT PROCESS:
Option to checkout as guest.
Saved shipping and payment options.
Prominent CTA’s & action oriented language.
ROBUST FILTER/SEARCH OPTIONS:
Real-time suggestions and common search terms as users type.
Advanced search algorithms with results based on user input, and purchase/browsing history.
Filters for category, size, color, price, material, etc.
AMPLE INFORMATION:
Multiple high-resolution images with zoom functionality.
Detailed product descriptions, sizes available, material information, and care instructions.
Ratings & reviews displayed prominently.
INTUITIVE NAVIGATION:
Clear and consistent menu structures.
Sticky navigation panel at top of screen.
Organized categories.
MY ROLE
RESEARCH & DESIGN
To ensure accessibility standards.
To draft user flows, Lo-Fidelity wireframes.
Track rewards points.
Access comprehensive details about products.
Receive curated suggestions based on activity.
Discover new trends and get fashion inspiration.
Quickly shop for/purchase stylish, quality pieces.
PROJECT OVERVIEW
WHAT IN THE WORLD IS BEAU MONDE?
Definition: "Beau Monde" is a French term that translates to "beautiful world" or "fashionable society." It evokes a sense of luxury, sophistication, and elegance.
PROJECT DESCRIPTION
TYPE:
TARGET AUDIENCE:
DESIGN PROCESS & TOOLS
Conducted user interviews and competitor analysis to identify the needs and
preferences of professional millennial women.
Identified key features and design elements that resonated with the
target audience.
TOOLS USED
FIGMA:
Mid & Hi-Fidelity wireframes,
interactive
prototypes, interface designs.
WEBAIM CONTRAST TOOL:
NOTABILITY:
PRIMARY GOAL:
MISSION:
Responsive e-commerce responsive web-app.
Professional millennial & gen z women.
Provide quality, ethical pieces in an easy-to-use interface.
Help women feel empowered and beautiful.
COMPETITOR ANALYSIS
METHODOLOGY
A comprehensive audit of four leading clothing web apps: Net-a-Porter, Farfetch, MatchesFashion, and Ssense, was conducted to identify the most effective features and design elements employed by each platform. The objective of this analysis was to highlight best practices and uncover potential areas for improvement in Beau Monde's strategy.
GOALS:
FINDINGS
USER RESEARCH
OBJECTIVE
Evaluate the efficacy/efficiency of the app’s UI and features.
Identify any usability issues and gather insights to improve the overall user experience.
INTERACTIVE PROTOTYPE
USABILITY TESTING
METHOD:
SEARCH FEATURES:
FILTERING FUNCTIONS:
WISHLIST:
SHOPPING BAG:
CHECKOUT:
GENERAL NAVIGATION:
Move items from the wishlist to their shopping bag.
Navigate through the app, exploring different categories and pages.
INSIGHTS
SEARCH FEATURES:
FILTERING FUNCTIONS:
WISHLIST:
SHOPPING BAG:
CHECKOUT:
GENERAL NAVIGATION:
AGE:
LOCATION:
OCCUPATION:
MOTIVATIONS:
Wants to look professional for her career. Enjoys being a trendsetter among her peers.
Appreciates an efficient shopping experience.
Looks for quality, comfort, and durability.
Passionate about fashion and enjoys experimenting with her style.
RESPONSIVE SCREENS
MOCKUPS
Participants complete tasks that simulate real life situations they might have while using the app. Then, they provide qualitative feedback on UI, navigation,
and overall user satisfaction.
Find a specific product using the search bar.
Apply filters to narrow down product options by category, size, and colors.
Add items to their wishlist and view the wishlist.
Complete the checkout process, review order before submitting payment.
Most participants found the search bar easy to use and could quickly locate specific products.
Easy to locate and use, allowed users to narrow down search results effectively.
Users liked the option to save pieces for later.
Checkbox activation feature was unintuitive and frustrating, disrupting their shopping flow.
Desire for straightforward method to select/deselect items in wishlist/shopping bag. They suggested automatic tap to select functionality for efficiency
Smooth, with well defined steps for entering shipping and payment information.
Layout praised for clean and pleasing aesthetic.
Participants found it easy to browse different product categories and subcategories.
USER RESEARCH
NAME:
Sonja Bennett
32
New York City, NY
Market Professional
BACKGROUND:
Sonja’s job requires her to maintain a
polished appearance, but she has limited
time for shopping. With a keen eye for
quality and detail, she seeks an efficient
e-commerce app that aligns with her hectic lifestyle with her refined taste in fashion. In
her free time, Sonja enjoys spending time
with friends, and traveling
USER FLOW
The user flow highlights a critical pathway,
starting from the user’s arrival and ending with the completion of the filtering process. This streamlined journey ensures users can effortlessly navigate through product selections, economizing shopping time.
FRUSTRATIONS:
Limited filter options.
Navigating cluttered websites.
Inaccurate size recommendations.
Receiving products that do not match description.
Complicated checkout process.
Slow load times.
EARLY IDEATION
Digitally sketched low-fidelity and digitally built mid fidelity wireframes were pivotal in bringing the final design to life.
UI STYLE GUIDE
LOGOS
The Beau Monde logo conveys sophistication and clarity, as the clean, bold typography of Qefila complements the refined aesthetics of the platform.
PALETTE
The primary color palette ensures visual clarity, allowing Beau Monde products to stand out effectively
TYPOGRAPHY
Outfit enhances the brands visual clarity, aligns with a modern and sophisticated aesthetic, and ensures a consistent and accessible user experience. Suranna adds a classic touch.
KEY COMPONENTS
Continuing the minimalist approach ensures a clean, professional, and accessible interface that resonates with the brands modern and sophisticated image.
OVERVIEW
User testing validated many design decisions, particularly the clear layout and navigation. Users appreciated the straightforward features such as auto suggestions in search fields, extensive filters, and an easy checkout process.
Accessibility was prioritized from the beginning, ensuring high contrast for readability and keyboard navigability.
PROTOTYPING:
Figma facilitated smooth prototyping and quick iterations based on feedback.
CHALLENGES
STREAMLINING:
One key challenge was simplifying the user journey by reducing unnecessary steps during key actions, like navigating between the wishlist and shopping cart. Initial versions required too many clicks to complete tasks, which disrupted the flow. After user testing, we streamlined these processes to improve efficiency and reduce friction.
KEY LEARNINGS & IMPROVEMENTS
BALANCE:
While the app needed to be visually striking, it was essential to reduce cognitive load by minimizing the steps users had to take to complete actions. Streamlining user flows will be a key focus in future projects.
ACTIONABLE TAKEAWAYS
Continue refining task flows to minimize user effort and improve overall efficiency.
Implement more frequent, iterative user tests to catch potential usability challenges early.
RETROSPECTIVE
The Beau Monde app aimed to create a seamless, captivating platform where users could easily discover unique fashion pieces and effortlessly curate their own personalized collections. The primary objective was to merge high end aesthetics with a user friendly and practical interface, ensuring that users could intuitively navigate the app, while still feeling immersed in a luxurious shopping experience.
WHAT WENT WELL
VISUAL DESIGN:
The attention to detail in typography, color palettes, and imagery successfully established a minimal and modern aesthetic, creating a high end feel that aligns with the brands vision of a refined experience.
USER FEEDBACK:
ACCESSIBILITY: