1. The document describes usability tests conducted on the website Chefd.com. Two participants, Jacob Peterson and Carissa Chandler, were recruited to complete tasks on the site.
2. The first task involved creating a Spoon University meal plan with a cost under $65. Both testers struggled with this as they did not read instructions before starting and selected too many meals, driving the cost over $65.
3. Overall, the tests revealed some inconsistencies in the site's questions and difficulties determining where users were in the task flow at times. This provided insights into improving the usability of the Chefd.com website.
Distribution Ad Platform_ The Role of Distribution Ad Network.pdf
User Experience Assignment
1. Downs 1
Taya Downs
Introduction to Web Publishing
Professor Jacquie Lamer
8 March 2018
Usability Test for Chefd.com
Test Preparation
Chefd.com is a delivery meal kit service that focuses on providing personalized, healthy
meals without a subscription in an effort to change the way that we eat. The company has
hundreds of individual meals a-la-carte style, but also a few meal plans, meaning a user can
receive a few meals weekly. The assignment was to conduct two usability tests, consisting of
four tasks based on a scenario, for the website Chefd.com, however, to do that accurately, I took
time to complete each of the tasks myself.
The first usability task for Chefd.com was to build a Spoon University meal plan and
determine the cost (under $65 based on the scenario). When approaching this task, I had prior
knowledge that Spoon University was listed under the “Meal Plans” navigation tab and was sent
to that page. Without reading anything, I clicked “Start Meal Plan.” Immediately, the site made
me commit to creating a plan without any real knowledge of what I was buying—a result of me
ignoring the informational content on the Spoon University page. I proceeded into the allergies
section and had to scroll a little to the next question, “I like meals that include.” Here, I clicked
beef, poultry, and pork only to realize that I was not sure whether the orange outline was selected
or not. I soon figured out that orange, or highlighted meant it was a “Yes” for “I like,” and grey a
“No.” This was confusing because in the prior question, the options were all grey to start, and
when clicked on became orange. In this question, all options were orange to start, and a user
2. Downs 2
would deselect options, not clearly recognizable. Following this, I selected that I would like four
meals in my box, which totaled $101, but the task required it to be under $65, so I scrolled back
up and reduced the number of meals to two, then one, for $62. With that, I completed the task
with a little confusion, but not too much difficulty.
The second usability task was to add an additional meal to the kit—a spicy meal. I
scrolled back to the top of the page and added a meal to total two. I clicked “Swap Meal” with
the assumption that there would filters or sorting tools to find a spicy meal; disappointed when
there was not. In general, Chefd.com’s “All Meals” filters are very specific and useful to find a
meal that fits any price, dietary needs or cuisine, but this was not the case for their “Swap Meals”
page. Confused on how to start the task, I randomly picked a meal that I thought would be spicy
but knew there had to be a way to get to the meal’s content page. Finally, I was able to navigate
to the product page of the meal kit and identify the level of spice, but for every meal listed in the
“Spiciness” category there was only “Mild” or “None.” By these standards, there are not
currently any spicy meal options for this meal plan, making the task impossible and incomplete.
The third usability task was to make sure that no item in the meal plan’s box exceeded
450 calories or it would need to be swapped. Similar to the last task, to complete this a user must
click on a meal, “Grab ‘n’ Go,” or snack’s picture, followed by the “Nutrition Facts” tab to find
the calorie count. Once the task was completed with an item it could be easily repeated for the
next, or until each item had met the condition. One difficulty that was encountered during this
repetition was page loading times. I experienced this when trying to check the nutrition facts for
the last meal of my meal plan. To troubleshoot the difficulty, I clicked on another meal’s icon,
but the page momentarily froze. I ended up refreshing the entire page from the browser control
bar and was required to begin designing the plan from the beginning.
3. Downs 3
The last task was to determine when the meal plan would arrive. After scrolling up and
down the site to make sure there was nothing I missed I clicked “Add to Cart.” From there, my
cart opened up on the right side of the page with the details of a plan that originally came across
as ads or recommended articles, confusing me until I realized that they were the specific items of
the plan I had chosen. With nowhere else to click, I hit “Checkout,” still unsure if it was
necessary to find the delivery date. I put in my zip code and was then given three date options
for my preferred day of delivery. Although this wasn’t the most difficult task, Chefd.com
required my meal plan to be completely finalized and in my cart to determine my options for the
date of delivery. The approach was simplistic but was not where I assumed.
Overall, I did not experience great difficulty in completing the tasks given, but still
became hung up on small details that didn’t follow my expectations or assumptions. A major
difference between myself and the people I tested is that I have spent hours scrolling
Chefd.com’s website gaining a comprehensive familiarity with the site’s structure and content,
whereas they had not been on Chefd.com prior to the usability test. With this in mind, I set out to
find participants to test not only the usability of Chefd.com, but also how the site performed in
user experience.
Choosing Participants
Tester 1: Jacob Peterson
My first usability tester was Jacob Peterson, studying Interpersonal Communication.
Jacob is a 19-year-old male; a sophomore at Northwest. Jacob is someone that lives off-campus
and does not eat very many meals on campus, so he can watch what he eats. In addition to that,
he works out about three times a week with his friends playing games and is involved in
intramural basketball at the recreation center. Jacob categorized himself as a high-experience
4. Downs 4
user of the internet, spending approximately 28 hours a week online; about 80% of which on
social media and 20% online browsing.
The assignment was to find testers that are reasonable; in this case meaning that they
would think out loud during the tests, in college, and interested in healthy eating. I believe that
Jacob is a reasonable tester because he is very active and tries to eat healthy to maintain his
weekly routine. I believed that Jacob would be a good tester because he is an external processor
and would respond to difficulty in a manner that is very direct, or to the point (‘my way or the
highway’), whereas I would wait out the frustration.
Environment for Tester 1
• Location of Test: To conduct this test, I asked the tester where he most frequently uses
the internet, the library. When I arrived to begin, he was sitting at a two-person side table
by the window in the Starbucks area of B.D. Owens Library.
• Physical Environment: The tester’s table was about halfway around the circle-like space
near Starbucks, situated in dim light; about a table away on both sides from a small
lamp. The test began at 5:24 pm, meaning that in combination with the tinted windows in
the space created a very dark exterior of the building and the dim light from the lamps on
either side, lit primarily by the tester’s laptop. The tester’s phone was on the ledge near
his arm, and he would occasionally check the notification that popped up or when the site
had difficulty processing his request, but he mainly focused on the tasks. There were
about ten others spread out in the area, but occasionally outbursts made it difficult for
myself and the tester to hear.
• Technical Environment: The tester used his Northwest laptop to complete the test,
connected to the Northwest Secure Wi-Fi, connected with his s-number and password; a
5. Downs 5
standard browsing speed expected for almost all Northwest students. He logged into his
laptop and was already in the Google Chrome browser with 25 tabs left open from his
previous browsing. He did not have any browser plug-ins. The tester kept the tabs open
in Google Chrome while operating a 26th
for the test.
Tester 2: Carissa Chandler
My second usability tester was Carissa Chandler, studying Human Services. Carissa is a
19-year-old female; a sophomore at Northwest. Carissa lives off campus, preparing meals
herself or with the help of her roommate. Although she doesn’t regularly exercise like tester 1,
she goes to the gym occasionally with her friends or does yoga in her spare time. Carissa
categorized herself as a high-experience user of the internet, spending approximately 20 hours a
week online; about 70% of which on social media and 30% online browsing.
The assignment was to find testers that are reasonable; in this case meaning that they
would think out loud during the tests, in college, and interested in healthy eating. I believe that
Carissa is a reasonable tester because she is very different from tester 1 and myself; an internal
processor; someone to process slowly externally when going through a task. Another reason I
believe that Carissa would be a good tester because she also has a gluten intolerance, that would
test the site’s malleability for providing a sufficient amount of options for dietary needs. Lastly,
I believed that Carissa’s style when encountering difficulty would be to go the help bar or use
other features to find the answer that I might not.
• Location of test: When I asked the tester where she used the internet the most, she said
her apartment. When I arrived, she specifically mentioned that she did most of her
browsing in her room on her bed, so we went there.
6. Downs 6
• Physical Environment: The tester’s room had a window directly behind her, but the
window was closed, and the blinds were down. Although the usability test I conducted
was at 6:18 pm, there is potential that during the day the sun would hinder the tester’s
ability to accurately view details, colors or photographs on her browser. Because the
window was closed, and it was in the evening, the tester’s room was lit up by artificial
lighting on her ceiling. The user sat on her bed and used a stand to prop up her laptop to
keep it from resting on her lap. Although her roommate was also at the apartment, only
occasional murmurs were heard to distract the tester from the task at hand. The tester’s
phone also wasn’t in the proximity.
• Technical Environment: Similar to tester 1, tester 2 used her Northwest laptop, but
connected to a private Wi-Fi router that herself and roommate pay for on a monthly basis
(provided by SuddenLink). The tester was most comfortable with the Google Chrome
browser and did not have any additional tabs open while the tasks were going on; no
browser plug-ins were identified.
Test Results
Initial Site Thoughts
When the users first went on site, they were both impressed by the design presented on
Chefd.com’s homepage. A few similarities that both testers commented on were in regards to
the general site design, navigation menu and celebrity endorsement, whereas some differences lie
in the content the testers saw as most important, as well as the potential purpose of the site.
Beginning on the homepage the testers commented on the attractive, clean design that the
site was based on. Tester 2 paid close attention to the color scheme presented on the site,
noticing the contrast between the bright orange and subtle gray to distinguish important
7. Downs 7
information from other content within the pages. Tester 1 mentioned how the logo was
innovative and added a great level of professionality to the brand.
Another similarity that the testers agreed on was the navigation, displaying the general
site structure. Each tester hovered over each navigation pane to gain a deeper understanding of
the page and what if offered. Out of the navigation options each tester also found a particular
liking on the partners page. Both commented on how the partner page builds credibility for
Chefd.com’s recipes and shows the diversity of the meals that the site offers.
The last thing the testers had in common while browsing on Chef’d was noticing the
featured Instagram post by Kim Kardashian on the homepage. The testers commented on how
this sparked their curiosity about the product. Tester 2 said that she wanted to know if Kim
Kardashian had used and liked her experience with Chef’d. Tester 1 was not as interested as
Tester 2 but did notice the endorsement by the pop culture icon.
While browsing the site, Tester 1 wanted to make sure that Chefd.com would be as
healthy as it was delicious; whereas Tester 2 found interest in checking the partnership that
Chef’d had gained. Tester 1 focused mainly on the types of meals that Chef’d offered,
experimenting with filters such as cuisines, difficulty and preparation time. Meanwhile, Tester 2
took time to scroll through the partnership icons to get a better grasp on the variety of products
that had become a part of Chefd.com’s brand.
The last noticeable difference between the testers was their perceived purpose of the site.
Tester 1 said that he believed Chefd.com was a website that sent ingredients to their customers to
make meals at home, a statement Chef’d might be glad to hear, however Tester 2 had a different
opinion. Tester 2 perceived that the site was a place that health-conscious individuals could go to
8. Downs 8
look up recipes and tips to eat healthy. Although there were some small differentiations, both
observed that Chefd.com would be a site worth looking into.
Task 1: “Build a Spoon University meal plan and determine the weekly cost.”
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 2.0 3.0 2.5
Success Rate 50% 100% 75%
Highlights:
1. The first major problem that the users ran into was that they went into the meal plan
creation process without instructions. This is most in part because important information
such as what the meal plan box includes is not found within the meal plan preference
questionnaire. This may not seem like a big deal, but knowing the contents of the box
prior to answering the questions may have encouraged the users to answer differently
regarding the number of meals included in their meal.
2. Another small problem that the testers encountered was a lack of consistency between
preference questions; particular between the allergies and protein questions. When each
tester was asked what they were allergic to, each circular option was grayed out, and
when selected became orange. This type of question can be categorized as an opt-in
question, meaning a user’s choice represents selecting an item. The protein question,
however, displayed all choices as orange, and the user had the chance to gray out options
they disliked. Contrastly, this is called opt-out, meaning a user clicks on something as to
9. Downs 9
deselect it. Both of the testers experienced confusion as to whether the orange or gray
represented selection.
3. The last problem that the testers encountered was becoming unsure of what page they
were on because of what was shown above the fold. For example, after the allergies and
protein questions were answered, the “Next” button brought the user halfway down the
page. In this case, the user most likely misses the last question, the number of meals
included in the plan, and proceeds without knowing there was any other option.
Biggest Problem:
In the first task, the testers were asked to create a Spoon University meal plan and
determine its cost. Additionally, to meet the condition expressed in the scenario, the cost of the
plan had to be less than $65 weekly.
To complete this task, a user on Chefd.com must hover the navigation pane called “Meal
Plans” and select the “Spoon University Meal Plan.” When the testers clicked on that page it
brought them to an informational content page highlighting the meal plan’s usefulness for
college students; including information regarding the contents of the box and an orange button
that says “Start Meal Plan.” From there, the user answers three questions, each separated by a
“Next” button, and is shown a screen that says “Inside Your Box.” To meet the price
specifications outlined in the scenario, testers could only create meal plans with one or zero
added meals.
When asked to complete the task, both users were able to find the Spoon University meal
plans without much difficulty. From there, they were taken to the Spoon University information
page discussing the meal’s contents and benefits, however neither read those things, but instead
jumped right to an orange button that says, “Start Meal Plan.” As mentioned previously, this is a
10. Downs 10
problem because the user is skipping all of the information necessary to understanding how the
program works or what comes in their box that could impact their choices while creating the
plan.
Following this mistake, both testers encountered errors when looking at the price of the
meal plan they created; much higher than $65 because each indicated they wanted to include
seven meals in their weekly plan. From here, the plan had been created and cost $140, leaving
the testers on their own to decide how to cut the cost. For Spoon University, the meals included
must be either the quantity of zero or one; something the users had difficulty finding out.
Tester 1’s response to cutting the cost was to try to delete or remove items that he thought
unnecessary to the meal plan, such as the “Grab ‘n’ Go’s” or healthy snacks. To do so, Tester 1
clicked the “Swap Meal” option and searched for an option to delete the particular item;
however, this led to no success. Tester 1 said that he expected to see an option within the “Swap
Meal” page to reduce the number of snacks, “Grab ‘n’ Go’s” or meals, and met the failed
expectation with frustration.
Tester 1 knew that he must decrease the amount of meals included in the plan to fit his
budget but was not able to identify a way to go back to edit the seven he had originally selected.
Another point that played into Tester 1’s frustration was that he was not able to comprehend the
page he was on. The solution to the problem would have been to scroll to the top of the page and
edit the amount of meals within the plan.
Alignment to Heuristic:
I believe the problem results as a failure on Chefd.com’s part to properly carry out
recognition rather than recall. In general, this heuristic means that the site clearly makes the
objects, actions, and options visible so the user stays informed. Common means by
11. Downs 11
accomplishing recognition rather than recall include pages that display a single call to action,
labels and retrievable instructions. This heuristic empowers users towards confidence to
complete a task, as well as the means necessary.
I believe one section of instructions that need to be clearly stated before a user creates a
plan are what is included in the meal plan: healthy meals (optional), “Grab ‘n’ Go’s,” and
healthy snacks. As a result, this user experience difficulty causes smaller errors such as the
testers including more meals than necessary to the plan. This heuristic goes into recognition
rather than recall because throughout the whole Spoon University meal plan creation process a
user lacks the knowledge to be able to properly create the plan. As mentioned above, the
instructions on how to fill out the questions are only included on the Spoon University content
page, unavailable to a user once they begin creating their personalized plan.
Another set of instructions that needs to be emphasized is how to create the meal plan.
Currently, once a user begins creating a plan there is not a way to go back or change their
answers, or emergency exit. After a user answers a question they hit the “Next” button
proceeding forward through the process but are given no function to edit their initial feedback. I
believe this is important for the user to feel like they have control of the meal plan and its
customization to meet their needs. Similarly, the user is never given any indication of how many
questions they must answer before they are taken to their Spoon University plan—potentially
causing a user to back out for the sake of time or effort.
Methods that Chefd.com could take to improve its user control would be to include
buttons to cancel, go back or edit their answers. In addition to those, Chefd.com should rethink
its design in regard to having a singular task for each page. Lastly, I believe that Chef’d should
12. Downs 12
provide visual instructions and icons throughout the task to continually reaffirm the user’s efforts
to create a Spoon University meal plan with ease.
Task 2: “You have the budget to cover one extra meal per week, but you want it to be a spicy
meal. Determine your spicy meal options and choose one meal that you are willing to prepare.”
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 3.0 3.0 3.0
Success Rate 0% 0% 0%
Highlights:
1. A problem that both testers encountered was not having an idea of where to check a
particular meal’s spiciness, leaving them to judge by their own perception. Their
responses demonstrated that their initial assumption that there was not a way to check for
the level of spice. Soon after, however, the users began to look for another way to do so
in regard to a specific meal, however Tester 2 was never successful in doing so.
2. For this task, Tester 1 attempted to find the spice information through the “Swap Meal”
page, however he was not able to discover each meal’s content page. Tester 1 assumed
that spiciness would be a category he could look for using a sort or filter function,
particularly within the “Swap Meal” page. When he clicked on that, he was shown five
more meals. Eventually, he clicked on one and found its spiciness, learning the process to
repeat it for the remaining meals.
3. To check the spiciness of each meal given, a tester should have clicked on a photograph
of a meal to present an individual content page that provided information regarding
13. Downs 13
allergens, ingredients, ratings, nutrition facts and level of spiciness. A problem that both
users faced was the inability to access these pages; not knowing that the photographs
were links to the meal’s specific page. I believe this is a problem because the users were
not aware how to access vital content before purchasing the meal, nor were they aware
the information was available to them.
4. A strategy Tester 2 used to find a spicy meal was to increase the quantity of meals in her
meal plan in hopes that the meal diversity increase, particularly the level of spice. When
asked what she was expecting, the tester said that she expected to see a sort method to
narrow down meal options that it gave her, such as a spice category. Tester 2 concluded
her difficulty with, “None of this looks spicy. I don’t know if I’m supposed to find it...”
Tester 1 decided that the task could not be completed because the only “spicy” options
listed were shown as mild or none.
Biggest Problem:
For this task both testers faced a great amount of difficulty in determining the level of
spiciness for each meal they selected. I believe a lot of this difficulty lie in unmet expectations
of the “Swap Meal” page, where they tried to sort or filter meals to meet their needs. When
users are usually looking for something they will use a sort of filter feature to narrow down the
results they are looking for.
Studying the Spoon University meal plans has led me to believe that there are only eight
meals offered as a part of this meal plan compared to the 650+ that Chef’d offers a-la-carte.
Because of this small number the variety of the meals they can show is very limited. For
example, each meal varies in factors such as level of spice, preparation time and type of cuisine,
but not every single one can be present in the small sample available in this plan. Because of the
14. Downs 14
few meals offered through Spoon University I believe Chef’d does not offer filters within their
“Swap Meal” page.
Although the plan may have reason to not include the filters, they allow a user to quickly
find what they are looking for, even if there are only a few options visible. For this task Tester 1
was required to go to each meal’s content page to see the level of spice assigned to it, close it and
go on to the next. Steps that could be eliminated through a filter feature would be a significant
decrease in the amount of unnecessary clicks a tester must do to find a spicy meal.
A way that Spoon University could improve this heuristic on Chefd.com would be to
create a small filter within the “Meal Swap” page for a user to specify what type of meal they are
looking for. This filter could easily resemble the filters present on the “All Meals” page in the
body of Chefd.com for a user’s benefit.
Alignment to Heuristic:
I believe the heuristic that aligns with this problem closest is flexibility and efficiency of
use. This heuristic uses unseen accelerators to speed up interactions between a website and its
users. The idea behind this heuristic is to create filters and sorting mechanisms to cater to the
actions of both experienced and inexperienced users. Filters are used to narrow down results
based on a user’s preferences (for E-commerce sites this may be price, size, or color) so that a
user can easily find what they are looking for. Similar to filters are sort features, which takes all
the products and puts them in a particular order (for E-commerce this might be alphabetical or by
price). These accelerators help speed up the process of allowing a user to view a smaller pool of
results to meet their needs efficiently.
This heuristic fits into the problems associated with the second task, finding a spicy meal
to add to the meal plan. In this plan, the users began looking for a way to search for a specific
15. Downs 15
type of meal within the “Swap Meal” page. In general, this reaction is due to the way that we
have become familiar with filter and sort features. When the testers saw that there was not an
option present to search or sort by the spiciness they saw the gap that Chefd.com had compared
to other E-commerce sites, such as Amazon.
In addition to not meeting their expectations, this heuristic fits into this task because,
when done correctly, it allows quicker interactions to occur between the user and the website.
Without a sort or filter feature, the tester had to individually check each meal to see if met the
spicy requirement rather than filtering all the results in a few second-nature clicks.
Task 3: “Ensure none of your meals, “Grab ‘n’ Go’s” or snacks is more than 450 calories per
serving. If the calorie count is too high, swap the item for another.”
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 2.0 4.0 3.0
Success Rate 50% 100% 75%
Highlights:
1. Similar to task three, both testers faced was initially to judge each meal, “Grab ‘n’ Go” or
snack to see if any ‘looked’ like they would have more than 450 calories per
serving. This most likely stemmed from a thought process that denied that there was a
definite way to check the calories of each item per serving. Not long after, however, the
testers moved on to individual content pages which contained the information they
needed to find the nutrition facts.
16. Downs 16
2. Tester 1 experienced a great amount of difficulty completing this task because a page on
Chef’d froze while the browser was trying to show a product’s nutrition facts. Initially
the tester was not affected by the single page’s loading time, but it did when the entire
website became unresponsive. His initial thought was that it was due to the quantity of
tabs he had open, so he closed every tab but the one he was working on.
3. Tester 2 encountered a problem with this task because of the limited results that
Chefd.com offered her due to her gluten-free dietary needs. Tester 2 was unable to
complete this task because of the five meals she chose exceeded the calorie count, but no
other meals were available to take its place. This is not necessarily a problem with this
task, but in general for those with dietary restrictions and interested in eating healthy.
This would not affect that many individuals, however it did keep Tester 2 from receiving
100% successful results on this test.
Biggest Problem:
The biggest problem that was encountered during this task was that the website froze and
became unresponsive. Prior to the whole page essentially crashing there had been a few errors
for photographs and nutrition facts loading, but nothing that stopped the user from interacting
with the site. For the next few minutes Tester 1 attempted numerous things to get a response
from the site without luck.
To begin the task, Tester 1 was able to find the nutrition facts within each item included
in his meal plan relatively easy. He was able to click through and swap meals if they exceeded
the calorie count without a problem. After checking a few meals’ nutrition facts (3 page requests
each) the pages began to come up slower and photographs would display loading circles
indicating that the request was being processed.
17. Downs 17
Tester 1 began the usability test with 25 tabs open on his Google Chrome browser,
connected to Wi-Fi secured through Northwest Missouri State on his university laptop. When
Tester 1 ran into the loading error his initial thought was to close unnecessary tabs on his
browser to boost his computer’s ability to process the requests received from Chefd.com.
Though there was visual progress the first few times a page was loading, it was of no help when
the entire site went down. Though the user’s excessive tabs may have been playing into the
problem, a conclusion that can be drawn is that it was also a problem with the site’s loading
speeds and ability to process page requests in addition to the amount of content on each page.
Besides rating his experience low on the particular task, Tester 1 became visually
frustrated with the site, saying, “So at this point I’m wondering if it’s even worth it {Chef’d meal
plan} to go back and just retry it.” As noted in the previous quote Chefd.com could lose a lot of
business with slow loading speeds in combination with poor design to create a poor user
experience.
Alignment to Heuristic:
The heuristic I believe best describes the problem illustrated in this usability task is the
user control and freedom. Overall, when implemented correctly, this heuristic gives users an
emergency exit or way out. By providing these for the user the site better caters to their needs
and wants, leading to a delightful user experience. Contrastly, when done poorly this heuristic
can send the user through unwanted dialogue or tasks in which they cannot control.
The reason that this heuristic aligns with this task on Spoon University meal plans is that
when the site became unresponsive there was nothing a user could do. Ultimately Tester 1
experienced a great amount of frustration because he had no control over the site nor was it
responding to his actions. Furthermore, the only other choice besides waiting for the site was to
18. Downs 18
refresh the page; resulting in the loss of all the information that had been taken previously to
create the plan. Although this is not necessarily an issue with user experience, it greatly affected
the way that the user interacted with the site afterward.
This scenario represents a problem in the website’s design and functionality due to the
amount of content that needed to load in addition to the original design of the webpages. Tester
1 had no control over the website’s responsiveness nor to its ability to process the tasks that
needed to be completed to finish the task. The biggest problem for this task was set in the page’s
unresponsiveness to the tester’s actions resulting in frustration that really deterred Tester 1’s user
experience on Chefd.com.
Task 4: “Determine the day the meal plan would be delivered.”
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 5.0 5.0 5.0
Success Rate 100% 100% 100%
Highlights:
1. A small problem Tester 1 encountered was that she ‘accidentally’ clicked “Add to Cart,”
meaning that by doing so she was unsure that it would help her complete the task. From
there, she figured out how to complete the task, but almost went back to the previous
page to scroll up and down to try to find it. This shows a problem with Tester 1’s
confidence in achieving what was necessary for the task to be successful.
19. Downs 19
2. A small problem within the “Add to Cart” sidebar was that the content was not
recognizable as content, but rather an advertisement. This actual content included a
detailed list of each item that was included in the tester’s meal plan with small picture
icons. This was a problem because neither tester took a second glance at the boxes but
scrolled quickly down them without realizing the information that they contained. This is
a problem because this feature is a way that Chef’d is confirming the meal plan choices
their users selected as correct, but if a user isn’t looking at it the error prevention method
is useless.
3. Another problem was that the testers were wary of moving to the “Add to Cart” page
because they knew they might not be able to go back to the current page. This represents
the lack of clarity and information from Chefd.com to make a decision. Ultimately there
was no way to check the delivery date without fully committing to the product. Similarly,
the issue only became worse when they were asked to enter their zip code, increasing the
amount of pressure on them to purchase the plan.
Biggest Problem:
The biggest problem that the testers faced in the fourth task was the commitment that was
required to find out when the meal plan would be delivered. When the meal plan is satisfactory
to a user, they click “Add to Cart,” which shows the meal plan in their cart. From there, a user is
asked to hit “Checkout” and enter their zip code before the delivery dates are shown. This is
significant because each additional click requires even more commitment by the user and
pressure by the seller to make sure the meal plan is purchased. In general, these are designed by
Chefd.com to spur a user on to buying the plan, however the commitment could put unwanted
pressure on the consumers.
20. Downs 20
In addition to that, there are very few ways to go back to previous pages once the “Add to
Cart” is selected. In the sidebar, it shows small icons of the items included in the plan as to
double check each item in the order but clicking them does not take you back to that particular
meal selection. To Chefd.com’s credit, however, there are orange buttons that say “Back” and
“Edit,” but they are difficult to spot because of their relative size.
When a user buys a Spoon University meal plan from Chefd.com, they are not only
buying a singular, a-la-carte meal like Chef’d is known for, but is purchasing a weekly
subscription of meals, snacks and “Grab ‘n’ Go’s.” It is clear that Chef’d specializes in singular
meals when looking at the way the meal plan is displayed in the cart feature. A user might fear
that they choose a meal that they did not want, so being able to avoid these mistakes before the
meal plan is ordered is a necessity.
Alignment to Heuristic:
The major problem in this task relates to an expectation gap relevant in the user control
and freedom heuristic. This means that the user feels like they lack control when they make
small errors and need to return back to a screen. Common forms of this heuristic include
informational or instructional buttons, such as “X,” “Cancel” and “Undo.” Implementing these
on a website allows the user to have peace of mind with ways to exit or go back to another screen
easily.
This heuristic relates to the problem because the site’s structure to complete the meal plan
could be viewed as restrictive for the user, requiring a lot of commitment before showing minor
details like the date of delivery. In general, user control and freedom gives a user a way out of
something they didn’t want to click, or a way to change their preferences with ease. This
21. Downs 21
heuristic also relates to the way that Chef’d confirms their users’ orders in the checkout feature,
functioning to offer solutions to potential user mistakes.
A few ways that Chefd.com could implement better user control and freedom would be to
enlarge “Cancel” and “Undo” buttons, as well as add buttons such as “Back.” Once a user has
added the meal plan to their cart, there’s not a simple way to go back to previous steps, so
implementing these buttons would allow the user to feel more control to complete the task. For
Chef’d to achieve success in the checkout process, they must maintain low pressure for a user to
buy a meal plan in combination with a simple way to confirm each meal choice.
Final Site Thoughts:
After the testers had completed the usability tasks, they were asked their final site
thoughts. Similarities between the testers’ opinions were their liking of the site’s idea, as well as
comparing their final thoughts to their original site thoughts. Differences expressed between the users
were primarily their ideas on how Chefd.com’s Spoon University meal plans could be improved.
The first similarity between the testers expressed at this time was their partiality to the meals that
were featured on the website. Tester 1 recalled how every meal he looked at looked delicious and easy to
make. Similarly, Tester 2 commented on her interest in looking further into Chefd.com’s a-la-carte
meals. Overall, both users were able to explore the meal kit idea that has in some ways changed the way
we eat.
Another parallel the testers had in common was to compare their initial site thoughts to their new
ones after completing the usability test. At the beginning, both testers said they were impressed with the
minimalist design and organization present on Chefd.com’s homepage. Ironically, after the usability tests
both said that their initial thoughts of the site’s simplicity were the potential cause for a lot of problems
they experienced during the test, such as lack of instruction.
22. Downs 22
As expressed previously, the differences between the testers’ thoughts at the end were specific to
the individual difficulties they struggled with while completing the usability tests. Tester 1 had a few
improvements that he focused on; primarily that there was a disconnect between his expectations of the
page design and the reality of what they were. Contrastly, Tester 2 communicated the desire for
improvements as she reflected on her experience in Chefd.com’s Spoon University meal plan.
Although Tester 1 was unfamiliar with the terminology, he discussed issues he saw regarding the
visible content on the page (above the fold) and the words used to move a user through a task
(verbiage). Tester 1 believed that Chefd.com’s navigation header took up an excessive amount of vertical
space that hindered his ability to view other content on the page; he recommended that the site reduce it.
One of the biggest errors that Tester 1 ran into was having a false perception about what each page
contained, communicated primarily by the button keywords. Another suggestion Tester 1 focused on
during the final site thoughts was the importance of creating a page flow that could be easily understood
by the users.
Finals site thoughts from Tester 2 centered around her concerns with task two, finding a spicy
meal. Tester 2 reiterated that it would have been helpful for her to find the spicy meal if the site would
have provided her a sort or filter tool. Similarly, Tester 2 said that a tool that would have helped her
create a Spoon University meal plan would have been small “?” icons that give help instructions to aid a
user’s confusion.
Overall, the testers were surprised by the Spoon University feature offered through Chef’d, but
also disappointed in the process that existed to create the personalized meal plan that they desired.
Problem Improvement:
Overview
The problem stated above is an issue in not only the flow of the Spoon University meal
plan creation process, but also the instructions necessary to personalize the box were vague and
rarely referenced. To fix this user experience problem, I decided the best thing I could do was to
23. Downs 23
redesign the flow of the plan’s creation plan structure. Below are screenshots of Chefd.com’s
current Spoon University meal plan pages in addition to wireframes of the improvements I
believe would allow customers to have a better user experience.
Spoon University Meal Plan Page
I started by taking a look at Spoon University’s content page for their meal plans and
noticed that the “Start Meal Plan” option was offered too soon. Essentially, this led the testers to
click it instinctively without paying any attention to the important content listed below the
option. In the wireframe, I decided to
change the text on the photo that said
“Spoon University Meal Plan” because
I felt it was redundant, so I took the
paragraph below and pasted it on the
photo. Additionally, the header and
photo at the top of the page kept the
content from visibility and required
scrolling.
Although I was not able to
entirely fix the above the fold issues
(Tester 1’s suggestion), I tried to
organize the information in a way that
was practical and understandable.
Various other changes to note in the
wireframe below are a reduced header
24. Downs 24
size, a reduced main photo size, the
text above the photo, and most
importantly, the “Start Meal Plan”
button closer to the end of the page.
The screenshot and wireframe below
depict the before and after of this
particular page in the meal creation
process, but do not show the entirety
of the page. Following the “Start
Meal Plan” button on the real site
there is a “Press” section, followed
by a “Spoon Contributors” section,
leading to the footer. I did not see
any difficulty with those features, so
no changes were made nor displayed.
User Preferences Page
After a user clicked the “Start Meal Plan” option, they were taken to a page that asked a
question regarding their allergies, and then hit the “Next” button. From there, the user answered
what types of protein they preferred in meals, again followed by a “Next” button. A common
issue among the testers was the frustration of the scrolling patterns between these pages, the
number of clicks required to move forward, and the inconsistency of opt-in versus opt-out
questions.
After
Wireframe 1: Spoon University Meal Plan
Important
information
25. Downs 25
To begin correcting this page, I decided to
combine the two pages’ questions on a single page that
the user can navigate through by scrolling down. I
believe the number of times a user was required to hit
the “Next” button was confusing and made the process
seem more complicated than it needed to be.
Another change that I believed was necessary
was to clarify whether a user’s clicks were to select or
deselect an option. On Chefd.com’s current site, the
allergies question is opt-in, meaning that a user selects
an option as they would answer. Contrasting that
question style, after hitting “Next” following
allergies, the question that appears
is opt-out, meaning that all options are selected to
begin with. In opt-out scenarios a user’s click signifies
deselecting an object. Improvements made in this area
were to subject both questions to an opt-in style. This
would be implemented by setting each question’s
options initially with a gray color, changing to orange
when a user selects them. Overall, this will improve a
user’s confidence, conforming the site to web
standards.
Before
Screenshot 2: Allergies
Before
Screenshot 3: Proteins
Opt-In
Question
Opt-Out
Question
27. Downs 27
Additional Meals Page
One area that I believe that the Spoon University meal plan could vastly improve was to
clearly state the contents of each meal before asking the user to commit to a weekly plan. In
previous pages I have included that information, but to further explain those instructions I
decided to do so visually, displaying each meal as an option that a user can add to their plan.
To better account for the confusion regarding the quantity of meals included in the Spoon
University meal plan, I decided to create an individual page to display all of the meals available
to users. This entirely new page follows the structure of the others, but focuses on the
photographs of the meals, similar to the a-la-carte meals featured on Chefd.com. My reasoning
for this is that it better exhibits the
user’s purchase, shows a picture of
the delicious meal and brings clarity
to the task.
Another feature that I thought
would be helpful on this page was a
static total bar. This means that it
never changes position on the vertical
of the page. Initially the total would
indicate $49, the base of the weekly
plan, increasing as a user hits “Select
Meal.” For each change in total the
quantity would change, allowing the
user to know their price point. Before
Screenshot 4: Add Meals
28. Downs 28
Lastly, this page includes a “Back” button. One problem identified on the current site is
the inability to change your answers on a question, yielding user control and freedom. In
addition to that, the placement of the button is in a place where users would expect to find it,
parallel to the “View Plan” button.
After
Wireframe 3: Add Meals
29. Downs 29
Final Meal Plan Page
Chefd.com’s current page contains both the question asking for the quantity of meals the
user wants to add to the plan and the layout of the plan, however this is relatively confusing. To
break this up better, I decided to create the “Additional Meals” page, removing the elements
from this page, the final product confirmation. Similar to the previous page, an issue prevalent in
the usability tests was the confusion as to the content contained within the confirmation meal
Before
Screenshot 5A: Product Confirmation
Created an
“Additional
Meals” page
instead
30. Downs 30
plan page. This page looks
very similar to the last page
on Chefd.com’s current
website, as they visually
highlight each part of the
plan and what is included in
each (such as Grab ‘n’ Go’s).
Similar to the additional
meals page, this page also
includes a total feature
allowing the user to keep
an eye on their budget at all
times.
The greatest
improvement
in this area was to create
a separate page for adding
meals to the meal plan,
explained above. To build upon that, I wanted to create a page that clearly laid out each meal
that had been selected, as well as give multiple opportunities for the users to change their
preferences, such as the “Back” button or “Swap Meal” page. Similar to the additional meals
page, this page also includes a total feature allowing the user to keep an eye on their budget at all
times, rather than solely at the end of the process.
Before
Screenshot 5B: Product Confirmation
31. Downs 31
If a user got to the final meal confirmation page and decided they wanted to decrease the
number of meals in their plan, their first option could be to hit the “Back” button, taking them to
the “Additional Meals” page. Another option I would give them would be within the “Swap
Meal” page. Similar to Tester 1’s frustrations, I would build options to increase or decrease the
current amount of meals included in the plan. Overall, these options would prevent a user from
running into an unnecessary error and promote a delightful user experience.
After
Wireframe 4: Final Product Confirmation
For the sake of
space, the “In Your
Box” tab, header
and footer were
removed from the
full-page
screenshot
32. Downs 32
Conclusion
Overall, the improvements I made within the Spoon University meal plan process were to
work in collaboration with the recognition rather than recall heuristic. Ultimately, the problems
that caused the testers the most amount of stress were caused because a communication gap
between the website and the users. To improve the flow of each page, I sought to have a single
task to be completed on each page the user went to. By having a clear focus on each page, I
allowed the user to feel in control of the personalization process, also offering instructions along
the way as a guide if necessary.