CASESTUDY
UI/UX Designer
Laurie Langston-Wiebe
VERSACORK
MOSAIC TILES
CAPSTONE WEBSITE REDESIGN
Bridging Curiosity and Confidence: A User-Centered Redesign for Sustainable Cork Tiles
PROJECT
BACKGROUND
CLIENT: Versacork Mosaic Cork Tiles - a provider of sustainable, post-industrial recycled cork tile sources from the wine bottling industry
MARKET: Commercial and residential projects for eco-friendly, versatile tile solutions
PROBLEM: The current website lacks visibility, does not effectively engage homeowners, and does not facilitate confident purchasing decisions
GOAL: Redesign the website to improve discoverability, attract residential buyers, and enhance the online shopping experience
OBJECTIVE
-
INCREASE Website traffic and brand awareness
-
ENGAGE residential customers by providing clear, accessible information
-
STREAMLINE the online purchasing process for better conversion
TOOLS
INTRODUCTION
METHODS
-
STAKEHOLDER MEETING: Discussed business concerns and website challenges.
-
USER INTERVIEWS: Conducted interviews with 4 homeowners planning or completing a renovation.
-
AFFINITY MAPPING: Identified common themes in user research.
-
HEURISTIC EVALUATION: Assessed website usability issues.
KEY INSIGHT
USER BEHAVIOR
AND PREFERENCES
-
Homeowners begin material research online and rely on visual inspiration.
-
Sustainability is a factor, but not the primary driver for product choice.
-
Clear product information and real-life applications are crucial for decision-making.
CHALLENGES AND PAIN POINTS
-
Users are aware of cork but do not consider it a viable option due to uncertainty about durability, applications, and cost.
-
Websites with poor navigation or difficult checkout processes deter potential buyers.
TAKE
AWAY
Versacork Mosaic Cork Tiles’ website needs a balance between education and accessibility—providing enough information for users to feel confident in their purchase without overwhelming them
RESEARCH
DEFINE
USER PERSONA
MEET MARK
MARK, 42
The Eco-Conscious Homeowner
OCCUPATION: Architect and Home Renovator
GOALS: Incorporate sustainable materials onto his home projects
BEHAVIORS:
-
Researches materials online before making decisions
-
Prefers sites with clear product details, real-life applications, and cost transparency
-
Needs seamless shopping experience to feel confident in purchasing
PAINPOINTS:
-
Hard to find trustworthy information on cork tile applications
-
Unclear cost breakdown and installation guidance
-
Frustration with websites that are difficult to navigate
JOURNEY MAP
SCENARIO:
Mark is considering eco-friendly materials for his upcoming bathroom renovation
GOALS:
-
Learn about cork tile durability, application and cost
-
Compare Products and get inspiration from real world examples
-
Easily purchase tiles online without frustrations
CHALLENGES:
-
Discovery Issues: The website is hard to find via search engines
-
Lack of Educational Content: Product pages lack compelling reasons to choose cork
-
Navigation Friction: Information is scattered, making it hard to locate key details
-
Checkout Concerns: Users hesitate to purchase without clear pricing or installation guidance
PROBLEM
STATEMENT
Versacork Mosaic Cork Tiles' website does not meet the needs of homeowners interested in sustainable materials. How can we improve the site to make research and purchasing easier, building confidence in cork as a viable option?
DESIGN
METHODS
-
MoSCoW METHOD: Prioritized essential features
-
CARD SORTING: Conducted with participants to refine content organization
-
SITE MAP: Restructured navigation for easier access to product info and purchasing
-
WIREFRAMES: Established and Refined layout and features through ideation and iteration
FEATURE PRIORITIZATION
MoSCoW Method
METHODS
-
USER PERSONA: Developed a persona representing a typical residential customer.
-
JOURNEY MAP: Mapped the user’s experience from research to purchase.
-
PROBLEM STATEMENT: Defined the key challenge to solve.
HI-FI WIREFRAMES AND PROTOTYPE
Applying Branding and Enhancing usability
-
Implemented final branding elements- color palette, typography and imagery- ensuring a cohesive look
-
Applies high-quality product photos to enhance visual appeal and build consumer trust
-
Created an interactive prototype in Figma to validate navigation flow and user interactions
-
Ensured the new design addressed key pain points: Improving findability, clarifying product details, and simplifying the checkout process
LO-FI WIREFRAMES
Concept and Layout Exploration
-
Sketched multiple homepage and product information page layouts to explore potential structures
-
Focused on information hierarchy, ensuring that users could quickly access product details, sustainability info and purchase options
-
Introduced a circular motif throughout the design, inspired by the circles in the mosaic tile, reinforcing brand identity
-
Creates intial sketches in Figma, testing different arrangements to find the most intuitive Structure
MID-FI WIREFRAMES
Usability Refinements and Content Integration
-
Refined layout by introducing product images and article content, making information more engaging
-
Adjusted navigation based on user feedback, ensuring product discovery was straightforward
-
Focused on clear categorization of product information (inherent properties vs sustainability benefits)
-
Iterated on placement of FAQ, sustainability details and pricing visibility to reduce user friction
GOAL
-
Create a modern, approachable website that aligns with eco-conscious values
-
Ensure clarity in product presentation to build trust and engagement
Visual Enhancements
Color Palette:
-
Retained the original purple to acknowledge the connection to the wine industry
-
Expanded neutral colors adding medium, light and dark shades of brown evoking the earthy nature of cork
Typography:
-
Poppins: a modern geometric font to enhance readability and reiterate the circle motif
-
Satisfy (lowercase): included a script for accents and casual, approachable nature
LOGO:
-
Reworked the logo for a more modern appearance and variations
-
Included the circle motif directly to the logo to reiterate the brand identity
FINAL PROTOTYPE and OUTCOME
Key UX/UI
Improvements
-
IMPROVED DISCOVERABILITY: Enhanced SEO and navigation to drive traffic
-
EDUCATIONAL CONTENT: Added clear product benefits and real world applications
-
STREAMLINED PURCHASING: Simplified checkout for a frictionless experience
-
USER-CONFIDENT DESIGN: Strong visuals and testimonials to reinforce decision making
FINAL THOUGHTS
The redesigned Versacork Mosaic Tile website now serves as a trusted resource for homeowners, making sustainable tile selection easier and more engaging. The enhanced user experience encourages confident purchasing, ultimately increasing sales and brand engagement.
