Project Overview
Decibel underwent a comprehensive brand and website redesign to align its digital presence with its evolving business objectives. The primary business goals included enhancing brand perception as an innovative leader in sound measurement technology, improving user engagement through a seamless digital experience, and driving conversions by simplifying the product evaluation and purchasing process. The goal was to create a cohesive visual identity and user-centric website that reflects Decibel's innovative approach to sound measurement technology.
My Role: Lead Designer (UX/UI) + Art Director
The team: Lauren Denhof + Alvaro Ruiz + Marian Castaneda
Year: 2020-2021
Goals
Aligning the Brand with Decibel's Vision: Creating a visual identity that represents Decibel's technological leadership in sound measurement technology.
Improving User Experience: Simplifying navigation, making content structure more apparent, and adding more functionality.
Growing Engagement: Overhauling key areas like product pages and the resource center to create more engaging experiences.
Maximizing Measurable Results: Improving time on site, lowering bounce rates, and increasing user satisfaction.
Problem Statement
Decibel's old website and brand identity were not conveying the company's state-of-the-art technology or setting it apart from competitors. The user experience was fragmented, navigation was clunky, and visual identity was incoherent.
Key challenges:
Outdated brand aesthetic: The previous visual identity failed to convey Decibel's innovative approach, impacting brand perception and credibility.
Poor site navigation and information architecture: Users struggled to find essential product information, leading to frustration and higher bounce rates.
Lack of visual hierarchy and user flow clarity: Inconsistent design patterns made it difficult for users to prioritize content, slowing down their decision-making process.
Limited brand differentiation: The website did not effectively communicate Decibel's unique value propositions, making it harder to stand out in a competitive market.
Brand Development
Our brand redesign focused on creating a modern and cohesive identity that reflects Decibel's expertise and forward-thinking nature.
The brand identity is built around two core archetypes: The Magician and The Lover. The Magician archetype leads, innovates, and transforms, while the Lover archetype understands, relates, and connects. Combining these archetypes, we defined Decibel's personality in a space crowded by vendors saying the same thing. This unique perspective allowed us to differentiate and provide a new outlook—transforming the analytics experience into one that empathizes with customers as people.
Outcome & Impact
The new Decibel site came out well, offering:
35% hike in time on page averaged, attributed to more intuitive look-and-feel and engaging content organization
20% reduction in the bounce rate with simpler navigation and bigger CTAs
Consistent brand experience across all touchpoints through the implementation of a comprehensive component-based design system
Positive feedback from stakeholders regarding the appearance, functionality, and usability of the site, which reflects the successful integration of business objectives with user needs
Key takeaways:
Early user involvement leads to more informed design decisions
Design systems based on components promote better scalability and maintainability
Test and design iteration yields more user-centered outcomes
Tools Used
Figma, Adobe Illustrator, Google Analytics, Wordpress
Competitive Analysis
User Personas
I interviewed 12 people - all at different work stages - to understand potential users. We developed our primary user persona based on research insights to guide the design process.
Wireframing:
Created low-fidelity wireframes to map out key pages and user journeys, ensuring content hierarchy and usability
Iterated wireframes based on stakeholder feedback and usability testing results
Developed annotated wireframes to document interactions, functionality, and content requirements
Prototyping:
Built high-fidelity prototypes in Figma to simulate user flows and gather feedback from stakeholders and users
Used component-based design to ensure consistency and streamline development
Key Features:
Modular component-based design system for scalability and consistency. Key components included reusable button styles, form fields, and card layouts, which streamlined the design process and ensured uniformity across the website. The system allowed for faster prototyping and easier updates, enhancing collaboration between design and development teams.
Clear visual hierarchy with ample white space and well-defined CTA buttons
Interactive product pages featuring dynamic content such as product specs, videos, and user guidesResource center with advanced filtering options, making technical documentation more accessible
Accessibility considerations, including color contrast, keyboard navigation, and alt text