SlideShare a Scribd company logo
1 of 32
Download to read offline
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
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.
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
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
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.
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
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
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
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
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
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
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
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
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
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.
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.
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
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.
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.
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
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.
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
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
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
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
Downs 26
Both questions
are on one page
After
Wireframe 2: Allergies & Proteins
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
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
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
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
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
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.

More Related Content

Similar to User Experience Assignment

nhanpham-FINALyummly
nhanpham-FINALyummlynhanpham-FINALyummly
nhanpham-FINALyummly
Nhan Pham
 
Yummy Vegetables - Creating Habit with Email
Yummy Vegetables - Creating Habit with EmailYummy Vegetables - Creating Habit with Email
Yummy Vegetables - Creating Habit with Email
faerystrangeme
 
Amy Bundy webquest
Amy Bundy webquestAmy Bundy webquest
Amy Bundy webquest
Amy Bundy
 

Similar to User Experience Assignment (20)

Usability analysis based on field testing
Usability analysis based on field testingUsability analysis based on field testing
Usability analysis based on field testing
 
Usability paper
Usability paperUsability paper
Usability paper
 
Usabilitytestforchefd zoe green
Usabilitytestforchefd zoe greenUsabilitytestforchefd zoe green
Usabilitytestforchefd zoe green
 
Paper 2 - Usability test for Chefd.com
Paper 2 - Usability test for Chefd.comPaper 2 - Usability test for Chefd.com
Paper 2 - Usability test for Chefd.com
 
Introduction to Web Publishing Paper #2
Introduction to Web Publishing Paper #2Introduction to Web Publishing Paper #2
Introduction to Web Publishing Paper #2
 
Usability test for chefd.com
Usability test for chefd.comUsability test for chefd.com
Usability test for chefd.com
 
Usability Test for Chefd.com
Usability Test for Chefd.comUsability Test for Chefd.com
Usability Test for Chefd.com
 
Bates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.comBates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.com
 
Usability testforsunbasket eliciareuscher
Usability testforsunbasket eliciareuscherUsability testforsunbasket eliciareuscher
Usability testforsunbasket eliciareuscher
 
Usability Test Research
Usability Test ResearchUsability Test Research
Usability Test Research
 
Usability and Analysis Based on User Field Testing
Usability and Analysis Based on User Field TestingUsability and Analysis Based on User Field Testing
Usability and Analysis Based on User Field Testing
 
Usability Test for SunBasket.com
Usability Test for SunBasket.comUsability Test for SunBasket.com
Usability Test for SunBasket.com
 
Sun Basket UX Analysis
Sun Basket UX AnalysisSun Basket UX Analysis
Sun Basket UX Analysis
 
nhanpham-FINALyummly
nhanpham-FINALyummlynhanpham-FINALyummly
nhanpham-FINALyummly
 
Sun Basket Usability Test
Sun Basket Usability TestSun Basket Usability Test
Sun Basket Usability Test
 
Usability analysis based on user field testing
Usability analysis based on user field testingUsability analysis based on user field testing
Usability analysis based on user field testing
 
Yummy Vegetables - Creating Habit with Email
Yummy Vegetables - Creating Habit with EmailYummy Vegetables - Creating Habit with Email
Yummy Vegetables - Creating Habit with Email
 
Yummy vegetables
Yummy vegetablesYummy vegetables
Yummy vegetables
 
UX CASE STUDY.pdf
UX CASE STUDY.pdfUX CASE STUDY.pdf
UX CASE STUDY.pdf
 
Amy Bundy webquest
Amy Bundy webquestAmy Bundy webquest
Amy Bundy webquest
 

Recently uploaded

INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSEINCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
RicaAbellanosa
 
Mastering Affiliate Marketing: A Comprehensive Guide to Success
Mastering Affiliate Marketing: A Comprehensive Guide to SuccessMastering Affiliate Marketing: A Comprehensive Guide to Success
Mastering Affiliate Marketing: A Comprehensive Guide to Success
Abdulsamad Lukman
 
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
Cara Menggugurkan Kandungan 087776558899
 

Recently uploaded (20)

Cartona.pptx. Marketing how to present your project very well , discussed a...
Cartona.pptx.   Marketing how to present your project very well , discussed a...Cartona.pptx.   Marketing how to present your project very well , discussed a...
Cartona.pptx. Marketing how to present your project very well , discussed a...
 
The Essence of Mothers Celebrating the Heart of the Family.pptx
The Essence of Mothers Celebrating the Heart of the Family.pptxThe Essence of Mothers Celebrating the Heart of the Family.pptx
The Essence of Mothers Celebrating the Heart of the Family.pptx
 
The seven principles of persuasion by Dr. Robert Cialdini
The seven principles of persuasion by Dr. Robert CialdiniThe seven principles of persuasion by Dr. Robert Cialdini
The seven principles of persuasion by Dr. Robert Cialdini
 
Crypto Quantum Leap - Digital - membership area
Crypto Quantum Leap -  Digital - membership areaCrypto Quantum Leap -  Digital - membership area
Crypto Quantum Leap - Digital - membership area
 
INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSEINCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
INCOME TAXATION- CHAPTER 13-A ADDITIONAL CLAIMABLE COMPENSATION EXPENSE
 
HOW TO HANDLE SALES OBJECTIONS | SELLING AND NEGOTIATION
HOW TO HANDLE SALES OBJECTIONS | SELLING AND NEGOTIATIONHOW TO HANDLE SALES OBJECTIONS | SELLING AND NEGOTIATION
HOW TO HANDLE SALES OBJECTIONS | SELLING AND NEGOTIATION
 
Alpha Media March 2024 Buyers Guide.pptx
Alpha Media March 2024 Buyers Guide.pptxAlpha Media March 2024 Buyers Guide.pptx
Alpha Media March 2024 Buyers Guide.pptx
 
Aiizennxqc Digital Marketing | SEO & SMM
Aiizennxqc Digital Marketing | SEO & SMMAiizennxqc Digital Marketing | SEO & SMM
Aiizennxqc Digital Marketing | SEO & SMM
 
TAM_AdEx-Cross_Media_Report-Banking_Finance_Investment_(BFSI)_2023.pdf
TAM_AdEx-Cross_Media_Report-Banking_Finance_Investment_(BFSI)_2023.pdfTAM_AdEx-Cross_Media_Report-Banking_Finance_Investment_(BFSI)_2023.pdf
TAM_AdEx-Cross_Media_Report-Banking_Finance_Investment_(BFSI)_2023.pdf
 
Mastering Affiliate Marketing: A Comprehensive Guide to Success
Mastering Affiliate Marketing: A Comprehensive Guide to SuccessMastering Affiliate Marketing: A Comprehensive Guide to Success
Mastering Affiliate Marketing: A Comprehensive Guide to Success
 
The Impact Of Social Media Advertising.pdf
The Impact Of Social Media Advertising.pdfThe Impact Of Social Media Advertising.pdf
The Impact Of Social Media Advertising.pdf
 
Resumé Karina Perez | Digital Strategist
Resumé Karina Perez | Digital StrategistResumé Karina Perez | Digital Strategist
Resumé Karina Perez | Digital Strategist
 
Personal Brand Exploration Selk_Ingrid_DMBS_PB1_2024-01.pptx
Personal Brand Exploration Selk_Ingrid_DMBS_PB1_2024-01.pptxPersonal Brand Exploration Selk_Ingrid_DMBS_PB1_2024-01.pptx
Personal Brand Exploration Selk_Ingrid_DMBS_PB1_2024-01.pptx
 
Elevating Your Digital Presence by Evitha.pdf
Elevating Your Digital Presence by Evitha.pdfElevating Your Digital Presence by Evitha.pdf
Elevating Your Digital Presence by Evitha.pdf
 
Rohtak Escorts Service Girl ^ 9332606886, WhatsApp Anytime Rohtak
Rohtak Escorts Service Girl ^ 9332606886, WhatsApp Anytime RohtakRohtak Escorts Service Girl ^ 9332606886, WhatsApp Anytime Rohtak
Rohtak Escorts Service Girl ^ 9332606886, WhatsApp Anytime Rohtak
 
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
4 TRIK CARA MENGGUGURKAN JANIN ATAU ABORSI KANDUNGAN
 
personal branding kit for music business
personal branding kit for music businesspersonal branding kit for music business
personal branding kit for music business
 
Aligarh Hire 💕 8250092165 Young and Hot Call Girls Service Agency Escorts
Aligarh Hire 💕 8250092165 Young and Hot Call Girls Service Agency EscortsAligarh Hire 💕 8250092165 Young and Hot Call Girls Service Agency Escorts
Aligarh Hire 💕 8250092165 Young and Hot Call Girls Service Agency Escorts
 
The Art of sales from fictional characters.
The Art of sales from fictional characters.The Art of sales from fictional characters.
The Art of sales from fictional characters.
 
Distribution Ad Platform_ The Role of Distribution Ad Network.pdf
Distribution Ad Platform_ The Role of  Distribution Ad Network.pdfDistribution Ad Platform_ The Role of  Distribution Ad Network.pdf
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
  • 26. Downs 26 Both questions are on one page After Wireframe 2: Allergies & Proteins
  • 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.