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.
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.
Read the press release for PEAK Pack.
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
High Fidelity Designs
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.
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.
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.