Befitting | Fielmann Website
Task
Redesign Website, UI/UX Design
Befitting is an online eyewear retailer that simplifies purchasing prescription glasses and contact lenses by integrating vision insurance directly into the shopping experience. What sets Befitting apart from other online eyewear companies is its seamless integration with a broad range of vision insurance plans, allowing customers to see their benefits applied in real-time during the shopping process. This feature eliminates surprises at checkout and maximizes savings.
Befitting’s business goal is centered around revolutionizing the eyewear shopping experience by providing a seamless, personalized, and customer-centric platform that integrates vision insurance, offers tailored recommendations, and ensures convenience for users.
Following the acquisition of Befitting by Fielmann USA—the first U.S. expansion of Fielmann AG, Central Europe’s leading optical retailer and the world’s third-largest—I transitioned into a collaborative role under the direction of the Fielmann USA team.
I was tasked with executing UI design projects aligned with Fielmann’s strategic vision, including the redesign of Befitting’s website to meet elevated brand, usability, and performance standards.
The project aimed to elevate the online eyewear shopping experience by modernizing the visual design, streamlining navigation, and improving content structure—ensuring users could effortlessly explore products, use the virtual try-on feature, and complete purchases with confidence..
ROLE
Team Lead, UI Designer
TOOLS
Figma, Adobe Photoshop, XD, Illustrator
PROCESS
Research, Wireframing, Hi-Fi Mockups and Designs, Developer Handoff
Outdated Visual Design:
The previous site design lacked a modern aesthetic and did not align with current UI/UX standards, resulting in a dated look that undermined trust and user engagement—especially critical for a fashion-forward eyewear brand.
Unclear Navigation Flow:
Users struggled to browse frames, understand the try-on process, or navigate between shopping and prescription tools. The navigation lacked clarity and hierarchy, contributing to user drop-offs and friction in the buyer journey.
Disorganized Content Layout:
Key product information, shopping tools, and support content were scattered or hidden, making it difficult for users to quickly find what they needed—particularly on mobile devices.
Site Audit
Performed a detailed audit of Befitting’s existing website to uncover usability challenges, design inconsistencies, and friction points in the customer journey. Assessed performance metrics such as page load speed, virtual try-on accessibility, and mobile responsiveness to identify areas impacting the shopping experience.
Competitive Analysis
Analyzed direct-to-consumer eyewear brands and digital retailers to benchmark user flows, design aesthetics, and shopping tools. Identified trends in virtual try-on UX, product filtering, and checkout processes to shape a modern, competitive redesign strategy tailored to Befitting’s brand and user base.
User Behavior Analysis (Google Analytics)
Reviewed Google Analytics data to gain insights into how users were interacting with key pages—such as homepage, product listings, PDPs, and the try-on flow. Pinpointed high-exit and high-bounce points to prioritize UI enhancements that would increase engagement and reduce drop-offs.
Redesigned the site map to reflect a more intuitive, user-centered content structure. Streamlined navigation across the shopping funnel—from browsing frames to using the try-on tool and completing purchases—by organizing content into logical, accessible categories.
User Behavior Analysis (Google Analytics)
Reviewed Google Analytics data to gain insights into how users were interacting with key pages—such as homepage, product listings, PDPs, and the try-on flow. Pinpointed high-exit and high-bounce points to prioritize UI enhancements that would increase engagement and reduce drop-offs.
Created a design system comprising visual guidelines, typography, color palette, and UI components to maintain consistency across all pages and ensure a cohesive user experience.
An ADA compliance scan of Befitting’s original brand colors revealed several accessibility issues. Ensuring color contrast meets WCAG guidelines is essential for inclusivity, and a positive user experience. Moving forward, I slightly adjusted the brand colors to meet ADA standards which will significantly improve the accessibility and usability of Befitting’s website and visual identity.
Developed wireframes outlining the layout, structure, and content placement of each webpage. Iteratively refined wireframes based on stakeholder feedback and usability testing results.
Translated wireframes into high-fidelity UI designs with a focus on clean aesthetics, intuitive interactions, and responsive layouts. Integrated Befitting’s brand elements—such as color palette, typography, and product imagery—to create a cohesive, modern shopping experience. A key design priority was optimizing the user journey to encourage sign-in with vision insurance, ensuring users could easily access their benefits and streamline their path to purchase.
Collaborated with the development team to implement the finalized designs and launch the redesigned website. Monitored post-launch performance metrics and addressed any bugs or issues promptly.
Design QA
Performed thorough quality assurance testing to identify and address any design inconsistencies, layout issues, or usability concerns. Ensured compatibility across various devices and screen sizes.
As the UI Design Lead for Befitting’s website redesign, I was responsible for elevating the digital user experience across key customer touchpoints, including the homepage, product detail pages (PDPs), virtual try-on flow, and shopping cart. I translated strategic goals into high-fidelity UI designs that balanced aesthetic appeal with usability, accessibility, and performance.
A core part of my contribution was refining Befitting’s digital visual language—establishing consistent use of typography, color, iconography, and interactive elements to strengthen brand identity across the site. I also led the effort to ensure component consistency across all responsive breakpoints, creating a scalable UI system that enhanced design efficiency and developer implementation.
In addition to my design responsibilities, I served as team lead, overseeing two graphic designers. I delegated tasks, provided creative direction, and ensured alignment with project timelines and brand standards. My leadership helped streamline workflows, foster collaboration, and deliver a cohesive user interface that supported business goals—especially the critical objective of guiding users to sign in with their vision insurance early in the shopping experience.
One of the key challenges I encountered was designing around the complexity and technical constraints of Befitting’s Virtual Try-On platform—an essential feature that allows users to preview eyewear styles on their face in real time. My goal was to seamlessly integrate this tool into the user experience without disrupting the overall shopping flow. By applying UX/UI best practices, I created a clean, intuitive mockup that prioritized usability while visually guiding users to engage with the try-on feature as a natural part of their product exploration journey.