Empowering Users with Ad Favoriting One of the first key features introduced was ad favoriting . Users previously struggled to find specific ads for reports or client presentations due to inconsistent naming conventions. To solve this, we introduced the ability for users to favorite ads, which added them to a dedicated section for easy access.
Hymnal feature to save ads to 'Favorites'
Solutions:
Created a favorites section in the navigation menu. Enabled users to toggle between grid and list views. Allowed users to filter and sort ads by type and format. This feature significantly streamlined the workflow for sales teams, who could now easily locate and share the best-performing ads with clients. The process of managing ad collections became much more intuitive and efficient.
Enhancing Efficiency with Split-Screen Interface Previously, users had to scroll down long pages to view ad previews and then scroll back up to make changes, making the process frustrating and slow. To address this, we introduced a split-screen interface where users could view a live preview of their ad on one side while making changes in a scrollable area on the other.
Hymnal Chanel ad with split screen editing
Solutions:
Implemented a responsive live preview on one side of the screen. Introduced tabbed navigation for different aspects of ad creation (e.g., design, code, ad tracking). Added an auto-save feature to eliminate the need for manual saving. Standardized naming conventions for ads, further streamlining the process. This update allowed users to see the results of their changes in real time, drastically improving productivity and reducing the chance of errors.
Creating Consistency with a Unified Design System Before the redesign, Hymnal had inconsistent design elements across the platform, leading to confusion among users. We addressed this by developing a unified design system inspired by Brad Frost’s "Atomic Design" methodology. This new system included a library of reusable components that made the platform more cohesive and easier to maintain.
Hymnal internal component + pattern library
Solutions:
Rebranded Hymnal for a consistent look and feel across all ads. Developed a pattern library with foundational components like buttons, typography, and color palettes. Used BEM naming conventions to maintain code consistency. Provided detailed documentation for each component to ensure ease of use for designers and developers. This design system not only improved the user experience but also made the platform scalable, allowing developers to quickly implement new ad formats without starting from scratch.
Results and Impact The redesign of Hymnal had a profound impact on the platform and its users:
Increased Efficiency: The split-screen interface and favoriting feature significantly sped up the ad creation process, saving users time and improving productivity.Improved User Experience: The unified design system provided a more consistent and intuitive experience for all users, from designers to ad managers.Faster Ad Performance: Ads loaded faster, which improved performance across Vox Media’s properties.Scalability: Hymnal was now equipped to handle new ad formats and innovations, ensuring its continued success as Vox Media expanded.The success of the project demonstrated how thoughtful design can make a powerful difference when aligned with user needs and technical goals.
Reflections This project was an incredible opportunity to lead a cross-functional team in solving complex design challenges. We not only improved the functionality of Hymnal but also created a more enjoyable experience for its users. One of the most valuable lessons I learned was the importance of rapid iteration—by continuously gathering feedback and incorporating it into each design sprint, we were able to create a solution that truly met user needs. The project’s success has inspired me to continue focusing on user-centered design in future projects, always ensuring that both business goals and user needs are met effectively.