Dinner Thyme

The owner and CEO of mealkit delivery service Dinner Thyme approached myself and the team for a website redesign and usability testing using basic UX principles.

Dinner Thyme is a mealkit service akin to Blue Apron, but the food is flash frozen and can be kept in the freezer until ready to prepare. The client wanted to maintain what the current user base loved about the product, attract new users who had not tried the product before, and increase the overall usability of the site.

The team wrote and performed a screener survey for the beginning of the research phase to find usability testers and to get basic insights on the client’s target audience. There were 23 responses out of 60+ invitations to respond, and the team gained insights in key categories such as household size, frequency of meal preparation at home, and most commonly used devices to access the internet.

The team then performed a heuristic evaluation on the current site using industry-standard metrics to determine the areas in most critical need for improvement.

The preliminary usability tests were conducted to observe participants interacting with the desktop and mobile versions of Dinner Thyme’s current website.

The team interviewed six current users of Dinner Thyme’s site to discover their behaviors, joys and pain points using the site across various devices. Through this data, we wished to determine what users found most attractive about the service so as to maintain those elements through any redesigns of the existing site.

We synthesized the insights from the interviews using affinity mapping and came up with some “I Statements” that captured the main points expressed.

• • • I think portions can be a little small.

    • I want more choices.

    • I think the quality is good.

    • I like being able to order what I want when I want.

    • I like the overall design of the packaging.

    • I like that the meals are frozen.

    • I have used many meal kit services.

    • I find the price reasonable.

    • I want to be able to sort the menu items.

    • I use my iPad or my computer to access the site.

    • I find the website easy to use once I understood it, but there are things that could be improved.

Reason for use

• • • I like to cook.

    • The service saves me time.

    • I like that there are no subscriptions.

The team also developed a persona to represent the needs of the user, with our insights of the current users built-in.

From here, the problem space was defined with a problem statement that encapsulated the insights the team had gleaned from the research thus far.

I ensured that we had the most critical points represented in the problem statement, including the main insights from the heuristic analysis and the user interviews.

I created a user journey map, a data-based representation of a user’s experience, for the current site. It was important to us to highlight the pain points that users expressed through the interviews and the ones found through heuristic analysis.

The client expressed a desire for a filtering system for the website’s menu of products available. To determine the best way to categorize and organize the menu items under filters, the team used volunteers employing the card sorting technique.

Participants sorted the 60 items (reduced to a random 25 for each participant) into 22 total categories. 15 (71%) people completed the study out of a total of 21 participants.

Participants created an average of 6 groups, and clear divisions came to light.

After standardization, the categories were most comprehensive and covered all menu items were as follows:

A sitemap was built out for the purpose of visualizing the current site architecture and ideating potentially more intuitive options for navigation, as well as user flows to begin working on alternative user pathways.

From this point, the team began working on wireframes for the site’s redesign. We borrowed design elements from other successful mealkit delivery sites, as well as reworked some of the existing elements to make the color palette easier to digest.

A large portion of the design phase was spent on the copy, branding, and style guide for the site.

After completing the first prototypes, we tested them with users to find out what could be improved. Initial usability testing was conducted to validate the redesign in its early stages.

The purpose of this test was to determine if the design solved the basic problems of the existing site revealed through our usability testing. Specifically, providing users with information that was easy to understand and quickly actionable.

Mid-Fi Prototype Findings--

• • • Adjust footer sizing and visual proportions

    • On-boarding needs adjustment: users did not take the time to read or have the proper visual aid

    • Details on the meal cards were confusing - mainly the amount of time it took to cook

    • Users didn’t want to click details to go to the detail page, they prefer to click on the image itself

    • Replace “Menu” CTA with “Shop Menu” to make it more prominent

The second round of usability testing on the team’s redesign was conducted to validate decisions made in the process of bringing the design into high fidelity. This purpose of this test was to determine if the design made sense and the structure held up with color and copy filled in, as well as if the changes made after the first round of usability testing solved the problems discovered.

Hi-Fi Prototype Findings--

• • • Users could not find detailed information about what flash freezing is.

    • “No subscription” info not completely clear

    • General consensus that images and copy on site are larger than necessary.

    • Shopping cart blurb re: $80 pop up annoyingly and disappears too quickly

    • “Filter” and “Modify Search” are confusing

Next Steps and Suggestions for Design Iterations

Some of the features that we feel need to be incorporated into this prototype design to make it complete are:

• Adding a Review and the associated user flow and screens

• Editing a Review and the associated user flow and screens

• User Account (Profile) and Purchase History

• Checkout and the associated user flow and screens

• FAQ and the associated user flow and screens

• Contact and Support and the associated user flow and screens as applicable

• More sections/pages that provide detailed information about the value Dinner Thyme provides, as applicable

• Modifications of the current design based on user feedback