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."
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.
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 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.
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.
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.
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.
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.
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.
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.
This story will be prioritized and groomed using our established lean UX workflow.