Braze Learning

General Mission

Revamp the Braze Learning Site with a user-centric redesign to enhance usability, decrease drop-off rates, and elevate engagement through improved UX and design.

Type

Web Development

CSM Integration

User Research
UX/UI Design
Prototyping

Contribution

Frontend Engineer
UX Designer
UX Researcher

Languages & Tooling

TypeScript

React

HTML5

SCSS

SQL

Sanity CMS

Astro

Overview

Access the site

Braze Learning is a comprehensive training program designed to empower marketers and developers with the skills needed to maximize the potential of the Braze customer engagement platform. Through interactive courses, real-world case studies, and hands-on tutorials, it guides users in leveraging data-driven insights, multi-channel messaging, and personalized automation to create dynamic and engaging customer experiences.

Over the course of two fiscal quarters, we completely overhauled the Braze Learning Site—redesigning the user experience to enhance usability, reduce drop-off rates, and boost overall engagement. In addition to a visual and interactive refresh, we reimagined the content creation flow by developing a custom CMS. This solution empowered our designers and writers to seamlessly create lessons and pages with minimal engineering support, while still adhering to the highest web best practices. Through these strategic initiatives, we transformed the platform into a dynamic hub for continuous learning, perfectly aligning with Braze’s commitment to excellence in customer engagement technology education.

My Role

Operating on a two-person engineering team with limited design resources, I took on a dual role as both a frontend developer and UX lead. Balancing technical execution with user-centered design, my work was structured into three key phases:

Phase I: Design and User Research

User Insights & Analytics: Conducted in-depth user research via surveys, interviews, and Google Analytics to identify pain points and opportunities for improvement.
Wireframing & Prototyping: Designed and iterated on wireframes in Figma, refining the user experience through usability testing with Hotjar and UserTesting.com.
UX Optimization: Redesigned navigation and page structures to improve accessibility and engagement, ensuring an intuitive learning experience.

Phase II: Implementation and Integration

Code Modernization: Rebuilt the frontend with modern frameworks (React, ES6) to improve performance, scalability, and maintainability.
CMS Development: Engineered a custom CMS using Next.js and a headless CMS (Contentful) to enable content creators to publish and update lessons independently.
Creative Flexibility: Developed reusable components and page templates, allowing designers and writers to build dynamic content without engineering involvement.
Performance Enhancements: Integrated Google Optimize for A/B testing and continuously refined the UX based on real user data.

Phase III: Continuous Improvement & Reducing Engineering Reliance

Automated Updates: Streamlined deployments using GitHub Actions to ensure quick, low-maintenance updates.
Self-Service Tools: Built an internal dashboard that allowed non-technical users to modify content layouts while maintaining best web practices.
Data-Driven Iteration: Used Google Analytics and Google Data Studio to monitor user behavior and guide ongoing improvements.
Scalability & Documentation: Standardized workflows and created detailed documentation to ensure long-term sustainability and ease of handoff.