weight watchers product hero image

My Role

  • Consistency and Pattern Design

Who

My visual design partners

Timeline

  • January 2016 - March 2017

Having a consistent experience makes our app easier to use and learn.

When I joined the Weight Watchers design team, we had 5 product designers, 1 visual designer and 1 researcher. Of those 4 product designers, I was the only one creating designs for our iOS app. Today, we have 8 product designers, and a total of 18 talented people on the team. Seven of us design for our iOS app. As the team grew, we saw the need for documented interaction patterns to ensure the experience remained as close to seeming like one person designed it as possible. Designing patterns also helps us to not waste time solving interaction problems another designer has already solved.

I design our patterns for our iOS app, and then work with other designers to adapt the patterns for Android and web.


We design flexible and scalable patterns to solve common interaction problems.

Here’s an overview of the process we use to create patterns.


As new use cases come up that we feel should be covered in the styleguide either by creating new patterns or revising/expanding existing ones, we start the process again.

Documentation is, of course, not enough on its own.

We decided early on that it wasn’t scalable for me to be the iOS consistency police. Our rule of thumb is that the onus is on each designer to make sure that the experience she is designing is consistent with the larger experience. However, we do a few things to help ensure consistency.

  1. Review each other’s work early and often. I participate in almost all of our weekly design reviews.
  2. We also test the app regularly, especially when we’re working on new experiences. Plus, it's important for us to help QA.

It has taken a few tries to get our patterns into a state we’re proud of.

Iteration 1
Before we started consciously designing patterns, we created a wireframing library that contained a few notes. This was our starting point.

Iteration 2
Then we started focusing on the rules and language. For example, making “Alert Popups should be used as an ABSOLUTE last resort” (language from iteration 1) more clear.

Iteration 3
In this iteration, we decided to have our patterns and visual symbols side-by-side in Sketch to provide more context to the rules and also so our designers could have easy access to those symbols.

Iteration 4
In the latest, we continued to clarify the language and information hierarchy, and added more detailed examples for each pattern.


I can’t share all of our patterns here, but I’d love to talk about this more. Our team is nerdily excited about how this project is coming together.


prev / next

back to projects