Case Study: Lumina SkinCare Website Redesign Lumina skincare center
- Roles: Product Designer, UX Researcher
- Method: Double Diamond Process
- Project Duration: 2 weeks
1. Background
E-commerce, or electronic commerce, is the digital process of buying and selling goods and services over the internet. This includes transactions between businesses and consumers (B2C) as well as between businesses (B2B). In this thriving online marketplace, Lumina SkinCare has established itself as a reputable provider of skincare products and non-invasive treatment options.
Lumina's Mission
At Lumina SkinCare, the mission is to provide the best results for customers and their skin. With a team of experienced professionals boasting over 15 years of expertise in medical skincare, Lumina SkinCare offers the most effective non-invasive treatment options available today. Their advanced non-surgical treatments, powered by the latest laser technologies, aim to help customers achieve healthier and more youthful-looking skin.
2. The Brief
What I'm going to do?
In this case study, I will be discussing my project, and the objectives, and present the following deliverables:
- 5 pages: home page and 4 other pages.
- Mobile and Desktop compatible screens (Responsive)
I’ll be using a method called the Double Diamond Process, with Lumina Skincare guiding each step. I’ll also share how I research and design. I’ll look at Lumina Skincare’s current website on computers and phones. I’ll find out what problems users face and use creative thinking to fix them. My goal is to make changes that help Lumina Skincare’s business while also making things better for users.
Why Limina is my chosen company
Lumina SkinCare holds a significant presence in the skincare industry, attracting a wide audience, including myself. As someone who frequently explores skincare solutions, Lumina SkinCare has been my go-to choice. However, like many others, I’ve encountered persistent user experience challenges while navigating their website. These issues have deterred me and potentially others from fully engaging with the brand online. The website not only lacks aesthetic appeal but also requires excessive clicking to access core information or services. Additionally, broken images further hinder the browsing experience. Instead, users may resort to alternative methods such as visiting physical stores or exploring other online options. A poor user experience could lead to higher bounce rates and lower conversion rates compared to competitors’ websites. Addressing these challenges is crucial for ensuring Lumina SkinCare’s success in the competitive market.
The problem statement
The current Lumina SkinCare website faces significant challenges, resulting in low user engagement and suboptimal conversion rates. Users encounter difficulties with navigation, product discovery, and assessing the trustworthiness of the site, ultimately leading to missed sales opportunities.
Areas i want to improve
- Navigation and layout
- Product discovery and search
- Visual design and aesthetics
- Mobile responsiveness
3. Hypothesis
What I am going to do/change and a prediction for the outcome of results:
Based on the identified challenges in navigation, product discovery, and trustworthiness on Lumina SkinCare’s current website, along with insights gathered from user research, I hypothesize that by implementing Jakob’s Law principles, focusing on a clear navigation bar, optimizing the layout of product pages, and enhancing filtering options, we will significantly improve the user experience. I predict that these changes will lead to a more intuitive and familiar navigation and browsing experience. This improvement will result in increased user engagement, reduced bounce rates, and higher conversion rates, aligning with Lumina SkinCare’s brand mission of offering a luxury skincare experience. To validate this hypothesis, I will conduct usability testing with a diverse group of users, incorporating questionnaires and interviews to gather feedback and insights
4. Business Research
Background information
- Lumina SkinCare is a Canadian-based company located in British Colombia.
- The company is dedicated to providing advanced skincare solutions backed by science and expertise.
- Their team of experienced professionals boasts over 15 years of expertise in medical skincare.
- Lumina SkinCare offers the most effective non-invasive treatment options available today.
- The company’s mission is to provide the best results for customers and their skin.
- They specialize in non-surgical treatments powered by the latest laser technologies.
- Lumina SkinCare aims to help customers achieve healthier and more youthful-looking skin.
- Their services include a range of skincare treatments addressing various concerns such as aging, acne, pigmentation, and more.
- Lumina SkinCare is known for its commitment to delivering high-quality skincare products and services.
- They emphasize transparency, effectiveness, and customer satisfaction in their offerings.
competitive analysis
In this competitive analysis, I’ll explore one indirect and three direct competitors of Lumina SkinCare, focusing on key aspects such as website functionality, target audience, brand identity, and more. Understanding these competitors will help in strategic planning and differentiation within the skincare industry.
| Company | Sephora | Pure + Simple | EverYoung Medical Aesthetics | Dermalogica Toronto Skin Bar |
|---|---|---|---|---|
| Description | Competitive Type | Natural skincare clinic | Medical aesthetics clinic | Dermalogica skincare clinic |
| Founded | 1969 | 2000 | 2010 | Not mentioned |
| Trustpilot Review | 4.3/5 | 4.2/5 | 4.0/5 | 4.3/5 |
| Target Audience | Beauty enthusiasts, skincare and makeup lovers of all ages | Individuals seeking natural and organic skincare | Individuals seeking cosmetic enhancements, anti-aging treatments, and skincare solutions | Individuals seeking professional skincare consultations |
| Brand Identity | Trendy brand identity | Natural and holistic brand identity | Professional and results-oriented | Professional and results-driven |
| Location | Global presence | Toronto, Canada | Toronto, Canada | Toronto, Canada |
| User Flow | Seamless product browsing, easy checkout process | Clear service menu | Comprehensive treatment information | Sking alalysis tools, online booking |
| Competitive Type | Indirect | Direct | Direct | Direct |
| Navigation | Clear navigation menus, intutive search | Straightforward navigation with easy acess to treatment, pricing and clinic information | Clear menu structure with easy access to treatment categories | Clear menu structure with easy access to skincare services, product categories, and online booking |
Competitor Analysis Findings:
Sephora’s website stands out for its user-friendly navigation, clear product categories, and engaging product descriptions, enhancing the overall browsing experience. Pure + Simple Toronto’s website emphasizes natural and holistic skincare through informative content and easy-to-navigate menus, catering to users seeking organic solutions. EverYoung Medical Aesthetics’ site focuses on detailed treatment information and online consultation booking, streamlining user flow for customers interested in cosmetic enhancements. Dermalogica Toronto Skin Bar’s website prioritizes skin analysis tools and personalized product recommendations, offering a tailored experience for users concerned about skin health
5. User research
Research methodologies
I have chosen a good combination of research methodologies for understanding user experience issues. Here’s a breakdown of why questionnaires and user interviews are valuable for this project
Questionnaires:
A questionnaire was created using Google Forms to gather data from a broad range of users. The questionnaire included a mix of open-ended and closed-ended questions to gain both quantitative and qualitative insights
Sample Questionnaire Questions:
- “Describe your experience navigating Lumina SkinCare’s website. What was easy or difficult?”
- “What information do you typically look for when browsing skincare websites?”
- “What factors influence your decision to purchase skincare products online?”
- “Is there anything about Lumina Skincare’s website that makes you question its trustworthiness?”
Sample User Interview Questions:
- “Tell me about the last time you purchased skincare products online. What was your decision-making process?”
- “Can you walk me through the steps you take when you visit Lumina SkinCare’s website?”
- “What are your first impressions of Lumina SkinCare’s website design?”
- “Have you ever encountered any difficulties finding the information you needed on Lumina’s website?” (If yes, probe further for specifics)
Findings
Information Sought on Skincare Websites:
The website was easy to navigate overall. Finding product categories was fairly easy, but I could not buy any products despite browsing options. The layout seems outdated, and some of the pictures were broken. It’s frustrating to see the page reload every time you navigate from one page to another, and the lack of a search engine makes it difficult to find specific items
What information do you typically look for when browsing skincare websites?
- Ingredient lists: I want to understand what’s in the products and avoid any ingredients that might irritate my skin.
- Product descriptions: A good description should clearly explain what the product does and what skin concerns it targets.
- User reviews: Reading reviews from other users helps me get a sense of how effective the product might be and if it would work for my skin type.
- Skin concern information: It’s helpful if the website has information about different skin concerns and how to address them.
First Impressions of Lumina's Website Design:
- Limited Information: While navigation might be relatively easy for some users, the website seems to lack detailed product information and explanations. This could make it difficult for users to understand the benefits of different services or choose the right product for their needs.
- Frustration Points: Broken images, frequent page preloaders on transitions, and the inability to complete a purchase can lead to user frustration and abandonment.
- Lack of Trust Signals: The absence of client testimonials and a potentially outdated design might make users question the brand’s credibility and expertise.
The main pain points
- Limited Information Depth: Descriptions and explanations regarding product benefits and target concerns seem insufficient to guide informed purchase decisions.
- Technical Issues: Broken images, slow page loading times between clicks (pre-loaders), and an incomplete purchase flow can create significant obstacles for users, leading to frustration and abandonment.
- Lack of Trust Signals: The absence of client testimonials and a potentially outdated design might cause users to question the brand’s credibility.
- No search engine: The absence of a search engine makes it difficult for users to grab what they want without wasting time
- Purchase Roadblock: Users are encountering difficulty in making purchases on the site as it currently functions solely as a read-only platform, lacking any purchasing capabilities.
By addressing the identified UX barriers, Lumina Skincare can create a more informative, user-friendly, and trustworthy website that fosters user engagement and drives conversions.
6. Ideation
7. Wireframe
Tools Used: hand sketch & Figma
Sketches
the sketches presented are derived directly from user pain points identified through comprehensive research, as well as from the creative brainstorming sessions known as Crazy 8
Mid-fidelity wireframe
Moving to the next step, I started making more detailed sketches on Figma. I changed some parts of the design, like turning the main links in the navigation bar into sub-links, so users could easily find specific services and products they’re looking for. On the service page, I added breadcrumbs to help users navigate through different levels of services, making it easier for them to understand and explore. I also included before-and-after photos of users who’ve used the services.
When I worked on the mobile version, I faced a problem with fitting text in the header without making it too small to read. I had to move the nav bar and the logo from its spot in the middle of the header. So, I decided to use icons specifically for the mobile site. I found icons that matched the style of Lumina’s skincare brand and added them to the mobile header.
To ensure consistency and accuracy across all screens, I used a baseline grid and followed IOS guidelines. This helped me maintain even spacing and alignment of elements like padding, margins, and text.
More mid-fidelity wireframe
Hi-fidelity wireframe
I upgraded the wireframes to high fidelity by replacing the placeholders with actual images, providing a more detailed and realistic representation. In addition, I enhanced the functionality by incorporating features such as currency selection, search, and account icons into the header. For the mobile version, I implemented a swiping slider for content containing more than two or three items, improving the navigation experience on smaller screens.
Final Deliverables: Homepage, Product, Services, Product detail, Service detail and About us
Home page
I redesigned Lumina’s homepage to include essential elements like clear Call to Action (CTA) buttons, highlighted services, and standout features. The original page lacked these common semantics of a homepage, making it less engaging and informative. By incorporating these elements and utilizing their brand colors effectively, the homepage now grabs attention with a catchy visual appeal while conveying necessary information about their offerings. This enhancement ensures a more effective user experience and aligns with the brand’s identity and goals.
Product page
I’ve created a detailed presentation of Lumina’s skincare product line, ensuring users can easily explore information such as ingredients, reviews, usage instructions, and benefits. This comprehensive content is also available on the mobile app, ensuring consistency in visuals and details across platforms, which is especially beneficial for mobile users.
8. UI phase
Design Fundamentals
The laws of UXUI played an important part in my designs, starting from the first sketches created for the Crazy 8’s stage of the process. The laws I focused on were:
Hick’s Law
Hick’s Law, applied to Lumina SkinCare’s design, emphasizes that users take longer to decide when presented with more choices. To streamline the user journey and prevent decision fatigue, I focused on a minimalist approach, including only essential information on each screen. This minimizes the risk of overwhelming users and can be observed in the clean layout of each screen and the simplified navigation bar.
Aesthetic Usability Effect
The Aesthetic Usability Effect, as highlighted in Huruso and Koari’s study, suggests that users tend to perceive visually pleasing designs as more usable and functional at first glance. This implies that users have a positive emotional response to well-designed interfaces, making them more forgiving of minor usability issues. This principle aligns with Lumina SkinCare’s emphasis on ‘beauty’ and ‘clarity’ in their brand values. I carefully integrated Lumina’s brand colors of black and white, utilizing white space extensively to create a sense of luxury, high fashion, and cleanliness throughout the designs of each screen. This approach not only enhances the aesthetic appeal but also contributes to a more user-friendly experience.
Typography
For Lumina SkinCare, I selected Poppins, a sans-serif typeface known for its modern and clean appearance. This choice was made for its excellent readability and flexibility in font styles. By using different weights like bold and medium, along with adjusting kerning and line height, I created a clear hierarchy in various sections of the designs. This approach is particularly noticeable in the item descriptions on the product page, enhancing user comprehension and engagement.
Style guide
WCAG, Accessibility, and Inclusive Design
Throughout the design process for Lumina SkinCare, I prioritized accessibility guidelines, considering them integral to the design rather than an afterthought.
When selecting colors for the designs, I ensured a high contrast between elements to accommodate users with visual impairments. The black-and-white palette, with shades of grey, was chosen specifically for its accessibility.
I opted against using carousels on the homepage, instead favoring a hero image/banner as the main call to action. This decision was motivated by the limitations carousels pose for users with screen readers, as text embedded in images is inaccessible to these users. By overlaying a separate text element on the hero image/banner and adding a transparent white background, I made the information accessible and clear for users with visual impairments.
Font size was another critical consideration. I maintained font sizes of 14px and above for mobile and 16px and above for desktop, with the exception of 12px for small labels on mobile. Ensuring target sizes for call-to-action elements (44px) was also crucial, verified through testing using Figma Mirror to guarantee easy tapping on mobile screens.
8. Conclusion
Reflecting on Lumina SkinCare’s case study, I’m satisfied with the final outcomes of my research and design solutions. This project taught me the importance of designing for the user while considering business needs and maintaining Lumina SkinCare’s core values and brand identity.
Exploring this case study was a fulfilling experience, allowing me to immerse myself in detailed UX research. While some aspects of my research, like surveys and initial background research, were successful, I acknowledge the potential benefits of interviews for refining the information architecture and gathering qualitative insights. Although time constraints limited these methods in this project.
Before and after for Home page
Before and after for Product page
Before and after for Product page
Thank you for taking the time to read through my case study. I hope you found it informative and insightful as I did while researching and redesigning Lumina SkinCare’s design. If you’re interested in delving deeper into the design process, exploring the grid system, components, and more, you can view the Figma design. Feel free to reach out to me if you have any questions or would like to discuss further. Thank you again for your interest!”
say hello … neoephrat@gmail.com
