UX/UI DESIGN | WEB DESIGN

REDESIGNING A WEBSITE FOR PREP TO YOUR DOOR

THE OVERVIEW:

Prep To Your Door is a mission-driven, meal subscription service that delivers weekly, organic and locally-sourced food without packaging waste to their customer’s doorsteps.

Together with a team of three, we improved their customer’s journey by simplifying their navigation, optimizing their content strategy and elevating their check-out experience.

PROJECT ROLES:

Project Manager

Lead Interaction Designer

PROJECT TYPES:

User Research, Visual Design, Content Design, Interaction Design

PHASE 01: RESEARCH

Who is Prep To Your Door?

THE CHALLENGE:

The founders of Prep to Your Door first came to us with the open ended request to “improve our customer journey from discovery to delivery.” After interviewing their users and performing industry research, we realized we needed to redesign their website.

Between setting up interviews and creating our research plan, this phase took the longest but served as the most crucial part in our design strategy.

Conducting User Interviews

I interviewed short and long-term users of the subscription service to get an idea of what they loved and could see improved with the current PTYD experience.

Key insights:

Users loved the nutritional, tasty meals, but wanted more options.
Users found the on-boarding experience confusing.
When users had questions they called or emailed customer support instead of checking the website.

Identifying Zero Waste as an Opportunity

I performed secondary research to learn more about the industry. Food-subscription services like Blue Apron and Snap Kitchen create an incredible amount of packaging waste. We identified PTYD’s zero waste delivery to be a huge stand-out within the industry.

Performing a Heuristics Evaluation

The competitors we analyzed were Snap Kitchen, Blue Apron, Fresh & Lean and Hello Fresh. These companies each had distinct branding but similar websites, so we decided to perform a heuristics evaluation. This uncovered PTYD’s problem areas to be in help, flexibility and recognition.

Key insights:

The existing website was difficult to navigate.
Had missing information on how the process worked.
Had a confusing checkout process.

PHASE 02: SYNTHESIS

Why Redesign This Website?

After synthesizing our research, we created our PTYD user persona, Michele, and designed her optimal customer journey. We considered using two personas, but due to time constraints we went with one primary journey. We used this to create our problem and solution statements.

Problem: Users arriving to Prep To Your Door’s website need a more informative introduction to the brand, and a simpler way to subscribe to PTYD’s meal service.

Solution: A redesign of PTYD’s website we present its mission-driven brand efficiently and subscription service clearly. Prep to Your Door will have less customer service calls and increase their subscriptions.

Once we presented our findings to our stakeholders, I facilitated a design studio to start ideating on what this solution could look like.

Ideating and Evaluating Design Ideas

Making sure all our voices were heard in the ideation process, we evaluated our designs based on how well each idea addressed the following.

How do we best address confusion and focus on answering questions?
How do we best increase user confidence and comprehension?
How will we best improve scanability and comprehension?

PHASE 03: DESIGN

What Are Our Product Objectives?

After exploring our customer’s journey and immersing ourselves in the experience, we arrived to the following four objectives.

Design objectives:

1. Simple information architecture

2. Clear description of how PTYD works

3. Optimized menu options

4. Highlight PTYD’s mission

I began the design process by making wireframes that we could bring to our stakeholders to communicate our proposed solutions.

Solution 1: Used our research and defined website goals to reduce the subpage options from eight to five.

Solution 2: Consulted with stakeholders to distill the PTYD process into four easy steps and add a FAQ.

Before — The old page relied on descriptions to communicate the process and required digging to find information.

After — I added icons and industry buzzwords to quickly communicate “How It Works” on the home page.

Solution 3: Evaluated our site map to consolidate menu into one page and created an individual food page for each meals.

Before — Categories were on separate pages and the descriptions flipped when hovered on the card.

After — We combined the categories to reduce clicks and built out food profiles pages.

Solution 4: Analyzed content to reduce text and added visuals to communicate the mission statement.

Screen Shot 2020-09-16 at 9.06.29 PM.png

Before — The mission was lost among the pages.

After — We presented the mission statement along with value props that set the company apart from it’s competitors.

PHASE 04: PROTOTYPE & TEST

What Can We Evolve and Iterate?

Our design needed fresh eyes and perspective, so we asked users both unfamiliar and familiar with meal-delivery services to provide feedback on our design. The first round covered big-picture planning, the second and third rounds focused on more nuanced understanding of the process.

Add “Returning Jars” to the “How it Works” page.

Our users were asking a lot of questions about returning the jars when scanning the “How it Works” page. We originally expected our users to learn about the jar process in the FAQ section, but after testing, we realized users are too unfamiliar with the the jar process. We added a graphic to the How it Works page explaining the process of “Returning Jars” visually. This wouldn’t have been discovered had we not taken users through the website.

Evolve content from “nutritious and healthy” to “organic produce and locally-sourced farm”.

Our original intention was to widen our scope to users who might be coming from a health or fitness background, since our users were interested in nutritious food. The feedback we received was to consider presenting messaging that truly set this company apart.

Implementing design feedback is my personal favorite part of the design process. Really honing in on fuzzy understandings and pulling out the most critical aspects of a design, makes the initial work of performing research and planning, worth arriving to the final product. From receiving feedback, we created a design that we were proud to present.

View our prototype here.

THE OUTCOME

Design Retrospective

Our stakeholders were excited to implement our final design with their new development team. We achieved the goal of the design to improve the customer journey by simplifying the logistics and highlighting the valuable aspects of the brand.

Lessons Learned

Go for the most optimal design in the beginning.

Originally our stakeholders didn’t want us to touch the checkout process so we went out of our way to create two different checkout flows. But once the stakeholders saw the ideal checkout process, they loved it and were completely on board with trying the new design. It was motivating for them to see the checkout in action, rather than describing the new design.

The importance of feedback early on in the design process.

It would have been helpful to show our designs to teammates and advisors within the first rounds of designs so as not to bottleneck the progress to the last weekend. There were some simple oversights could have been caught within the wireframing process. I would say it’s valuable to ask for feedback in each stage of the process to prevent additional work later on.

If there was more time…

we would start implementing the design in Wix. It would be valuable to start shedding out what wasn’t possible to do simply because of the template host. This would be important for our mobile designs since Wix automates this experience through the original design. We could flex and move around specific graphics to better reflect the ideal customer flow.