WW Design systems
Summary
After 6 years and many of mixing design styles WeightWatchers had reimagined it’s digital side with a new unified design system for the team to work faster and WW’s members to feel more successful in. Andrew worked to flag and resolve inconsistencies in the components being used, roll in the new Figma features, and propose new additions to the design system when called for.
01The origin
bending till it broke
Design systems need to be flexible for them to be reliable and used across multiple use cases and screen sizes. Before the initial rollout of the design system Andrew contributed to its formation by beta testing the components in his existing work and flows. Call attention to not only when things broke but when naming conventions, variables, and descriptions failed to aid in creativity.
02Repair
shit ingredients = shit food
Andrew believed that for a design system to be successful it needed to reflect the nature of the organization using it. To do this, the team would need to create and support the components that it created. In essence designers are always eating what they produce. Andrew didn’t want his team to make poor work so he gave them tools to make good work.
14
Branches
includes improvements, additions, and hot fixes10
Merged
includes improvements, additions, and hot fixesHead of Product Design
Noah Stokes
Andrew is always keeping an eye out for better ways of working whether it be improved processes or new ways of organizing, Andrew would always bring a solution to any problem he was addressing.
03updates
folding in rollouts
As Figma worked to make updates to make design system designers lives simpler so too did those designers strive to make their design orgs simpler, Andrew was one such design system designer.
04new stuff
haptics
The new design system improved our visual appeal but interacting with the experience still felt flat and stale. Leveraging the new design system as a way to move nimbly Andrew successfully merged a branch and created ticket and a test plan to bring a tactile experience that was on par with our visual one to WW’s members.
Empty inbox illustration
You know that feeling when you’re giddily awaiting for a package to come in the mail you open the box, and its empty :(. So did Andrew, that’s why he added a new illustration to the library. So next time you open your empty mailbox, it wont feel so empty.
Go-to market messaging
WeightWatchers used Braze, a integrated 3rd party software to help deliver targeted in-app messages to members. While powerful at selecting for Who the What was shoddy at best. Seeing an opportunity to enhance the experience for members Andrew added to the design system templates that could be HTML coded into Braze and served the needs of both Product, Marketing and WW’s members.
big bets
for driving feature adoption on the biggest product launches each half year.Full screen
for when WW wants to get the member excited about something new or updatedsmall & mighty
for calling out Quality of life changes that are small but mightyOne thing learned
We’re all humans at the end of the day and we all make mistakes. Components will never be perfect and can always be used incorrectly, and thats okay. Designers know that users will always find a way to break things so why would we be any different?
One Avoidable mistake
Pushing A lot of people have different views on design systems and how nitty gritty to get in control versus freedom. Hearing everyones input is important but trying to appease everyone can lead to no where. Sometimes making the best informed decision is what is needed. Make, Break, Learn, Repeat.