.png)
Revamping the B2B Odor Control Website with a Scalable Design System
Luften/AromaQ is a B2B company specializing in odor control solutions for facilities such as hospitals, hotels, nursing homes, and property management. When I joined Luften, the existing website lacked a cohesive structure, leading to an inconsistent user experience. My role as a Product Designer was to overhaul the UX, establish a structured components library, and make strategic design decisions that enhanced the website’s usability and scalability.
Client
Luften/ AromaQ
Project Deliverable
Website Redesign
Design System
Design Process
Understand Research Analyze Design User testing Development
Tools Used
Figma, Miro, Adobe Illustrator
Prototyping
Hi-fidelity Landing Page
.png)
Challenge
01 Inconsistency in UI elements : The absence of a design system led to varying fonts, colors, and layouts across pages.
02 Distinct yet unified service pages : Each service needed to have a unique identity while maintaining a professional and cohesive look.
03 Optimizing for B2B engagement : The site needed to communicate technical solutions in a digestible and engaging way.
04 Responsiveness across devices : The website had to be optimized for tablets and iPhones, ensuring seamless access for business clients.
Research
Website Visit Insight
01 Too much of information has been leading to confusion.
02 Impact and guidance of the User Interface is missing.
03 Emotional connect with the social causes is lost while navigating through the data.
04 Information overload is blocking the asset managers from exploring the data and its impact.
Criterion Institute
Criterion is a nonprofit think tank dedicated to expanding possibilities for how finance can be used for social change. They work with changemakers, investors, governments, and institutions to transform whose voices are heard, whose expertise is valued, and whose metrics define success in financial decision-making.
The "Standards of Practice Table" project aims to design a user-friendly interface for accessing Criterion's database of over 300 individual standards.
Objectives:
01 Enable specific, precise filtering for audience use cases.
02 Provide interactive visualization tools for exploration.
03 Foster new perspectives on gender lens investing without requiring adoption of standards.
Research & UX Strategy
01 A UI audit to identify inconsistencies in typography, spacing, and branding.
02 Competitive analysis using Cintas and other corporate service providers as benchmarks.
03 Information architecture restructuring to streamline the site’s organization and improve navigation.
04 UX writing refinements to ensure technical content was accessible and persuasive.
Design Process
Design System & Components Library
To bring order to the design, I built a scalable components library that allowed for flexibility while maintaining consistency. The key components included:
02 Competitive analysis using Cintas and other corporate service providers as benchmarks.
03 Information architecture restructuring to streamline the site’s organization and improve navigation.
04 UX writing refinements to ensure technical content was accessible and persuasive.
Design Plan
Site Map
01 A structured multi-level menu designed for easy access to services, solutions, and company information.
02 Sticky navigation for seamless user movement across pages.
Design System & Components Library
To bring order to the design, I built a scalable components library that allowed for flexibility while maintaining consistency. The key components included:
1. Typography
2. Color Palette
-
Font: Chosen for its professional, clean aesthetic, ensuring readability across all screens.
-
Font sizes: Standardized for headings, subheadings, and body text to maintain hierarchy.
-
Color palette: A balance of deep navy for professionalism, crisp white for clarity, and accents of teal and green to convey freshness and hygiene.
.png)
4. Input
-
Simplified lead-generation forms with clear labels and large touch targets for mobile users.
-
Minimalist design to keep focus on essential input fields.
Outcome
Key Impact
40%
Reduction in design time by establishing a components library.
20%
Reduction in bounce rate.
15%
Boost in user retention.
30%
Increase in search engagement.
Impact
01 A structured design system accelerates growth. Having reusable components reduced inconsistencies and improved efficiency.
02 Typography can be a powerful design element. Focusing on strong type hierarchy helped communicate the message effectively.
03 B2B websites need a balance of information density and clarity.
04 By improving IA and UX writing, we made complex solutions easier to digest.
05 This project reinforced my approach to systems thinking in design, ensuring every component serves a purpose.