PEAK Pack

Screens from the PEAK Pack website, mobile, and tablet apps.

PEAK Pack is a subscription service that allows people to use their food assistance benefits towards a meal kit, allowing customers to get fresh, pre-proportioned ingredients delivered right to their home!

Expertise

  • Wireframing
  • Prototyping
  • Usability testing

Tools Used

  • Adobe XD
  • InVision
  • TryMyUI

Platform

  • Web
  • Mobile app
  • Tablet app

Design Objective

This project allowed us to explore the principles of adaptive and responsive design. In groups of three to four people, we devised civic-minded services and created a mobile app, tablet app, and web browser interface or app for the service. Since we had to design for three distinct devices, we had to utilize adaptive design to ensure that each device’s user experience was optimized for the device’s size and capabilities.

Project Concept

PEAK Pack is the easiest way to make use of your food benefits. PEAK Pack is a subscription service that allows families to have meal kits sent directly to their house. The meal kits include a wide variety of fresh, pre-proportioned ingredients that are sourced from local farms, limiting food waste and streamlining the cooking process. PEAK Pack also eliminates grocery shopping, allowing busy families to indulge in more quality time together. PEAK Pack has hundreds of recipes to serve all palettes and accommodate various lifestyles.

Press Release

Read the press release for PEAK Pack.

Specific Responsibilities

My group was made up of four members. Each member of the group provided feedback on each assignment and step of the process, but I was specifically responsible for writing the press release, editing the high-fidelity mobile app designs, and overseeing the usability testing for the mobile app.

Low Fidelity Designs

Desktop

  • Low-fidelity sketch of the PEAK Pack website
  • Page explaining how PEAK Pack works
  • Menu page of PEAK Pack website shows users what meals are available for that week.
  • Recipes page on PEAK Pack website
  • Recipes available on the PEAK Pack website
  • An example of a recipe on the PEAK Pack website
  • Plan page for PEAK Pack website explains the types of plans available
  • Order summary page after subscribing to PEAK Pack
  • Account settings page for PEAK Pack website

Mobile

  • Login screen for PEAK Pack mobile
  • "Select a Plan" screen on PEAK Pack mobile
  • "Your Plan" page on PEAK Pack mobile
  • "Menu" page on PEAK Pack mobile
  • "Recipes" screen on PEAK Pack mobile
  • An example of a meal recipe on the PEAK Pack mobile app
  • "Settings" screen on PEAK Pack mobile

Tablet

  • Splash page for PEAK Pack tablet app
  • Sign up page for PEAK Pack tablet app
  • "Pick a Plan" screen on PEAK Pack tablet app
  • "Menu" screen on PEAK Pack tablet
  • "Recipes" screen on PEAK Pack tablet
  • A meal recipe within the PEAK Pack tablet app

High Fidelity Designs

Desktop

  • Landing page for PEAK Pack website
  • Screen showing how the PEAK Pack service works for first-time customers
  • Recipes page on PEAK Pack website, which shows a variety of different recipe categories
  • Menu shows the recipes available for that weak for every plan
  • Login screen for PEAK Pack website
  • Webpage where first-time customers select their meal plan for PEAK Pack
  • Check out page of PEAK Pack Website
  • Order confirmation page for PEAK Pack website, featuring delivery information for future meal kits
  • Account settings page of PEAK Pack website, which allows users to edit their account information

Mobile

  • Login screen for PEAK Pack mobile app
  • Delivery tab page for PEAK Pack mobile
  • Meal choosing screen for PEAK Pack mobile
  • Meal choosing screen for PEAK Pack mobile
  • The delivery tab with new meal choices
  • Recipes tab in PEAK Pack mobile
  • Recipe in the PEAK Pack mobile app
  • Profile settings of PEAK Pack mobile
  • Account summary on the PEAK Pack mobile app
  • My Plan page on PEAK Pack mobile
  • Dietary Restrictions on PEAK Pack mobile app

Tablet

  • Login screen for PEAK Pack tablet app
  • Information for upcoming deliveries
  • Delivery information and meals available to choose for a future delivery
  • Delivery information and meals selected for a future delivery
  • Delivery information and future meal kits in PEAK Pack tablet app
  • Recipes for the current week
  • Baked Chicken and Rice recipe page
  • PEAK Pack account information
  • Plan settings for PEAK Pack customers
  • Screen to edit dietary restrictions for PEAK Pack

User Research Synthesis

Our research objective was to make sure that users were able to successfully locate and navigate important features in every experience. For the website, this was to find out information about the service and to successfully sign up for it for the first time. For the mobile and tablet apps, the main functions had to do with account maintenance, such as choosing meals for future deliveries, editing the plan, and changing the dietary restrictions. For more details, view our usability research plan.

We conducted our research on people who were either familiar with using food assistance benefits or people who were familiar with meal kit subscriptions services. The participants ranged in age from 20 to 57. All but one participant was female.

Overall, users were able to easily complete the tasks. Most errors or difficulties were due to vague or confusing wording in the tasks or issues with the prototype themselves. For the mobile in particular, three participants were totally unable to complete the last three tasks because they were unable to see the navigation tabs at the bottom of the screen and were therefore not able to navigate to the screens necessary to complete the tasks.

The task which caused the most confusion in the mobile was task 2, which asked users to choose which meals they wanted to select for the week of March 3. Users were able to navigate to the selection screen but felt that more guidance through the process from that screen would be beneficial, such as something at the top telling them how many meals they had to choose. For the tablet app, users were confused about task 4, which asked them to change their dietary restrictions. They were able to easily navigate to the correct screen, but they were confused because the prototype screen did not match up with task wording. For the desktop web browser interface, users had the most trouble with the first task, which asked users to get started and log in. Instead of clicking the “get started” button, they tried to click on the “log in” link, but the prototype did not have a hotspot attached to the login link.

For more details on the test results, view our usability research report.

Retrospective

Challenges

We had the most trouble with translating our initial ideas into a high fidelity prototype. Many of our initial ideas were based on the websites of similar services, such as Hello Fresh and Blue Apron. Though we downloaded the apps for those services, it was impossible to explore the app without having a subscription. Since the uses of a website are different than that of a mobile or tablet app, we ended up adding more than we needed to in our app prototypes.

After creating our high fidelity prototypes, we realized that we were putting in unnecessary features and screens and overlooking the things that would be most important to the users. Once we nailed down what we thought our users would want the most, we were able to streamline our prototypes.

Lessons Learned

The most valuable thing I learned from this project is how function and design must be tailored to the size and capabilities of specific devices. Since a mobile phone is so small, there simply isn’t enough space to put a lot of information on the screen. Additionally, since a person is more likely to have their phone on hand at any given time, it is probably the first place a person would check for updates and their go-to in order to make quick updates. However, a desktop has more screen space and is probably the place a person would go to find out more in-depth information on a new service and where they would feel most comfortable signing up for the service for the first time since it is easier to input complex information.

Tags:

Leave a Reply