Back to Product Design Leadership

04 - Design system (Design system, Web design, Visual design, XF collaboration)

Marketing design system

Composed of SurveyMonkey brand guidelines and visual components that communicate the brand across the marketing web ecosystem, which includes homepage, product microsite, landing pages, SEM and SEO pages.

Role & contribution

Role
System proposal · Design core and component library
My contribution
Proposed the system, consolidated scattered patterns with engineering, and built the design core and component library. Set up office hours and weekly MDS feedback meetings to decide updates.
Collaboration
Engineering: shared implementation and guide/documentation publishing. CMS manager: component adoption. MDS team: ongoing feedback and iteration.
Scope
SurveyMonkey marketing web ecosystem · 40+ components · Initial development through adoption and ongoing updates.

Intro

Marketing design system is used for SurveyMonkey's Marketing web ecosystem, allowing teams to create a positive and unified brand experience while connecting the recognized SurveyMonkey brand to global web pages.

My role

I proposed the system and worked with engineering to consolidate scattered design patterns, connecting the newly established Momentive brand to global web experiences. I built the design core and component library; engineering published the guides and documentation, and the CMS manager applied components.

I set up design-system office hours and weekly MDS feedback meetings to decide the next updates.

Designed role icon

Designed 40+ different components with all the possible variations to provide designers the maximum flexibility

Facilitated role icon

Faciliated collaborative sessions with cross-functional teams to define issues based on weather performance or improvement related

Planned role icon

Planned and orchestrated multiple design initiatives throughout the project lifecycle

Collaborated role icon

Collaborated with multiple stakeholders and cross-functional teams from the ideation to QA

Training role icon

Provided several trainings and workshops to keep stakeholders and users in the loop with the latest updates.

Maximum effeciency with flexibility

Using previous marketing pages, I began transforming all key assets into elements and components that can be used globally while maintaining the flexibility of these components (accessibility, localization, mobility, etc.).

Later in the process, I created template pages to ensure the components were visually aligned and readily available to the design team via the Library. This allowed the design team to quickly construct consistent marketing web pages using pre-made, editable and flexible components.

Reduced build time, from Eng > Design > Web
50%
Reusable, customizable, scalable components
40+
Global update can apply 100s pages
1
Tests running at the time · 55 completed
41

MDS Library

Creative marketing central hub for where brand guidelines, building blocks, and components live. This internal library is the source of truth for design, web, and engineering teams.

Peer feedback

Twice-a-year, SurveyMonkey asks employees to select 3-5 peers to request feedback from, on their behalf, through the Feedback Survey Tool. Here's some feedback received from my peers for the design system collaboration.