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

  1. Aligning the Brand with Decibel's Vision: Creating a visual identity that represents Decibel's technological leadership in sound measurement technology.

  2. Improving User Experience: Simplifying navigation, making content structure more apparent, and adding more functionality.

  3. Growing Engagement: Overhauling key areas like product pages and the resource center to create more engaging experiences.

  4. 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:

  1. Outdated brand aesthetic: The previous visual identity failed to convey Decibel's innovative approach, impacting brand perception and credibility.

  2. Poor site navigation and information architecture: Users struggled to find essential product information, leading to frustration and higher bounce rates.

  3. 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.

  4. 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 guides

  • Resource center with advanced filtering options, making technical documentation more accessible

  • Accessibility considerations, including color contrast, keyboard navigation, and alt text

Next
Next

Decibel Branding