Concert Design Language
Concert Design Language
Concert Design Language
When I joined Vox Media as their first product designer on the Ads/Revenew team, our team had no design system and relied on engineers to create components from scratch based on written requirements.
I proposed building a design system from the ground up to maintain a cohesive UI and consistent UX patterns. Building a design system became a key strategy that helped us redesign existing products, build new products, and also scale those products.
When I joined Vox Media as their first product designer on the Ads/Revenew team, our team had no design system and relied on engineers to create components from scratch based on written requirements.
I proposed building a design system from the ground up to maintain a cohesive UI and consistent UX patterns. Building a design system became a key strategy that helped us redesign existing products, build new products, and also scale those products.
Principal, Product Designer
Principal, Product Designer
Principal, Product Designer
Design system
Component design
Tailwind & Storybooks
Figma Adoption
User Experience Design
Prototypes
Implement Design Processes Support Engineering Team
Main Challenges
Main Challenges
Main Challenges
Adapting to new tools
New Procceses
Design Systems for Engineering
Old designs vs new designs
Hosting
Tools
Shortly after joining Vox Media, I conducted two types of audits. The first audit was to understand the stack the team used to work and develop products. In this case, they used Google Docs for requirements, JIRA to keep track of dev tickets, and a large selection of dev languages to build products.
For the second audit, I focused on processes. I wanted to understand the internal processes the team had in place. With design not being part of their current process, I needed to help my team develop a workflow that involved the design process, reviews, handoffs, QA, and post-build audits.
Shortly after joining Vox Media, I conducted two types of audits. The first audit was to understand the stack the team used to work and develop products. In this case, they used Google Docs for requirements, JIRA to keep track of dev tickets, and a large selection of dev languages to build products.
For the second audit, I focused on processes. I wanted to understand the internal processes the team had in place. With design not being part of their current process, I needed to help my team develop a workflow that involved the design process, reviews, handoffs, QA, and post-build audits.
Tools
Eventually, I introduced the general team to Sketch, Invision, and Zeplin as a proposition to grow our stack and create a more productive process for our team. It took time for the engineering team to understand some of these tools. Still, I set up working sessions where I collaborated with them to provide knowledge on how to use these tools and show them the value of using Sketch for design, Invision to prototype, and Zepling to handoff code.
Eventually, I introduced the general team to Sketch, Invision, and Zeplin as a proposition to grow our stack and create a more productive process for our team. It took time for the engineering team to understand some of these tools. Still, I set up working sessions where I collaborated with them to provide knowledge on how to use these tools and show them the value of using Sketch for design, Invision to prototype, and Zepling to handoff code.
Tools
This critical change allowed us to introduce Whimsicle and Storybook to our stack. We began using Whimsicle to create user flows with stakeholders, and design and engineering invested time in bringing design components into Storybooks where we could host them.
This critical change allowed us to introduce Whimsicle and Storybook to our stack. We began using Whimsicle to create user flows with stakeholders, and design and engineering invested time in bringing design components into Storybooks where we could host them.
Concept Wireframes
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Once we had a user flow that met the business needs of the product, I leveraged our insights and transitioned into the user experience design phase for the Ad Manager Tool. The findings served as a compass, guiding the creation of wireframes that laid the foundation for our design. These wireframes became invaluable prototypes, allowing us to test and refine our concepts before delving into high-fidelity designs.
Once we had a user flow that met the business needs of the product, I leveraged our insights and transitioned into the user experience design phase for the Ad Manager Tool. The findings served as a compass, guiding the creation of wireframes that laid the foundation for our design. These wireframes became invaluable prototypes, allowing us to test and refine our concepts before delving into high-fidelity designs.
Product Design
The wireframes in the design process were instrumental in shaping the Ad Manager Tool. This helped me design a frictionless user experience. I strategically planned the hierarchical structure by translating insights from user flows and wireframes, placing key features for optimal user-centric design. This approach paved the way for a seamless transition to high-fidelity design, with wireframes as a foundational roadmap. Through iterative testing and user feedback, the final design emerged as an intuitive and cohesive experience for users hoping to create ads.
The wireframes in the design process were instrumental in shaping the Ad Manager Tool. This helped me design a frictionless user experience. I strategically planned the hierarchical structure by translating insights from user flows and wireframes, placing key features for optimal user-centric design. This approach paved the way for a seamless transition to high-fidelity design, with wireframes as a foundational roadmap. Through iterative testing and user feedback, the final design emerged as an intuitive and cohesive experience for users hoping to create ads.
The Ad Manager Tool project was an extensive and collaborative effort that reflected the dedication and synergy of the entire team. Over time, we found a great rhythm, with each team member contributing their expertise to bring the project to fruition. The collective commitment to excellence resulted in the successful launching of a high-functioning product that met and exceeded expectations. Notably, the Ad Manager Tool significantly impacted ad sales, showcasing a 10% increase in performance each quarter.
I am very proud of this project. I joined this team as the first product designer; aside from having to design and build an ad management tool from scratch, it was also challenging to understand the ad ecosystem at Vox Media and how our networks and partners work to serve our customers' ads.
One of my favorite challenges I faced was helping our engineering team understand design processes so collaboration could be more transparent and inclusive. I created processes that included a cadence of design review, a feedback loop, design support for our dev team, and a transparent decision-making process with stakeholders.
The Ad Manager Tool project was an extensive and collaborative effort that reflected the dedication and synergy of the entire team. Over time, we found a great rhythm, with each team member contributing their expertise to bring the project to fruition. The collective commitment to excellence resulted in the successful launching of a high-functioning product that met and exceeded expectations. Notably, the Ad Manager Tool significantly impacted ad sales, showcasing a 10% increase in performance each quarter.
I am very proud of this project. I joined this team as the first product designer; aside from having to design and build an ad management tool from scratch, it was also challenging to understand the ad ecosystem at Vox Media and how our networks and partners work to serve our customers' ads.
One of my favorite challenges I faced was helping our engineering team understand design processes so collaboration could be more transparent and inclusive. I created processes that included a cadence of design review, a feedback loop, design support for our dev team, and a transparent decision-making process with stakeholders.
