Published on <a href="http://ift.tt/2ojo0hX">| Prototyping: From UX to Front End &mdash; Medium</a> Laura Homan 
RED Academy — Community Partnership Project
<img alt="" src="http://ift.tt/2ozU0jk">
<blockquote>Fuud Foods Inc. is a weekly meal kit delivery service for people that like to cook, but don’t have time to meal plan and grocery shop. Recently launched, Fuud works predominantly with smaller scale farms within BC to source fresh ingredients.</blockquote>
The current site went live with a minimum viable product model (MVP), so we were tasked with optimizing the site to meet the following goals within our 3 week time limit:
<ul>
<li>Increase subscription to the service.</li>
<li>Add search to the recipe archive.</li>
<li>Provide a way for users to share their favourite recipes.</li>
<li>Increase awareness, highlighting Fuud’s mission and values.</li>
</ul>
<img alt="" src="http://ift.tt/2plqtNh"><img alt="" src="http://ift.tt/2ozVqu7">
<h3>_ Client Kick-off</h3>
Our first reaction to the Fuud website was that it looked great — a bit daunting to improve something when initially, nothing popped out as not working. They use fun, colourful graphics and fonts, background videos, and great photograpy. We met Thomas of Fuud, and reviewed the goals of the project, discussing our scope and understanding of their needs.
<blockquote>As Fuud has knowledgable staff in place that could build the proposed redesign, as well as strong branding guidelines in place, we as a team proposed to deliver mid-fi screens, and concentrate instead on the research and planning to build on the MVP.</blockquote>
<img alt="" src="http://ift.tt/2plkqbu">
<h3>_ Organizational Research</h3>
<h4>Current Site and User Flow</h4>
After our meeting, we spent time reviewing all the content on the current site and going through the flow a new user would take to become a member, choose a meal plan and go through the purchase process.
<img alt="" src="http://ift.tt/2ozVEl2">
The great photos stood out, which are shot by one of the founders of Fuud. Not swayed by the pretty pictures, we immediately came across issues.
<ul>
<li>Unclear sign up process</li>
<li>Call to action was confusing</li>
<li>Hidden navigation on purchase flow pages</li>
<li>How it Works actually a section on the homepage</li>
<li>About Us in the footer — frustrations in trying to find more information about Fuud.</li>
</ul>
<img alt="" src="http://ift.tt/2plfT8O">
<h3>_ Competitive/Comparative Analysis</h3>
<img alt="" src="http://ift.tt/2oA2OWG">
We reviewed direct and indirect competitors for: site navigation, content, and suppliers of the products. From this, we planned out the extra info to include in our site redesign, and noted our unique value proposition was the local and organic farms where the Fuud ingredients come from. Highlighting this would make Fuud standout, appeal to those concerned with sustainable, organic and local produce, as well as those wanting to support local small businesses.
<h3>_ Analytics + Hotjar</h3>
<img alt="" src="http://ift.tt/2pltcq2"><img alt="" src="http://ift.tt/2ozYHtm">
Fuud had google analytics and Hotjar accounts set up. This provided a ton of information about how visitors were viewing the site and the paths they took, but didn’t give us the reasons why.
<ul>
<li>Bouncing between the homepage and the different meal plan pages. The current site listed 3 plans, so we hypothesized that users probably wanted to review all options (omnivore, veggie and gluten-free).</li>
<li>Visitors didn’t scroll past the hero image.</li>
<li>Those that did, visited the FAQ and About Us pages.</li>
</ul>
Our takeaway’s from the analytics, as well as our experience visiting the site were:
<ol>
<li>Unclear navigation, hard to find information.</li>
<li>Users need more information before making a decision to purchase.</li>
<li>Users demand further information about the company and want easier access.</li>
</ol>
<h3>_ Interviews + Surveys</h3>
<img alt="" src="http://ift.tt/2plqMYf">
<h4>Prospective Users</h4>
Our target users:
<ul>
<li>busy, health conscious families and professional couples, earning over $70k/year.</li>
<li>care about their community.</li>
<li>support local businesses when they can.</li>
<li>prefer organic.</li>
<li>lack the time to meal plan and prep.</li>
</ul>
We questioned prospective users on their shopping, cooking and dining out habits — giving us insights into what people look for when selecting their food, and what is important to them in their purchasing decisions.
<h4>Current Users</h4>
While we didn’t get a huge response while contacting existing users, the ones we did talk to had some great insights into the pain points and highlights of the service. This information was valuable as it really confirmed some of our assumptions about using the site, but also brought to light new issues with the service outside of the website.
<h3>_ Affinity Diagram — Insights</h3>
Taking our sea of sticky notes to the walls, we mapped our interview findings and survey results, finding the following highlights and pain points:
<img alt="" src="http://ift.tt/2ozCCeQ"><img alt="" src="http://ift.tt/2pl6z5a">
A takeaway was clarity on the target user. Our research showed the income of prospective users being $70k + was low, as current users, and prospectives that were more interested in this service had household incomes of $120,000 +.
To investigate this further, the team recommended more interviews and surveying of current users to get a larger sample size and a more accurately defined target user.
<h3>_ Fuud.ca at home</h3>
<img alt="" src="http://ift.tt/2ozVrOH">
I had been drooling over the Fuud photos, so my favourite bit of research was preparing a meal kit at home. I felt the sense of accomplishment that many of our interview subjects had brought up, however, I also experienced a couple of the pains:
<ol>
<li>I misread, or, didn’t read, the whole of the first step in the directions, oops. This didn’t affect the outcome, but I did make note that breaking the instructions into smaller sentences would probably have allieviated this error.</li>
<li>The instructions didn’t include any pictures of the preparation, and I was unclear on some of the steps or terminology used.</li>
<li>It took significantly longer than expected, 25 minutes longer, which was almost twice as long as what the card stated at 30 minutes.</li>
</ol>
<h3>_ User Persona</h3>
We created a persona for a new user to Fuud, Francesca. This persona was key in understanding the need for a service like Fuud, and was great for us to really align her struggles with cooking, with what the benefits of Fuud are.
<img alt="" src="http://ift.tt/2plcneO">
<h3>_ Customer Journey Map</h3>
We created a customer journey map for Francesca, using the pain points and highlights we found in our affinity diagram. This map uses the current purchase flow of Fuud, allowing us to hone in on the areas of improvement with our redesign.
<img alt="" src="http://ift.tt/2ozOBZJ"><img alt="" src="http://ift.tt/2pldmvF">
<h3>_ Feature List</h3>
We all listed ideas for features, moving them around on a chart to decide what was a must, a nice to have, and to kill, finalizing on:
<ul>
<li>Meal quantity — choose same menu multiple times.</li>
<li>Recipe filter.</li>
<li>Bookmark for favourite recipes.</li>
<li>Recipe reviews.</li>
<li>Delivery Options — pick morning or evening.</li>
<li>Text and email notifications for reminders to pick weekly menu.</li>
<li>Share options for recipes.</li>
<li>Live Chat.</li>
</ul>
<h3>_ Information Architecture</h3>
<h4>Navigation Testing</h4>
First, we reviewed the current site map.
<img alt="" src="http://ift.tt/2ozONYN">
We then redesigned to included our desired new features. There was some discussion amongst the group as to what wording would be most affective to included on the site, and what would make sense to both new users and returning, so we did some navigation testing.
<img alt="" src="http://ift.tt/2plvPrJ">
Based on our ideas for redesigning the site, we wanted clarity on what words to use, such as MENU versus RECIPE, and ORDER NOW versus GET STARTED. The result was that we went with RECIPE for the archive, and ORDER NOW as the call to action. This was clearer to testers, and made the most sense for returning customers.
Final Site Map
<img alt="" src="http://ift.tt/2ozJbhf">
<h3>_ Purchase Flow</h3>
With our redesign, we recreated the purchase flow for ordering meals.
For a better user experience, our flow was longer than the original, but we felt that this offered more information and clarity for the user, allowing more options that improved on the pain points from existing users.
<img alt="" src="http://ift.tt/2plkoQU">
We eliminated the current diet plans, and instead began by selecting the # of meals per week and quantity.
We then:
<ul>
<li>added a recipe filter;</li>
<li>added more delivery time options;</li>
<li>added option to pick up from the warehouse, allowing apartment dwellers, or those working weekends the option to order;</li>
<li>added option to set re-ordering reminders to address pain point of forgetting to submit choices; and</li>
<li>added detailed order review and confirmation pages.</li>
</ul>
A more detailed user flow for our persona, Francesca, includes the decisions that need to be made to go ahead with purchasing. We included all information based pages in the main navigation for easier access and more clarity.
<img alt="" src="http://ift.tt/2ozVXMB">
These flows really helped us empathize with how people used the site, and aided in the storytelling aspect of our homepage, helping us to understand what information we needed to include and why.
<img alt="" src="http://ift.tt/2plu0Ln">
<h3>_ Design Studio</h3>
We began with design studio, taking a mobile first approach as per our analytics. Starting with the homepage, we drafted a few versions, then discussed our design. We were closely aligned with the content we wanted to include, and the story we wanted to tell, highlighting the people and suppliers behind Fuud and showcasing their dedication to sustainability and supporting small business.
<img alt="" src="http://ift.tt/2ozZqLn"><img alt="" src="http://ift.tt/2pljFPP"><img alt="" src="http://ift.tt/2ozYINW">
From there, we began wire framing pages in Sketch, splitting up screens between the team, working with the same template, and using the existing fonts.
<img alt="" src="http://ift.tt/2plqssH">Sample mobile screens
We added a filter, allowing users to see all recipes, and changed the cooking time to a bar, selecting a range of time rather. We also recommended to the clients to change the cook time on the printed recipe cards to a range of time rather than a specific number — allowing for different prep speeds and alleviating this pain point.
<img alt="" src="http://ift.tt/2ozNw42"><img alt="" src="http://ift.tt/2pliWOq">
<h3>_ Email Communication</h3>
One pain point we received from all the current users we talked to was remembering to make your meal selection before the cut off.
We looked at the reminder email that was sent out, and at first, we missed the reminder altogether. The reminder was sent within the newsletter, with a subject line unrelated to the task, and the reminder itself was a small single line of text, and the call to action didn’t stand out.
<img alt="" src="http://ift.tt/2ozY6Iq">Proposed reminder email
We proposed a separate reminder email with a clear subject line and large image with a prompt to pick the meals, and a button reiterating the call to Select Now, rather than the previous Let’s Get Cookin’.
We then looked at the confirmation email and redesigned it to include the actual delivery and order details, rather than having the user sign in. This again, was a more user friendly approach and served more purpose than the original.
<img alt="" src="http://ift.tt/2plb53i">Proposed confirmation email<img alt="" src="http://ift.tt/2oA2NSC">
We tested and the purchase flow numerous times, making iterations based on our results. We found that:
<img alt="" src="http://ift.tt/2plc0AJ">
<ul>
<li>The naming of the checkout steps created confusion, so we renamed, and took the words out of the progress bar.</li>
<li>The plans name created confusion, so we renamed to highlight the number of people they are for.</li>
<li>The filter button was too subtle — so we changed the style and position.</li>
</ul>
<img alt="" src="http://ift.tt/2oA0pLy">
<ul>
<li>The order review was combined with the payment info screen, which people didnt see as they clicked the submit order right away. We separated the review, adding an extra step on the order process, but allowing clarity for the user.</li>
<li>We added the ability to edit options.</li>
<li>The order confirmation message was not explicit enough — we deresigned and added an icon.</li>
<li>The “order status” was at the bottom of the page, most users missed this part — so we reordered.</li>
<li>Added the recipe selection alert options.</li>
</ul>
To the homepage, we reiterated our original design to make the content clearer and to include more information for the visitors to better meet the business goals.
We added discount promo bar at top of the homepage to entice first time users, (previously, it was in the footer), then added the Peace of Mind section to highlight commitment to locally sourced ingredients, and made a separate page for How it Works to give potential users more information.
<img alt="" src="http://ift.tt/2plvR2P">
Working with Fuud was different than the other projects, in that we got to decide how we wanted to proceed to meet our client goals. This was a welcomed challenge. We made the call early on to focus on a research-heavy process and optimize not just the website, but the actual flow for a user, from finding the site to ongoing communication with Fuud.
<h3>_Project Takeaways</h3>
One of my biggest takeaways, moreso than previous projects, was how design really can affect a users experience. I realized that for years as a graphic designer, I was guilty of making the same mistake Fuud had in their email design, choosing something I thought looked good over something that functioned to communicate the message.
As well, something as simple as breaking down instructions into short points rather than a paragraph, and including visuals, really elevated the overall experience for the user, and eliminated those minor irritations that cause a negative experience.
Another key takeaway was that adding content or steps to a flow was okay, and can enhance a users experience. Too often in UX, we are concerned about simplifying existing processes and making tasks as short as possible. We realized with our redesign that including more relevant information and adding an extra step or two, allowed people to more readily make the decision to sign up, and to have a more enjoyable experience doing so.
<h3>_ Prototype</h3>
<a href="http://ift.tt/2ozCDzq">Click here to view the project `Fuud_DesktopPrototype`</a>
<iframe src="http://ift.tt/2plongo" width="438" height="930" frameborder="0"><a href="http://ift.tt/2ozJadb">http://ift.tt/2ozJadb</a></iframe><img src="http://ift.tt/2plzYMt" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2ozXqmi">UX Case Study — FUUD.ca</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Case Study — FUUD.ca

Top Stories