Project Background
Location: Toronto, ON
Timeline: 12 Weeks
Project Type: Responsive Website Design
My Role: End to End User Experience and Interface Designer
Research Methods: Market Competitor Analysis, User Interviews, Affinity mapping
Usability Testing methods: Moderated, In-person
Tools: Figma
Introduction
Luna & Sky is a small, independent business specializing in handcrafted stone and metal embellished bags and jewelry. The company's products are characterized by their unique designs, high-quality materials, and artisanal craftsmanship. The goal of this project is to create a user-friendly e-commerce website that will help Luna & Sky reach a wider audience and promote their handcrafted products effectively.
Problem Statement
Luna & Sky does not have a physical store and lacks an online presence and a dedicated e-commerce platform to showcase and sell their handcrafted bags and jewelry
Research Goals
I want to conduct comprehensive market research to delve into the latest trends, analyze the competitive landscape, and gain insights into our target audience to understand their preferences, and buying behaviors.
Project Scope
As a UX designer, the challenge is to design a responsive website that not only reflects the brand's uniqueness but also optimizes user experience, encouraging visitors to explore, purchase, and return for future purchases.
Design Process
Ideas exploration
Feature Set
Stakeholder Interviews
User Interviews
Competitor/ Market Analysis
Affinity Mapping
POVs & HMWs
User Personas
Site Map
Task Flows
Logo
Branding
Wireframes
UI Library
Prototype
Usability Testing
Iterations
StakeHolder Interview
Brand Ethos: Luna and Sky positions itself as a fusion of modern and traditional design, drawing inspiration from Mughal and Eastern royal dynasties. The key differentiators are “Artistry, Opulence, Heritage, Royalty, and Uniqueness“.
Client Goals: Brand Awareness, Customer Engagement and Increased Sales
Envisioned Website: A very minimal website for very ethnically bright and colorful products. A website that is not ‘pushy’ but displays products effortlessly.
User Interviews
6 Participants were recruited to conduct interviews.
Females and males, ranging from 25 to 40 years of age.
All of the participants had experience of shopping online for either themselves or their loved ones, in the past 1 year.
Interview Questions
What are users' motivations, preferences, and decision-making factors when purchasing bags and jewelry>
What are users’ expectations regarding website aesthetics, product information, and ease of use?
What obstacles or pain points do users encounter during their journey?
What devices and platforms do users prefer for online shopping?
What are the key touchpoints where users make decisions or interact with the brand?
Affinity Mapping
Insights Uncovered
High-resolution images and the ability to view products from multiple angles are highly valued.
Seeing products worn by real people is crucial for users to gauge appearance and size.
A streamlined checkout process is paramount, with options for guest checkout being especially appreciated.
Secure payment options are essential, with some users showing a preference for modern payment methods like Apple Pay and/or Google pay.
A well-designed website with quality content builds trust in the brand.
Detailed product descriptions and ample visuals are necessary to counter the skepticism associated with online shopping.
Both handmade and brand-name items are in demand, provided they meet users' quality expectations.
Budget constraints influence purchasing decisions, highlighting the importance of a range of price points.
Discounts and sales can heavily influence buying decisions, with some users willing to extend their budget for trendy, high-quality items.
Reliable customer service, including efficient handling of returns and exchanges, and real-time tracking of their orders enhances user trust.
A preference for websites that remember the last viewed position to facilitate easier browsing.
Users are frustrated by sites with intrusive pop-ups or complex navigation.
The lack of sufficient product reviews and poor return policies can lead users to abandon purchases.
Competitor Analysis
In conducting a thorough competitor analysis, it became evident that the market is highly saturated with numerous competitors. The analysis delved into the strengths, and weaknesses of key players in the industry, providing valuable insights into their product offerings, pricing models, and customer engagement tactics. This comprehensive examination positions us strategically, allowing us to identify opportunities for differentiation and innovation within the fiercely competitive landscape.
(image can be right clicked to open in a new windows for a bigger view)
Research Synthesis
My research synthesis combined user interviews, affinity mapping, and competitor analysis. Affinity mapping organized my user interview insights into key design implications. Competitor analysis provided insights into existing solutions and their weaknesses. This synthesis guided the creation of impactful Point of View (POV) and How Might We (HMW) statements.
POVs
I would like to explore ways to help users confidently assess product quality online because they are facing challenges in discerning product details and authenticity without tangible examination.
I would like to explore ways to help gift shoppers efficiently navigate and select high-quality items because they face the problem of filtering through extensive product ranges to find meaningful and suitable gifts within their budget
HMWs
How might we enhance the online product assessment experience to give users the same confidence in quality and authenticity they would have when shopping in a physical store?
HMW streamline the gift selection process for shoppers to quickly filter and select high-quality, meaningful gifts within a set budget, thereby reducing decision fatigue and shopping time
User Personas
After an extensive process of affinity mapping based on a series of targeted interviews and thoughtful insights, I was able to distill key user behaviors, needs, and frustrations. I identified three main user personas. A budget-conscious junior graphic designer, seeks creative pieces; A sophisticated healthcare director, desires exclusive, high-quality items; and a practical financial analyst, looks for value-driven, trendy products. Understanding their unique needs and frustrations fosters empathy, guiding the design to prioritize a sophisticated categorizing and sorting features, personalized experiences, and well-presented, clear, and easily digestible information. These personas collectively represent Luna and Sky's diverse user base, ensuring a user-centric approach that accommodates various preferences and enhances the overall shopping experience.
Road Map - Features Set
The secondary research into market trends and consumer behaviors offered an additional layer of context, allowing me to prioritize features that align with the expectations and desires of our target audience. While there are many feature sets prioritized as must haves, good to have and can come later. As an ongoing project, some of the top priority ones are listed below.
Must Have Features
User Account Creation: Personal accounts for customers to track orders, save favorites, and manage their information.
Responsive Design: Ensuring the website is fully optimized for mobile, tablet, and desktop devices.
Search Functionality with Filters: Advanced search options to sort by price, popularity, new arrivals, and categories.
High-Quality Product Imagery: Detailed photos from various angles, zoom functionality, and video content to showcase the craftsmanship.
Customer Reviews and Ratings: Authentic feedback from buyers to build trust and provide insights into the products.
Product Descriptions: Comprehensive descriptions, including materials, dimensions, care instructions, and origin stories of the products.
Wish List Feature: Enables users to save items they are interested in and may want to purchase later.
Secure Checkout Process: A streamlined, secure checkout with multiple payment options, including digital wallets for quick transactions.
Contact: A page that lists contact details for any needed support.
Best sellers: A page that lists all the best selling products
Can Come Later Features
Customer Spotlight Stories: Feature articles or blog posts highlighting how customers use and style their purchases, building a community feel.
Multi-Currency Support: To cater to international customers, displaying prices in various currencies.
Gift Registries and Lists: Enable customers to create gift registries for weddings, anniversaries, or other special occasions.
Back-in-Stock Notifications: Alert customers when an item they were interested in is available again.
E-Gift Cards: Selling digital gift cards that customers can buy for friends or family.
Size Guides: If relevant, detailed guides to help customers understand sizes or dimensions of the products.
Surprising & Delightful Features
Style Edit: A page that lists how the products can be integrated into different styles or event e.g., weddings, fall fashion etc.
High-Quality Product 3D Imagery: An interactive 360 degree product model.
Gifts: A page with custom gift sets.
Site Map
The sitemap emerged as a carefully considered blueprint that seeks to minimize user frustrations while maximizing the ease of navigation and the pleasure of discovery.
Given its ubiquity and significance, the search functionality was prominently positioned at the top of the website. Additionally, the sitemap incorporates a home button, providing users with a swift means to return to the homepage whenever desired.
Prioritizing sections like "New Arrivals" and "Best Sellers" on the homepage encourages users to explore trending and fresh products, fostering engagement and enhancing the chances of successful transactions.
I wanted to prioritize the new arrivals and best sellers at the top and then a logical categorization of the navigation into clear categories like "Bags" and "Jewelry" reflects the common user journey in such stores. This helps shoppers easily locate and browse through the specific product types they are interested in.
(image can be right clicked to open in a new windows for a bigger view)
Task Flows
Sign-Up Flow: The sign-up process was simplified to encourage new users to create accounts without feeling overwhelmed. Insights from user interviews highlighted that users value a balance between ease of entry and security. This was addressed by providing options to sign up via email or through social media platforms, appealing to both our tech-savvy and time-sensitive persona types.
Log-In Flow: For returning users, the log-in flow was designed for speed and convenience. Data showed that users often abandon their carts if the log-in process is too cumbersome. Remembering user details, with permission, for a quicker log-in and offering a password reset option cater to our personas who appreciate efficiency.
Buying a Bag Flow: When selecting and purchasing a bag, the flow includes high-quality images, detailed product information, and a streamlined path from product selection to the add-to-cart action. This addresses the needs of users like our detail-oriented personas who seek confidence in their purchases through clear visuals and information.
Checkout Flow: The checkout process was optimized for speed and reassurance, with clear pricing, shipping information, and a summary of the items before final purchase. This caters to all our personas’ pain points of desiring a quick, transparent, and trustworthy checkout experience.
Style Edit Flow: By categorizing style edits around events like weddings, anniversaries, and birthdays, etc, the task flow aligns with the user's mindset, simplifying their path to finding the perfect item. This approach is informed by the insights that users are often looking for guidance and assurance when shopping for special events. Therefore, the task flow is structured to lead users from broad categories down to specific items, providing enough visual and descriptive detail to facilitate and influence confident decision-making.
Lo-Fi Wireframes-Desktop
I incorporated information and feedback I got from my stakeholder interview, as well as my research to work on a website layout. Initially, I sketched out multiple variations of lo fi wireframes for 3 types of desktop screens, to get client approval. The client expressed a desire for the website to stand out from typical e-commerce platforms. Consequently, they favored a unique layout, particularly for the homepage, and requested a versatile hero image block that could be used to alternate between images and videos. Once I had approval, I worked on more screens according to the screen the client preferred the most. The following screens were approved by the stakeholder.
Lo-Fi Wireframes-Mobile
Following the creation of Lo-fi wireframes for the desktop version, I proceeded to develop Lo-fi wireframes for five key mobile screens. These screens were tailored based on the feedback received from the client regarding the desktop screens and my previous research,
Branding
The stakeholder already had certain brand guidelines. They had a typographic logo, I employed the 'Luthon Southard Serif' font to refine the logo. Additionally, they had chosen a few brand colors. I expanded upon this selection to create a color palette. Utilizing the provided imagery and insights gained through stakeholder interviews, I made this brand tile. I wanted the colors and fonts to exude the brand ethos: luxury, artistry and minimalism to balance out their unique & artistic products.
UI Components Library
I worked on a specialized UI Component library for Luna & Sky. This comprehensive library encompasses a cohesive set of design elements, including buttons, navigation bars, product cards, and checkout modules. Each component is thoughtfully designed to maintain visual consistency, enhance user experience, and seamlessly integrate with the brand aesthetics.
(image can be right clicked to open in a new windows for a bigger view)
Hi-Fi Wireframes-Desktop
I designed with a very minimalistic, modern and different from the usual, approach for the website, as per the clients requirements, utilizing a lot of white space, small but readable fonts, and color accessibility approved color contrasts.
Since Luna & Sky is a small business, they had limited assets available for now, however, the client was guided for future opportunities and updates in the website as they gain more assets.
Hi-Fi Wireframes-Mobile
To ensure the responsiveness of my designs across diverse screens, I created hi-fi wireframes specifically tailored for mobile screens. The number of screens I designed exceeded my initial intentions, ensuring a comprehensive and adaptable user experience.
Usability Tests
Objective: Evaluate the usability of the "Prism Shards" clutch purchase flow on the website.
Total Participants: 6
Gender: 5 Females, 1 Male
Age Range: 29 to 45
Online Shopping Experience: All participants have prior experience shopping online.
Tests Insights
Overall Positive Feedback:
Participants found the handbag purchase flow intuitive and in line with their expectations.
The majority expressed satisfaction with the flow's simplicity and ease of use.
Style Edit Clarification Needed:
Some participants noted confusion with the "Style Edit" feature.
Feedback suggests a need for clearer instructions or tooltips explaining the purpose and functionality of the Style Edit, indicating an opportunity for improvement.
Labelling of Product Images:
Users requested more comprehensive labeling for product images.
While the overall visual presentation was appreciated, participants desired additional information or labels on images to better understand product details.
Revised Hi-Fi Wireframes
Following the usability tests, I incorporated feedback from users who aligned with our personas. The iteration received approval from the client. Notable enhancements include the addition of titles to pictures on homepage product cards and the introduction of a description for style edits. This aims to provide users with a clear understanding of what a style edit entails, with the possibility of further opportunities in the future.
Check out the Interactive Prototype 🡒
Outro
Embarking on the Luna and Sky project has been a rewarding journey that not only showcased my design skills but also tested my ability to balance client considerations with design principles. One of the significant learnings from this project was the importance of empathy in design. Understanding the client's vision, values, and target audience was crucial in creating a website that not only met their expectations but also resonated with their brand identity.