Serving Size Adjustment

I lead the Lighter team in the application of lean UX design, to continuously deliver product experiences that attract, retain and convert customers.

The User Story

Everything at Lighter begins with a user story, distilled from ongoing interviews and feedback: "As a Lighter user, I'd like the ability to adjust serving size to be more accessible."

The Lighter customer journey

Then we look at the overall customer journey and pinpoint where this need arises–in this case across the Explore, Cook and Eat steps. This helps us understand what emotions and expectations attend the story, and what outcomes the customer expects afterwards.

Concepting & Testing

We started by looking at the existing feature and it's place in the user flow.

The preexisting serving size view, whereby users made adjustments in a "change world" view prior to adding a recipe to their meal plan

In our initial team-wide grooming session, it became clear the new functionality would need to live within a recipe detail view, alongside the ingredients list, and be more complex to accommodate Lighter's serving size handling. We scale serving sizes across four appetites—small, medium, large, and extra-large—to help people more accurately plan their meals.

The preexisting serving size adjustment widget

The prior version obscured this complexity, since users set their household appetite sizes during registration. The serving size then represented the number of each appetite size the recipe would make. We prioritized this story because it would reveal uniquely valuable functionality at a stage in our growth where we're building brand awareness and loyalty.

Initial user feedback, collected over the preceding months, revealed that many people aren't aware of the feature's existence, or that changing the one number displayed has implications beyond a single appetite size.

Initial team sketches showing several concepts and overall functionality

The new complexity prompted framing the feature as a "branded experience," a specially designed array of functions that extend the core value of the service—the right meal for the right person at the right time.

Early digital sketches of the branded experience, allowing users to adjust different appetite sizes in concert

Once the overall format emerged, we moved on to interaction and flows, adding the ability for one-click leftovers increases, which instantly doubles all servings sizes across the array, a feature users had requested frequently.

An initial step-by-step flow showing the serving size array in use

At this stage, a second round of user testing was conducted to ensure that the new experience was useable and made sense. 5/5 respondents clearly understood the feature, with 3/5 responding very positively to its introduction.

Brand

As the sketches transformed into mockups, I measured their design against Lighter's established pattern master. Making the array pill-shaped would bring it in line with other CTAs across the site; we also took this opportunity to introduce a "beta" CTA size, 25px in height compared to our main CTA height of 45px.

Typography

Calls-to-action

Color pallete

Engineering

Once testing was complete and considerations were made for how this new element fits into the app's overall design, I mocked up several designs showing user flow.

Beyond a detailed spec sheet and third-party sync, I always illustrate the front-end design, including alignment, spacing and font styles.

Iteration

After launch, Lighter underwent a full-scale design audit to identify, codify, and improve upon existing styles and conventions. This audit prompted the creation of a new story, to lightly redesign the serving size feature and bring it in line with the rest of the app.

The element in place at release

This story will be prioritized and groomed using our established lean UX workflow.