SlideShare a Scribd company logo
1 of 31
Download to read offline
Johnson 1
Taylor Johnson
Professor Lamer
Intro to Web Publishing
8 March 2018
Usability Test for Chefd.com
Test Preparation
I prepared to conduct two usability tests on chefd.com by first familiarizing myself with what a
usability test was and how it should be conducted. The lectures in class helped me know what the
test was, but it was not until I watched Steve Krug’s Usability Demo that I could fully
understand and visualize the individual steps of a usability test. This video not only gave me an
idea of how much information I should collect during each task, but it made me realize the
importance of getting the user to talk out loud throughout the duration of the test. In the demo
video, the user says things like “I am going to scroll down” or “I am clicking on ____”. Even
though these seemed like small details, I believe doing this forces the user to think about the
steps he/she takes before taking them. It also allows the conductor to not only see, but hear, what
the user is doing. After watching this video, I also looked at “Things a Therapist Would Say” so I
would know how to respond to the user if questions arose. It also let me know that it may be
beneficial to paraphrase what the user said or ask questions for clarification in order to fully
understand what the user means. All of this information helped me prior to conducting usability
tests. However, before conducting the tests on two users, I completed the tasks myself and noted
the problems and difficulties I encountered.
The first task was to create a Spoon University meal plan and determine the total weekly
cost. Since I was already very familiar with this site, I easily found this meal plan under the meal
Johnson 2
plan tab. I created my meal plan, which was a quick and easy process. However, I did discover
some problems when completing this task. One of these problems was that after selecting the
proteins for my meal plan and clicking “Next,” I had to scroll back up to select how many meals
I wanted in my Spoon U Box. This is a small detail, but not being able to see that next step
without scrolling up is still a usability issue. It could confuse the user or annoy him/her since it
takes extra unnecessary time. Without scrolling up, I could only see a white screen with another
“Next” button. Clicking this button means that the user has unknowingly skipped a step,
selecting 0 meals for his/her Spoon U Box. In my case, I knew to scroll up and select the number
of meals I wanted in my box, but I could see this causing an issue for other users. After creating
my meal plan, I scrolled down to see that my total cost would be $62.
The next task was to determine my spicy meal options and choose a meal I was willing to
prepare. I clicked on a meal, Chili Mac and Cheese, and found its spiciness to be mild. To me,
mild did not seem like a “spicy meal option,” so I continued to click on different meals, looking
at how spicy each one was. One problem I had with this process was that it took a long time to
close out each meal and click on another one just to find the level of spiciness. So, I thought I
would search “spicy” in the search bar to get quicker results. However, the list of meals I got
were not from Spoon University’s Meal Plan so I instead searched “Spoon University Spicy
Meals” in hopes of getting a list of specific meals. However, I got no results, so I had no option
but to go back to Spoon University’s page and continue looking through each product page.
After looking through each meal, I found mild to be the spiciest option for this meal plan. As a
user, it made me wonder if Chef’d considers “mild” to be spicy. Since mild was the spiciest
option, I chose the Chicken Quesadilla as the meal I was willing to prepare for this task.
Johnson 3
The third task was to ensure none of my meals, “Grab n’ Go’s” or snacks were more than
450 calories per serving. If the calorie count was too high, I needed to swap the item for another.
After choosing the Chicken Quesadilla as my meal, I hit the back arrow by accident instead of
closing out of the current meal. I discovered that doing this made me start over in creating my
meal plan, which was an annoyance to me. I went through the whole process again and made
sure to add the plan to my cart, hoping that doing this would prevent me from losing my
selections if I happened to hit the back arrow again. I then went through my meal plan and
clicked on each meal, “Grab n’ Go” and snack to find the nutritional information. This
information was easy to find, but I did have to go to each product page to find the information,
just like in the previous task. I only found three Grab n’ Go’s to have over 450 calories, so I
swapped those out for other options. I found the process of swapping meals/Grab n’ Go’s to be
easy because I had experimented with this in the last assignment. However, one thing I did notice
was that no nutritional information was given for the fruit/snacks. I just assumed that the fruit
and healthy snacks included in the meal plan would be under 450 calories.
The last task was to figure out if the spicy meal I ordered would arrive by Saturday if it
was a Monday at 3:30 p.m. When reading this task, I thought it would be easiest to search
“shipping” to find the range of time it would take for Chef’d to prepare and deliver my meal
plan. However, after putting this keyword in the search bar, I got no results. So, I decided to
enter the same keyword in the help box in the bottom corner. A list of nine results popped up,
and I clicked on “How do I set up delivery? What if I have special driver instructions?” The
answer told me to look in the “Your Cart” page for delivery information. After going to my cart
and putting in my zip code, it told me that the soonest delivery date would be March 6, which
was a week and a day from the date I took this test. Therefore, the meal would not arrive in time
Johnson 4
because Monday and Saturday are only 5 days apart. Completing these tasks before testing my
users gave me an idea of what to expect and look for when conducting the tests. It also allowed
for me to make connections between the problems of myself and other testers throughout the
duration of the assignment. Knowing that I was familiar with the site beforehand and still
experienced some of the same problems meant that there were usability issues for every user, not
just newly exposed ones.
Choosing Participants
Tester 1: Kalleigh Tharp
My first tester is a 19-year-old female who is a sophomore at Northwest Missouri State
University. Kalleigh is a full-time student studying Agriculture Business/Agronomy, and she is
involved in multiple on campus organizations, such as the Northwest Missouri State University
Collegiate Farm Bureau Chapter and the Baptist Student Union. She considers school and these
organizations to be her current occupation because this is where she dedicates the majority of her
time. In her free time, Kalleigh enjoys going to the gym and making new recipes she finds off
Pinterest. Being interested in Agriculture, Kalleigh made sure to mention that her major does
influence what she eats and that she prefers to buys local or homegrown products when
available. Kalleigh spends about 10 hours a week on the Internet, 7 of those hours being
dedicated to school and the other 3 dedicated to personal use at home. For her split between
social media and browsing, she said about 20% of her time is spent on social media, with the
other 80% going to browsing. Within social media, she spends about 50% of that time on
Pinterest because it is one of her favorite sites to spend time on. Kalleigh considers herself a
high-experience user of the Internet because Internet is something that she has used since 3rd
grade and she continues to use it more and more as she gets older. As years pass, she expects her
Johnson 5
experience on the Internet to get even better. When asked about Chef’d, Kalleigh had never
heard of the brand but was aware of what pre-portioned meal kits were. She has never shopped
for food online before, but knows that it is offered.
Kalleigh is a reasonable tester for this assignment because she is a college student, cares
about what she eats, and was willing to participate. Since Spoon University’s Meal Plan is for
college students, it was important to get a college student to complete the test since this is the
audience being targeted. In addition, since Chef’d as a whole focuses on healthy meal kits with
fresh ingredients, I thought Kalleigh would relate to this specific company since she is involved
and invested in Agriculture. Lastly, before we began the testing, I made sure she was willing to
take her time and speak out loud when completing the tasks so I could gather as much
information as possible. I also chose Kalleigh because she is different from me. I know her from
the Baptist Student Union and we are friends, but not best friends. She also lives a very different
lifestyle than me because she is so interested in Agriculture, so I thought she would be a good
candidate for this assignment. Since she had never heard of Chef’d, I also knew she would be a
new user to the site, which is another important aspect of this assignment.
Environment for Tester 1
 Location of test: This test was conducted in the Starbucks area on the first floor
of the B.D. Owens Library. We sat at a round table against the wall, which was next to a
window. I made sure to ask her where she wanted to conduct the test beforehand so we could go
to a location where she was most comfortable. Since she takes all her classes on campus, she
mentioned that she tends to spend the time in-between classes at the library. Kalleigh normally
does her homework on the first floor and even though noise is around, she says that she can
Johnson 6
focus and get assignments done in this spot. Since this assignment required focus, she thought it
would be most beneficial to conduct the test on the first floor.
 Physical Environment: As I mentioned, Kalleigh and I sat at a table that was
right by a window. The Starbuck’s area of the library is very dim, but sitting by the window
allowed for some natural light to come in. It was 4:30 p.m., so the sun was starting to set when
we began the test. It was very loud in the Starbuck’s area at first, but as time went on, people
began to leave the library and it got much quieter. We sat in chairs that had back support and not
a lot of cushioning. Kalleigh sat with her feet flat on the floor throughout the duration of the test.
The main distractions in the room were noises made by people. Others talking, Starbuck’s
machines, and a heater were the main surrounding noises. Kalleigh had her phone put away, so
that was not an object of distraction for her.
 Technical Environment: Kalleigh used her school laptop for this test, which is a
silver Hewlett-Packard (HP) Elitebook. She was connected to the Northwest Secure Wi-Fi and
used Google Chrome as her browser. She did not have any plug-ins on her screen, so Chef’d’s
website appeared as it would on a normal laptop screen. She did have other tabs open on Google
Chrome, which could have affected some of the speed issues, which I will discuss later.
Tester 2: Bruce Dewitt
My second tester is a 21-year-old male who is a freshman graduate student at Northwest
Missouri State University. Bruce is a Geographic Information Systems major and is involved in
organizations both on and off campus. He is a member at the Baptist Student Union, is in the
choir at Laura Street Baptist Church, and leads a 6th
grade youth group at his church as well. He
has a full-time job at Midland GIS Solutions in Maryville, MO, but he considers being a student
his occupation as well. He does not have much free time, so he prepares meals that are quick and
Johnson 7
easy. Bruce cares about what he eats and tries to keep a healthy balance between different food
groups. Bruce spends about 50 hours a week on the internet, 40 of those coming from work,
since his job requires constant use of the Internet. The remaining 10 hours are for personal use at
home. He hardly spends any time on social media, so his split between social media and
browsing is about 10% and 90%. Bruce considers himself to be a high-experience user of the
Internet because since his job forces him to use the Internet all day, it has become an important
part of his life. His occupation interests him; therefore, the Internet interests him as well. When
asked about Chef’d, Bruce had never heard of this brand, but he was aware of what pre-portioned
meal kits were. He does the majority of his shopping in-stores, so he has never purchased food
online before. However, he was aware that these types of companies existed and that buying
food online is an option.
Bruce was a reasonable tester for this assignment because he is a college student, watches
what food he consumes, and was willing to take time out of his day to help me. Like I mentioned
before with Kalleigh, Spoon University offers a meal plan that is targeted towards college
students, so that was the first necessity when looking for a tester. Bruce is also aware of the food
he eats and tries to eat as healthy as he can with his busy schedule. He also knew that this
usability test would take active participation on his part so that I could get as much useful
information from him as possible. I also chose Bruce because I wanted to have a tester that was
not only different from me, but the other tester I chose as well. Both Bruce and Kalleigh have
different characteristics, such as gender, age, and Internet exposure. Having two different
genders complete the tests can be beneficial because they might have different perspectives and
frustrations when it comes to chefd.com. In addition, while Bruce is only 2 years older than
Kalleigh, those two years can mean a lot since he is farther along in his schooling and has more
Johnson 8
experience with technology. Lastly, Bruce appears to be exposed to the Internet 5 times more
than Kalleigh on a weekly basis. I thought it was important to find two users that differed when it
came to Internet exposure in order to see if they still had some of the same problems, or if one
user discovered more problems than the other. Since both of these people met the requirements
to be considered “reasonable testers,” I was able to use them for the completion of this
assignment.
Environment for Tester 2
 Location of test: This test was conducted at Bruce’s apartment, which is located
at 316 East 4th
Street in Maryville, Missouri. When I asked Bruce where he wanted to take the
test, he said that he is most productive in his personal space, so he thought his apartment would
be the best fit for this kind of test. Bruce does not spend a ton of time on campus, so he is used to
completing his assignments at his apartment. He focuses the best in a quiet environment and
since his roommate, Bob, is not around much, this is why he thinks he is able to get more
accomplished in his home.
 Physical Environment: Within Bruce’s apartment, the test was conducted in his
living room on the couch. It was a very casual setting with artificial lights on in both the kitchen
and living room, making the room well-lit. Since we sat on a couch with more cushioning, the
seat was less supportive compared to the chairs I sat in when conducting Kalleigh’s test. Bruce
sat with his feet crossed on the ground, without shoes. Overall, this environment was much less
formal than the library. We started the test at 5:00 p.m. Two noise distractions were his laundry
machine, which ran during the first half of the test, and his phone, which vibrated towards the
beginning of the test.
Johnson 9
 Technical Environment: Bruce used his school laptop for his test as well. Again,
the provided laptop from Northwest is a silver Hewlett-Packard (HP) Elitebook. He was
connected to his personal Wi-Fi, from SuddenLink, and used Google Chrome as his browser. I
noticed that he uses a dark theme on Google Chrome instead of the default light theme. With this
change, the background color is black instead of white, and the text color is light instead of dark.
I was not sure if this would affect the appearance of chefd.com, but it was interesting to note that
he prefers a darker theme to a lighter one. Bruce also had some bookmarked pages on his screen
like weather, maps, Gmail, and the Northwest homepage. Having these bookmarks made the
screen a tiny bit smaller when compared to Kalleigh’s screen. He had no other tabs open prior to
starting the test.
Test Results
Initial Site Thoughts
Kalleigh’s first thought about chefd.com was that the layout, pictures, and colors were
appealing to the eye. Just by scrolling through the home page, Kalleigh knew that the person who
started this company cared about health friendly products. She also gathered that the meal kits
offered would vary based on personal preferences and interests. Kalleigh noticed that there was a
featured chef towards the bottom of the home page, so she wondered if this was the person who
started this organization? Or if they involved in some other way? Overall, Kalleigh liked the look
of the home page, but did not feel as though she could grasp a ton of useful information from it.
Since the website seemed to be grouped in different sections, she also felt like she had to scroll
for a while before reaching the bottom of the page.
At first glance, Bruce noticed there was a slideshow at the top of the page. He told me
that it had high-quality pictures, but other than that, it was “just a boring slideshow”. He said that
Johnson 10
the text on the slides did not excite him or make him want to click for more information. When
he read the text on the home page, Bruce felt like there was no clear indication of what Chef’d’s
purpose was. He guessed that the company delivered pre-prepped meals to people, but he felt as
if he should have been given a clear answer from the beginning. Another thing Bruce mentioned
about the home page was that he did not like the way the navigation was set up. When he tried to
scroll down on the home page, he accidentally brushed his cursor over a navigation item. When
he did this, the dropdown menu took up over half of his screen and it was hard for him to get rid
of it. He had to move his cursor to the bottom of the screen to get this menu to disappear, which
slightly annoyed him.
Kalleigh and Bruce did have some similar initial site thoughts as well. Both testers said
that the pictures of the food/ meal plans on the site looked appealing. They both noticed that
there was a video on the home page as well, but could not tell what the video would be about just
based on its heading and cover photo. Kalleigh and Bruce also noticed that Chef’d as a company
offers many types of meals, with most of those meals looking like healthy options. Both users
hoped that the rest of the site would be as visually appealing as the home page. However, they
felt the information given on the home page did not explain enough about Chef’d, so they hoped
the other pages of the site would make them fully understand this company and what it offers.
Task 1: Build a Spoon University meal plan and determine the total weekly cost.
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 3 4 3.5
Success Rate 100% 100% 100%
Johnson 11
Highlights:
1) Testers were confused about the grey/orange buttons when creating their meal
plan. Both testers were not sure if they were selecting or deselecting certain options when
answering the questions.
2) Testers thought the dropdown menu was too sensitive because it would
disappear if their cursor was not on the exact right area of the screen. This made it
difficult for the user to click on the “Spoon University Meal Plan” link.
3) After completing the second step in creating a meal plan, users were unsure
what to do when a blank white screen with a “Next” button appeared. Since the button
was highlighted orange, users did not know if they were supposed to click the button or
find another question to answer before clicking it.
Biggest Problem:
The biggest problem for this task was the first highlight I listed, when users were
confused about the grey/orange buttons when creating their meal plan. When Kalleigh started
creating her plan, she thought the process seemed straightforward and simple. When asked about
her allergies, she clicked none. When she clicked “none,” the button turned from grey to orange.
After selecting this answer, she clicked on the “next” button. The following step was to decide
what proteins she wanted in her meal. All of the proteins were highlighted orange, but since she
had selected her allergies in the previous question, she thought she was supposed to select her
preferred proteins in this step. So, she clicked on beef, lamb, poultry, fish, pork, and shellfish,
thinking she was selecting these proteins to be included in her meal kit. However, she was
actually deselecting all of these options, turning the buttons grey. Vegetarian was now the only
option that was still highlighted orange when she clicked “next”. The next screen was white with
another “next” button, so she clicked on that to finish creating her meal plan. She then scrolled
Johnson 12
down to discover she did not have any meals in her meal kit, so she scrolled up and discovered
she skipped that step. She added 2 meals to her kit and realized that none of her meals had meat
in them. She said, “I am confused as to why my meals don’t have meat in them. I selected every
kind of protein besides Vegetarian”. Kalleigh was frustrated and confused, so she went back to
look at the choices she made for her meal plan. After going through each step again, she realized
that orange meant selected and grey meant deselected. She reselected the protein options she
wanted and deselected vegetarian. Redoing this step took extra time and frustrated Kalleigh.
Bruce was also confused about whether the buttons were selected or deselected when
creating his meal plan. To start, he read the phrase “I’m allergic to” and immediately scrolled
down to click “next,” because he has no allergies. The button was greyed out and he could not
figure out why. He scrolled back up to discover that he had to click “none” to move on to the
next step. When the next question asked him what proteins he liked in his meals, he looked over
the options and clicked beef. After a couple of seconds, he realized that he had deselected beef
since it turned grey. He reselected it and said, “Well, that is confusing”. Even though he caught
his mistake before moving on to the next step, he still admitted that he was confused. He clicked
“next” and was presented with a white screen and another “next” button, just as Kalleigh was. He
was unsure of what to do, but noticed that his scroll bar was not at the top of the screen. He
scrolled up to reveal another question, asking how many meals he wanted in his meal kit. He
selected 1 meal and then clicked on the “next” button. He noted that this process was more
confusing than it should have been, especially since there were only a few questions.
Alignment to Heuristic: Recognition rather than recall
This heuristic matches the biggest problem I observed for this task because users should
know exactly what they need to do when creating a meal plan at Chef’d. Recognition rather than
Johnson 13
recall is about having actions, options, and instructions available to the user if necessary in order
to create a good user experience. The buttons/labels on the page should also be clear and easy to
understand. For Chef’d, there were no instructions available when making the meal plan. After
clicking “Start my Meal Plan,” the page just lists the first prompt, “I’m allergic to”. Even though
this first task seemed straightforward, one of my users did not even realize that he had to select
an option before clicking next. In addition, my users unknowingly deselected the proteins
because there was no information even available to let them know that Chef’d had already
selected all of the protein options. The inconsistency of buttons being selected or deselected
across the questions made the buttons confusing. Users should not have to remember that orange
means “selected” from the first question about allergies, just as this heuristic mentions. If a site
offers good user experience, testers should know what to do. However, if they do not know what
to do, resources should be available in order to help the tester understand what to do. If
instructions or a little extra information would have been given throughout the process of making
a meal plan, it could have eliminated some, if not all, the confusion felt by my users.
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 1 4 2.5
Success Rate 50% 100% 75%
Johnson 14
Highlights:
1) Testers were frustrated when the page froze and they had to refresh/go back to the
previous page. This not only took extra time, but forced them to recreate their meal plan
every time the page reloaded.
2) Testers were surprised that they had to go to each individual product page to find how
spicy the meal was. They were unsure if there was an easier way to find this information.
3) Testers were unsure if there was a difference between “mild” and “none” when talking
about the spiciness of various meals.
Biggest Problem:
The biggest problem for this task was the first highlight I mentioned, which was when the
refresh or back button was clicked, all the data entered in for the meal plan was lost. Both of my
users clicked on one of those buttons while trying to complete the second task. Starting with
Kalleigh, she clicked on one of her existing meals, “Chili Mac and Cheese,” to try and find if this
meal was considered spicy or not. The meal was considered “mild,” so she hit the back arrow to
look at the spiciness of her other meal choice in her meal plan. However, when she clicked the
back arrow, she was taken all the way back to Spoon University’s landing page. She clicked on
“Start My Meal Plan,” and realized that none of her data had been saved. So, she had make
another meal plan, which took extra time. After finishing, she looked at another meal choice,
“Black Bean Chicken Brown Rice Bowl”. This meal was still considered mild, so she began
swapping her meals out, looking for a meal that would be spicier than mild. Since all of her data
was lost when she clicked the back arrow, she discovered a small “x” in the top right corner that
she had to click after looking at each product page. However, because she is so used to using the
back arrow on a daily basis, she did click it another time when trying to complete this task. Even
after hitting the forward arrow, she still had to recreate her plan yet another time. She told me
Johnson 15
that this was a major pain and that she was very unsatisfied with this task for this reason.
Kalleigh wanted to be able to go back and forth between product pages using what she was
comfortable with- the back arrow. Since Kalleigh only noticed “mild” meals and did not notice
that some were labeled “none,” I gave her a 50% success rate for this task.
Bruce also had to recreate his meal plan throughout this task, due to a similar problem.
Bruce only had 1 meal in his meal plan, so he added another meal to his plan and went to each
product page, looking for how spicy each one was. His two initial meals, “Spicy Mac and
Cheese” and “Smokey Buffalo Chicken Grilled Cheese,” were both mild. So, he hit “Swap
Meal” and looked at all of his options. Just by looking at the other meals offered, he said, “None
of these seem like they would be spicy.” But, he still went to every product page to look for the
level of spiciness. When he clicked on “Spaghetti Carbonara,” he got a loading icon that would
not go away. The product page did not load quickly, so Bruce decided to refresh the page. When
he hit refresh, he was taken back to Spoon University’s landing page. Just like Kalleigh, he had
to recreate his meal plan because all of his data was lost. He was annoyed by this, but figured
starting over would maybe fix the problem. Bruce tried clicking on “Spaghetti Carbonara” again,
only to have the same problem. He had to refresh the page and start over in creating his plan. He
decided to forget about the spaghetti and continue looking at other meals. After looking through
every meal, he noticed, unlike Kalleigh, that some of the meals had “none” for spiciness, while
others had “mild.” So, he chose a mild option for his spicy meal to finish the task. At the end of
the task, he said that he was annoyed and tired of making the same plan over and over.
Alignment to Heuristic: User control and freedom
This heuristic matches the biggest problem for this task because my users had no way to
escape or undo the mistake they made. User control and freedom is typically when testers think
Johnson 16
along the lines of, “Oops! Let me outta here!” If they think this while at a site, it is important to
have a way to escape so their experience is not ruined. In Kalleigh’s case, hitting the back arrow
and seeing Spoon University’s page was not what she expected. She instantly wanted to get back
to the page she was just on, so she clicked the forward arrow, or “redo”. However, even when
she did this, she still lost all of the data she had entered. Having to go through the whole process
of making a meal plan again was not ideal and there was no way for her to undo the mistake she
made. Chef’d needs to have a better support for undo and redo in order to save the data created
when making a meal plan. For Bruce, when the product would not load, his only option was to
refresh the page. There was no “emergency exit” to stop the product from loading, such as a
clickable “x” in the corner. Refreshing the page led him to the same problem that Kalleigh had,
having to recreate his meal plan. Since this happened multiple times, it impacted his experience
in a negative way. If Chef’d had multiple ways to escape the page without refreshing it, this
would give the user more control over his/her experience.
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:
Highlights:
1) Testers were both surprised and annoyed that they had to go to each individual
product page to find the nutrition facts for each meal. They were unsure if there was a
quicker way to accomplish this task.
Tester 1 Tester 2 Average
Average Satisfaction 1 4 2.5
Success Rate 100% 100% 100%
Johnson 17
2) Testers were surprised that there was no nutritional information available for the
seasonal fruits or healthy study snacks.
3) Testers were unsure why there was a slideshow on each product page when the
images were all the same. They wondered what the point of a slideshow was if it
showed the same picture repeatedly.
Biggest Problem:
The first highlight was the biggest problem for my users when they tried to complete this
task. Having to go to each product page to find the nutrition facts was tedious and time-
consuming. Both of my users expressed their thoughts on this process. Kalleigh said that the
nutrition facts were where she expected them to be, but she felt it took her too long to complete
the task. When she started the task, she went to the search bar to try and find some of the items
available in her meal plan. She searched “Cheesy eggs & spinach burrito in a mug,” which was a
“Grab n’ Go”. She got no results and after searching some other items in her plan, she discovered
that nothing in the Spoon University Meal Plan returned a result from the search bar. So, she
went back to her meal plan and clicked on each product. After clicking on the product, she had to
scroll down and click on a “Nutrition Facts” tab to find the information she was looking for. She
would then x out of the product page and repeat this process over and over. Once again, she
mentioned that this process was not hard, but that it took her too long. Kalleigh was not required
to swap any meals, “Grab n’ Go’s,” or snacks throughout this task because all of her preselected
choices were under 450 calories. However, she did swap “Four Cheese Mac n’ Cheese in a Mug”
with “Pepperoni Pizza in a Mug,” just to prove that she knew how to swap items.
Bruce also had some thoughts on the repetitive nature of this task. He said that “Going
back and forth [between pages] is annoying”. He began this task by first checking the nutrition
Johnson 18
facts for his meals. He easily found the information for the “Chili Mac and Cheese,” noting that
is was 440 calories, just under his 450 limit. His second meal was “BBQ Chicken Flatbread”. He
clicked on this product and clicked on the “Nutrition Facts” tab to find how many calories the
flatbread had. After clicking this tab, Bruce did not see any nutrition facts and instead saw a
blank white screen. He went back and forth between the other tabs on the screen, those being
Ingredients, Allergens, and From Your Kitchen. All of those tabs had information under them,
but after he clicked on the Nutrition Facts tab again, he still saw nothing but a blank screen. This
frustrated Bruce and forced him to spend even more time going back and forth to find a new
meal that he knew was under 450 calories. After finishing his meals, he went through the Grab n’
Go’s and the snacks. All of his Grab n’ Go’s were under 450 calories, so he did not have to swap
anything for this part of his meal kit. When he looked at his fruits/snacks, no nutrition
information was available, but he assumed that all of these products would be under 450 calories.
It took Bruce a long time to complete this task and he did not like having to go to every product
page to find one item of information.
Alignment to Heuristic: Flexibility and efficiency of use
This heuristic matches my biggest problem because testers were unable to speed up the
process of looking at nutritional information during this task. Since Kalleigh and Bruce had to go
to each product page to find the nutritional information, it would have been beneficial to have a
quicker way of finding this information. As mentioned above, each user expressed that they did
not like having to go back and forth between pages. The process was very repetitive and time
consuming for both testers. Flexibility and efficiency of use is all about allowing the tester/user
to do more or less. In this circumstance, if Chef’d offered the option to filter the meals in each
meal plan based on calorie count or total grams of fat, the user would not have to go to each
Johnson 19
product page to find the nutritional facts. The user would still have that option available, but
adding this filter could serve as an accelerator for those wanting to group the meals based on
common nutrition facts. This accelerator could apply to both new and returning Chef’d users
because many online shopping sites use filters to group items together. In addition, since
completing this task took so many extra clicks, adding this filter would lessen the amount of
needed clicks to find the nutritional information. Having to go to each product page is not
efficient and Chef’d should be doing something else to offer a better experience for its potential
customers.
Task 4: Assume/pretend that it is Monday at 3:30 p.m., and you plan to prepare the spicy
meal on Saturday night. Will the meal arrive in time? (5 days’ time)
Summary for Both Testers:
Tester 1 Tester 2 Average
Average Satisfaction 2 3 2.5
Success Rate 100% 100% 100%
Highlights:
1) Testers were unsure where to find delivery information.
2) After finding delivery information, testers were confused as to what their shipping
options were.
3) Testers were unsure why they had to put in their postal code before they could select
a delivery date. They wondered if the delivery date varied based on location.
Johnson 20
Biggest Problem:
The first highlight, testers being unsure where to find delivery information, was the
biggest problem for this task. When this task was read to Kalleigh, she had to sit and think about
what to do. This was different from previous tasks because typically, she would immediately
start interacting with the site. After thinking on it, she decided to go to the search bar. She typed
“shipping” in the box and hit enter. She got no results and wondered what to do next. Kalleigh
decided she wanted to try to get back to the home page. Since she had just skimmed over it in her
initial site thoughts, she thought that she might have skipped over some shipping information on
that page. However, Kalleigh could not figure out how to get back to the home page. There was
not a “Home” on the navigation, so she gave up on this idea quickly. She went back to her cart to
look over her meal plan again and hit “Checkout”. She was then asked to put in her zip code for
a delivery date. She did this and found that the soonest it could be delivered was March 7, just
over a week from when she would have ordered it. So, this was not quick enough to meet the
needs of the task. The shipping information was not where she expected it to be, which is why it
took her so long to find it. Throughout multiple tasks, Kalleigh used the search bar in hopes that
it would help her find the information she needed. However, the search bar never returned any
results for her. This was a difficult task for Kalleigh to complete because she was unsure where
to start. Even though she did complete it, she was still left unsatisfied.
This task was the most challenging for Bruce when compared to the other three. He
started this task by scrolling up and down on Spoon University’s page. After finding nothing, he
hovered over each navigation tab to see if anything would relate to delivery. Nothing seemed
fitting, so he went to a secondary navigation bar in the top left corner of the page. He clicked on
“How it Works,” expecting to get some more information on delivery. Bruce did not think this
Johnson 21
page was helpful at all. So, he turned to the search bar. He searched one of the meals in his cart
to try and find some delivery information on an individual meal. His meal, “Black Bean Chicken
Brown Rice Bowl,” did not pop up. He said aloud, “Am I in the wrong spot?” Bruce was very
confused at this point and tried to think of other places he could look. He then remembered that
he had not looked at the footer yet, so he scrolled down to that section of the page. He clicked on
“FAQ,” and looked through the page. He noticed there was a shipping & delivery section, so he
clicked on “When will my Chef’d box get delivered?” The answer told him that it would be
between 8am to 8pm. This was not the information he was looking for, so he chose another
question instead. This question was “What are your delivery date options?” The answer told him
to look at the cart page for specific delivery date options. So, he clicked the Chef’d logo,
thinking this would take him back to the home page. Instead, he was taken to the home page of
the FAQ website. Without knowing it, he had gone to a separate site designated for Frequently
Asked Questions. In order to get back to his cart, he had to type chefd.com in his browser. He
then clicked on his cart, hit “Checkout”, and put in his shipping zip code. He noticed that the
soonest his food could be delivered was Wednesday, March 7, which was a week from the day
he would have ordered it. This was not quick enough to meet the needs of this task. After
completing this task, he turned to me and said, “That was WAY too hard.” From the beginning,
Bruce was unsure what steps to take to find the right information to complete this task. The FAQ
eventually lead him to the right answer, but it took a lot of thinking/processing on Bruce’s end to
reach that point.
Alignment to Heuristic: Consistency and standards
This heuristic matches my biggest problem because the testers were unsure where to find
shipping information. In addition, even when they did find this information, it did not seem to
Johnson 22
make much sense. Consistency and standards as a heuristic means that something seems familiar
and makes sense to the user. When creating a website, it is important for the company to think
about where users expect things to be. So in this instance, Kalleigh expected to find shipping
information by using the search bar. However, the search bar did not return any results for her.
Many users expect to find what they are looking for through the search bar because they use
some sort of search bar every day. Users like consistency, and since Chef’d’s search bar did not
return results, this was inconsistent from what Kalleigh normally experiences. In Bruce’s case,
he expected to find his answers through the Frequently Answered Questions page. It still took a
couple of tries to find his answer, and when he did, it still required more effort on his part to find
what he was looking for. After going to his cart and finding the delivery dates, it still did not
make sense to him why this information was only available at the end of the ordering process.
Many people, like himself, want to know when the product will be delivered prior to adding it to
their cart. Both Bruce and Kalleigh thought the cart was a fine place to put the shipping/delivery
information, but they thought it would make more sense if the information was also available in
other spots on chefd.com.
Final Site Thoughts:
After completing these tasks and digging deeper into the site, some of Kalleigh’s
thoughts had changed, while others remained the same. She still thought the site was very
visually appealing. All of the photos used were of high quality and the layout of the pages was
organized. She liked the colors used and thought that the site looked professional. However, she
did not think the site was as easy to use as she thought it would be. Kalleigh thought ordering
meals was more difficult than it should have been. She thought the information throughout the
Johnson 23
site was not always helpful. For example, the instructions for making the meal plan were not
clear and caused her to be confused. She also did not like the “How it Works” section. She
expected this section to give a clear understanding of what Chef’d does as a company. The text
descriptions throughout the site were short and did not provide her with enough information. The
last thing she mentioned to me was that the navigation was bad between pages and it was easy to
get frustrated. Anytime she hit the back arrow, as mentioned before, she had to start over her
meal plan. To her, this alone did not make the site seem user-friendly.
Bruce also had some thoughts that remained the same and others that changed. He
thought the site overall was still nice and fairly organized. He liked the style of the site and the
way the information was presented. However, he felt that the site was missing a lot of
information. For example, when he was trying to complete tasks, there was little information on,
how to create a meal plan and how to find delivery information. Bruce also mentioned that some
pages, like the home page, required a lot of scrolling to get to the bottom of the page. Something
else that frustrated Bruce throughout this process was the slow load time and glitches that
happened more than once. He told me that “if anything breaks, there is no way to get out”. That
directly aligns with one of the heuristics and big problems I talked about earlier, which I thought
was interesting. Even after using the site for only 30 minutes, he still knew that this was a
problem and something that needed fixed. If this issue was fixed, it would better his experience
on the site.
Both Kalleigh and Bruce had positive and negative things to say about chefd.com after
going through their usability tests. It is clear that both testers liked the design and layout of the
site, but found many problems regarding the information on the site. Both users experienced
Johnson 24
confusion throughout the testing and did not know what to do. In the end, they both wanted more
information available on the site so they could find what they were looking for.
Recommendations to improve user experience
Single problem being fixed:
Task 3: Testers were both surprised and annoyed that they had to go to each individual
product page to find the nutrition facts for each meal.
Problem Improvement:
Added some filters so
users can only have
items in their meal kit
that meet their needs.
Figure 1 Overall Filter Change
Johnson 25
Figure 3 Other Added Filters
Figure 2 Nutrition Fact Filter
Johnson 26
Figure 5 Spoon University Plan After
Above are the wireframes and screenshots that I created to improve Task 3’s big
problem, which involved Spoon University’s Meal Plan. Since testers were annoyed that they
had to go to every product page to find nutritional information, I thought it would be beneficial
to put this information in a filter that could be utilized when users first discover what is in their
meal kit. Having filters gives the user the option to update the items in their kit based on certain
Figure 4 Spoon University Plan Before
Nutrition Facts Difficulty Time Spiciness Ingredients
Meals
Johnson 27
characteristics. However, if they are happy with the meals chosen, they do not have to use any
filters and can continue to the checkout. I chose to put the filters on this page instead of Spoon
University’s landing page because in order to even create a Spoon University meal plan, one
must answer some questions, which already filters each person’s meal kit based on their answers.
Those questions are what allergies a consumer has, what proteins he/she prefers, and how many
meals he/she wants in the meal kit. I believe these questions are necessary for everyone to
answer because they are the foundation of the meal plan. However, many people may have
additional preferences for their meal plan, an example being Task 3 of this assignment.
Currently, the only way to know if a product has less than 450 calories is to go to every product
page and check the nutritional information, as I mentioned earlier. Adding a filter for nutrition
facts allows people to select their personal preferences for these facts. My idea is that once a
filter is selected, the page will automatically update and replace the meals/grab n’ go’s/snacks
that do not meet the requirement of that filter with something that does. For example, if I wanted
my meal plan to only include items under 300 calories with 10 grams of fat or less, I would
select the 200-300 calories box and the 5-10 grams of fat box under the Nutrition Facts filter. It
would result in the screenshot below, because all three meals meet the requirements of both
items in that filter.
Nutrition Facts (2) Difficulty Time Spiciness Ingredients
Meals
Indicates that two items
are selected in the filter
All three meals changed
from previous screenshot
because of the filter
Johnson 28
Having this Nutrition Fact filter eliminates the repetitive task of going to every product
page to find nutritional information that fits a specific need. In the wireframes above (page 25), I
chose to use calories, fat, and protein as the categories underneath the Nutrition Facts filter. I
chose these because I believe these are the facts that the majority of people care about/ pay the
most attention to. Personally, when I am looking for something to eat, I look at the calories first,
fat second, and protein third. Chef’d could add more categories, such as sodium or cholesterol, if
they felt it was necessary. However, I thought these three categories were enough. When reading
about filters on Baymard, the article warned designers to not over-categorize filters (Holst). This
is another reason that I chose to stick with just three. Since Chef’d does not currently have any
filters for nutrition facts, I thought three would be a good start.
Within the Nutrition Fact filter, one will notice that I had to choose ranges for calories,
fat, and protein. I did not just choose random numbers when creating these ranges. I went to the
product page of every meal and grab n’ go, and then wrote down the amount of calories, fat, and
protein in each. After writing these numbers down in a notebook, I wanted to figure out a way to
organize them that would be consistent with what users would be likely to see on other websites.
Amazon is a site that filters its food offerings by nutritional information, so I looked at their site
for reference. I noticed that they used large ranges for calories and smaller ranges for fat and
protein, so I followed these guidelines when creating my own ranges. After finalizing the
Nutrition Facts filter, I thought it would be beneficial to add some other filters as well.
In the same wireframes/screenshots, I also created four other filters for this page. I
decided to add other filters that I felt would create an even better user experience. Difficulty,
time, spiciness, and ingredients were all items that can be found on each individual product page.
Placing these items into filters gives the users other ways to adapt their meal plan. I came to the
Johnson 29
conclusion that if users got tired of going to each individual product page to find Nutrition Facts,
then they would probably also get tired of going to those pages to find things such as difficulty,
time, spiciness, and ingredients. However, if I were Spoon University, I would create filters for
all of these, but still keep this information on each product page so it is still available to the user.
For example, if a user wants to know a piece of information about one item without having to
change his/her meal plan, it is still beneficial to have characteristics about each product on its
individual page. When creating the different options within these filters, I once again looked at
every product page to find what ranges existed within Spoon University’s meal plan. Difficulty,
spiciness, and time each only had 2-3 options to begin with, so each of those became an option in
the filter. For ingredients, I found the six most common ingredients across the meal offerings and
put those as the options within that filter.
Lastly, I want to discuss why I chose to do a horizontal filter bar as opposed to a vertical
one in a sidebar. When reading articles about filters from Baymard, they let me know that
horizontal filter bars can be beneficial when only a few filters are present. This is because limited
space is available when using a horizontal bar and it is not suggested to squeeze a lot of filters in
this small amount of space (Holst). I knew that I only wanted to add a few filters, so that is one
reason I went with this type of bar. Another reason I chose this bar is because, according to
Baymard, many people overlook the sidebar area of a site, which is where many filter bars
appear (Holst). Having a horizontal bar towards the top of the screen grabs the attention of the
user and lets them know that this bar is something they can use. If filters are there and no one
sees or uses them, they have no purpose. Once again, the big problem in Task 3 was that users
were annoyed going back and forth between pages to find nutritional information. I created
Johnson 30
filters to try and fix this problem. However, if the filters are created and never seen, the problem
still exists.
Johnson 31
Works Cited
Holst, Christian. Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar.
Baymard, 5 May 2015, https://baymard.com/blog/horizontal-filtering-sorting-design.
Accessed 8 March 2018.

More Related Content

What's hot (6)

Usability test for chef
Usability test for chefUsability test for chef
Usability test for chef
 
Usability Test Research
Usability Test ResearchUsability Test Research
Usability Test Research
 
11 Ways to Start a Healthier Lifestyle Now
11 Ways to Start a Healthier Lifestyle Now11 Ways to Start a Healthier Lifestyle Now
11 Ways to Start a Healthier Lifestyle Now
 
Speech new
Speech newSpeech new
Speech new
 
Reflective Letter
Reflective LetterReflective Letter
Reflective Letter
 
Tips/Testimony LET
Tips/Testimony LETTips/Testimony LET
Tips/Testimony LET
 

Similar to Usability analysis based on field testing

User Experience Assignment
User Experience AssignmentUser Experience Assignment
User Experience AssignmentTaya Downs
 
Usabilitytestforchefd zoe green
Usabilitytestforchefd zoe greenUsabilitytestforchefd zoe green
Usabilitytestforchefd zoe greenZoeGreen10
 
Usability Test Sun Basket Kauzlarich
Usability Test Sun Basket KauzlarichUsability Test Sun Basket Kauzlarich
Usability Test Sun Basket KauzlarichJenna Kauzlarich
 
Usability Experience Testing for Chefd.com class paper
Usability Experience Testing for Chefd.com class paperUsability Experience Testing for Chefd.com class paper
Usability Experience Testing for Chefd.com class paperDom Thomas
 
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.comCory Finch
 
Usability Test for SunBasket.com
Usability Test for SunBasket.comUsability Test for SunBasket.com
Usability Test for SunBasket.comCarlyHostetter
 
Bates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.comBates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.comRileighBates
 
Letter to the judges
Letter to the judgesLetter to the judges
Letter to the judgesjfahrnbauer
 
1CRT205 What is Critical ThinkingCRT205.docx
1CRT205 What is Critical ThinkingCRT205.docx1CRT205 What is Critical ThinkingCRT205.docx
1CRT205 What is Critical ThinkingCRT205.docxhyacinthshackley2629
 
How to lose weight with keto and intermittent fasting
How to lose weight with keto and intermittent fastingHow to lose weight with keto and intermittent fasting
How to lose weight with keto and intermittent fastingPurveshDesai
 
FSHN 360 diet assessment part 1
FSHN 360 diet assessment part 1FSHN 360 diet assessment part 1
FSHN 360 diet assessment part 1Anya Guy
 
HOW TO LIVE YOUR BEST LIFE?
HOW TO LIVE YOUR BEST LIFE?HOW TO LIVE YOUR BEST LIFE?
HOW TO LIVE YOUR BEST LIFE?danyar menmi
 
Speech essay lifestyle makeover
Speech essay lifestyle makeoverSpeech essay lifestyle makeover
Speech essay lifestyle makeoveralexisgsmith
 
Senior project speech final
Senior project speech finalSenior project speech final
Senior project speech finalzimmerman681
 

Similar to Usability analysis based on field testing (20)

User Experience Assignment
User Experience AssignmentUser Experience Assignment
User Experience Assignment
 
Usabilitytestforchefd zoe green
Usabilitytestforchefd zoe greenUsabilitytestforchefd zoe green
Usabilitytestforchefd zoe green
 
Usability Test Sun Basket Kauzlarich
Usability Test Sun Basket KauzlarichUsability Test Sun Basket Kauzlarich
Usability Test Sun Basket Kauzlarich
 
Usability for chefd
Usability for chefdUsability for chefd
Usability for chefd
 
Usability Experience Testing for Chefd.com class paper
Usability Experience Testing for Chefd.com class paperUsability Experience Testing for Chefd.com class paper
Usability Experience Testing for Chefd.com class paper
 
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
 
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
 
Bates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.comBates Usability Test for SunbBsket.com
Bates Usability Test for SunbBsket.com
 
Letter to the judges
Letter to the judgesLetter to the judges
Letter to the judges
 
1CRT205 What is Critical ThinkingCRT205.docx
1CRT205 What is Critical ThinkingCRT205.docx1CRT205 What is Critical ThinkingCRT205.docx
1CRT205 What is Critical ThinkingCRT205.docx
 
Final Pp
Final PpFinal Pp
Final Pp
 
Final PP
Final PPFinal PP
Final PP
 
How to lose weight with keto and intermittent fasting
How to lose weight with keto and intermittent fastingHow to lose weight with keto and intermittent fasting
How to lose weight with keto and intermittent fasting
 
A Friend Essay
A Friend EssayA Friend Essay
A Friend Essay
 
FSHN 360 diet assessment part 1
FSHN 360 diet assessment part 1FSHN 360 diet assessment part 1
FSHN 360 diet assessment part 1
 
HOW TO LIVE YOUR BEST LIFE?
HOW TO LIVE YOUR BEST LIFE?HOW TO LIVE YOUR BEST LIFE?
HOW TO LIVE YOUR BEST LIFE?
 
Speech essay lifestyle makeover
Speech essay lifestyle makeoverSpeech essay lifestyle makeover
Speech essay lifestyle makeover
 
Senior project speech final
Senior project speech finalSenior project speech final
Senior project speech final
 
00015218 revised 1
00015218 revised 100015218 revised 1
00015218 revised 1
 

More from Taylor Johnson

Analysis of user experience
Analysis of user experienceAnalysis of user experience
Analysis of user experienceTaylor Johnson
 
Social media campaign strategy
Social media campaign strategy Social media campaign strategy
Social media campaign strategy Taylor Johnson
 
SEO Analysis for Chef'd
SEO Analysis for Chef'dSEO Analysis for Chef'd
SEO Analysis for Chef'dTaylor Johnson
 
Final popularity & traffic analysis
Final popularity & traffic analysisFinal popularity & traffic analysis
Final popularity & traffic analysisTaylor Johnson
 

More from Taylor Johnson (6)

Analysis of user experience
Analysis of user experienceAnalysis of user experience
Analysis of user experience
 
Career goals
Career goalsCareer goals
Career goals
 
Personal philosophy
Personal philosophyPersonal philosophy
Personal philosophy
 
Social media campaign strategy
Social media campaign strategy Social media campaign strategy
Social media campaign strategy
 
SEO Analysis for Chef'd
SEO Analysis for Chef'dSEO Analysis for Chef'd
SEO Analysis for Chef'd
 
Final popularity & traffic analysis
Final popularity & traffic analysisFinal popularity & traffic analysis
Final popularity & traffic analysis
 

Recently uploaded

VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...
VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...
VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...Suhani Kapoor
 
20240419 - Measurecamp Amsterdam - SAM.pdf
20240419 - Measurecamp Amsterdam - SAM.pdf20240419 - Measurecamp Amsterdam - SAM.pdf
20240419 - Measurecamp Amsterdam - SAM.pdfHuman37
 
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130Suhani Kapoor
 
Beautiful Sapna Vip Call Girls Hauz Khas 9711199012 Call /Whatsapps
Beautiful Sapna Vip  Call Girls Hauz Khas 9711199012 Call /WhatsappsBeautiful Sapna Vip  Call Girls Hauz Khas 9711199012 Call /Whatsapps
Beautiful Sapna Vip Call Girls Hauz Khas 9711199012 Call /Whatsappssapnasaifi408
 
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改atducpo
 
100-Concepts-of-AI by Anupama Kate .pptx
100-Concepts-of-AI by Anupama Kate .pptx100-Concepts-of-AI by Anupama Kate .pptx
100-Concepts-of-AI by Anupama Kate .pptxAnupama Kate
 
RadioAdProWritingCinderellabyButleri.pdf
RadioAdProWritingCinderellabyButleri.pdfRadioAdProWritingCinderellabyButleri.pdf
RadioAdProWritingCinderellabyButleri.pdfgstagge
 
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...Jack DiGiovanna
 
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...Sapana Sha
 
Data Warehouse , Data Cube Computation
Data Warehouse   , Data Cube ComputationData Warehouse   , Data Cube Computation
Data Warehouse , Data Cube Computationsit20ad004
 
Spark3's new memory model/management
Spark3's new memory model/managementSpark3's new memory model/management
Spark3's new memory model/managementakshesh doshi
 
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...Suhani Kapoor
 
Dubai Call Girls Wifey O52&786472 Call Girls Dubai
Dubai Call Girls Wifey O52&786472 Call Girls DubaiDubai Call Girls Wifey O52&786472 Call Girls Dubai
Dubai Call Girls Wifey O52&786472 Call Girls Dubaihf8803863
 
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.ppt
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.pptdokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.ppt
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.pptSonatrach
 
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service Amravati
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service AmravatiVIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service Amravati
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service AmravatiSuhani Kapoor
 
From idea to production in a day – Leveraging Azure ML and Streamlit to build...
From idea to production in a day – Leveraging Azure ML and Streamlit to build...From idea to production in a day – Leveraging Azure ML and Streamlit to build...
From idea to production in a day – Leveraging Azure ML and Streamlit to build...Florian Roscheck
 
Data Science Project: Advancements in Fetal Health Classification
Data Science Project: Advancements in Fetal Health ClassificationData Science Project: Advancements in Fetal Health Classification
Data Science Project: Advancements in Fetal Health ClassificationBoston Institute of Analytics
 

Recently uploaded (20)

VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...
VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...
VIP High Class Call Girls Jamshedpur Anushka 8250192130 Independent Escort Se...
 
20240419 - Measurecamp Amsterdam - SAM.pdf
20240419 - Measurecamp Amsterdam - SAM.pdf20240419 - Measurecamp Amsterdam - SAM.pdf
20240419 - Measurecamp Amsterdam - SAM.pdf
 
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130
VIP Call Girls Service Miyapur Hyderabad Call +91-8250192130
 
Russian Call Girls Dwarka Sector 15 💓 Delhi 9999965857 @Sabina Modi VVIP MODE...
Russian Call Girls Dwarka Sector 15 💓 Delhi 9999965857 @Sabina Modi VVIP MODE...Russian Call Girls Dwarka Sector 15 💓 Delhi 9999965857 @Sabina Modi VVIP MODE...
Russian Call Girls Dwarka Sector 15 💓 Delhi 9999965857 @Sabina Modi VVIP MODE...
 
꧁❤ Aerocity Call Girls Service Aerocity Delhi ❤꧂ 9999965857 ☎️ Hard And Sexy ...
꧁❤ Aerocity Call Girls Service Aerocity Delhi ❤꧂ 9999965857 ☎️ Hard And Sexy ...꧁❤ Aerocity Call Girls Service Aerocity Delhi ❤꧂ 9999965857 ☎️ Hard And Sexy ...
꧁❤ Aerocity Call Girls Service Aerocity Delhi ❤꧂ 9999965857 ☎️ Hard And Sexy ...
 
Beautiful Sapna Vip Call Girls Hauz Khas 9711199012 Call /Whatsapps
Beautiful Sapna Vip  Call Girls Hauz Khas 9711199012 Call /WhatsappsBeautiful Sapna Vip  Call Girls Hauz Khas 9711199012 Call /Whatsapps
Beautiful Sapna Vip Call Girls Hauz Khas 9711199012 Call /Whatsapps
 
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改
代办国外大学文凭《原版美国UCLA文凭证书》加州大学洛杉矶分校毕业证制作成绩单修改
 
100-Concepts-of-AI by Anupama Kate .pptx
100-Concepts-of-AI by Anupama Kate .pptx100-Concepts-of-AI by Anupama Kate .pptx
100-Concepts-of-AI by Anupama Kate .pptx
 
RadioAdProWritingCinderellabyButleri.pdf
RadioAdProWritingCinderellabyButleri.pdfRadioAdProWritingCinderellabyButleri.pdf
RadioAdProWritingCinderellabyButleri.pdf
 
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...
Building on a FAIRly Strong Foundation to Connect Academic Research to Transl...
 
Delhi 99530 vip 56974 Genuine Escort Service Call Girls in Kishangarh
Delhi 99530 vip 56974 Genuine Escort Service Call Girls in  KishangarhDelhi 99530 vip 56974 Genuine Escort Service Call Girls in  Kishangarh
Delhi 99530 vip 56974 Genuine Escort Service Call Girls in Kishangarh
 
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...
Saket, (-DELHI )+91-9654467111-(=)CHEAP Call Girls in Escorts Service Saket C...
 
Data Warehouse , Data Cube Computation
Data Warehouse   , Data Cube ComputationData Warehouse   , Data Cube Computation
Data Warehouse , Data Cube Computation
 
Spark3's new memory model/management
Spark3's new memory model/managementSpark3's new memory model/management
Spark3's new memory model/management
 
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...
VIP High Profile Call Girls Amravati Aarushi 8250192130 Independent Escort Se...
 
Dubai Call Girls Wifey O52&786472 Call Girls Dubai
Dubai Call Girls Wifey O52&786472 Call Girls DubaiDubai Call Girls Wifey O52&786472 Call Girls Dubai
Dubai Call Girls Wifey O52&786472 Call Girls Dubai
 
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.ppt
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.pptdokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.ppt
dokumen.tips_chapter-4-transient-heat-conduction-mehmet-kanoglu.ppt
 
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service Amravati
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service AmravatiVIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service Amravati
VIP Call Girls in Amravati Aarohi 8250192130 Independent Escort Service Amravati
 
From idea to production in a day – Leveraging Azure ML and Streamlit to build...
From idea to production in a day – Leveraging Azure ML and Streamlit to build...From idea to production in a day – Leveraging Azure ML and Streamlit to build...
From idea to production in a day – Leveraging Azure ML and Streamlit to build...
 
Data Science Project: Advancements in Fetal Health Classification
Data Science Project: Advancements in Fetal Health ClassificationData Science Project: Advancements in Fetal Health Classification
Data Science Project: Advancements in Fetal Health Classification
 

Usability analysis based on field testing

  • 1. Johnson 1 Taylor Johnson Professor Lamer Intro to Web Publishing 8 March 2018 Usability Test for Chefd.com Test Preparation I prepared to conduct two usability tests on chefd.com by first familiarizing myself with what a usability test was and how it should be conducted. The lectures in class helped me know what the test was, but it was not until I watched Steve Krug’s Usability Demo that I could fully understand and visualize the individual steps of a usability test. This video not only gave me an idea of how much information I should collect during each task, but it made me realize the importance of getting the user to talk out loud throughout the duration of the test. In the demo video, the user says things like “I am going to scroll down” or “I am clicking on ____”. Even though these seemed like small details, I believe doing this forces the user to think about the steps he/she takes before taking them. It also allows the conductor to not only see, but hear, what the user is doing. After watching this video, I also looked at “Things a Therapist Would Say” so I would know how to respond to the user if questions arose. It also let me know that it may be beneficial to paraphrase what the user said or ask questions for clarification in order to fully understand what the user means. All of this information helped me prior to conducting usability tests. However, before conducting the tests on two users, I completed the tasks myself and noted the problems and difficulties I encountered. The first task was to create a Spoon University meal plan and determine the total weekly cost. Since I was already very familiar with this site, I easily found this meal plan under the meal
  • 2. Johnson 2 plan tab. I created my meal plan, which was a quick and easy process. However, I did discover some problems when completing this task. One of these problems was that after selecting the proteins for my meal plan and clicking “Next,” I had to scroll back up to select how many meals I wanted in my Spoon U Box. This is a small detail, but not being able to see that next step without scrolling up is still a usability issue. It could confuse the user or annoy him/her since it takes extra unnecessary time. Without scrolling up, I could only see a white screen with another “Next” button. Clicking this button means that the user has unknowingly skipped a step, selecting 0 meals for his/her Spoon U Box. In my case, I knew to scroll up and select the number of meals I wanted in my box, but I could see this causing an issue for other users. After creating my meal plan, I scrolled down to see that my total cost would be $62. The next task was to determine my spicy meal options and choose a meal I was willing to prepare. I clicked on a meal, Chili Mac and Cheese, and found its spiciness to be mild. To me, mild did not seem like a “spicy meal option,” so I continued to click on different meals, looking at how spicy each one was. One problem I had with this process was that it took a long time to close out each meal and click on another one just to find the level of spiciness. So, I thought I would search “spicy” in the search bar to get quicker results. However, the list of meals I got were not from Spoon University’s Meal Plan so I instead searched “Spoon University Spicy Meals” in hopes of getting a list of specific meals. However, I got no results, so I had no option but to go back to Spoon University’s page and continue looking through each product page. After looking through each meal, I found mild to be the spiciest option for this meal plan. As a user, it made me wonder if Chef’d considers “mild” to be spicy. Since mild was the spiciest option, I chose the Chicken Quesadilla as the meal I was willing to prepare for this task.
  • 3. Johnson 3 The third task was to ensure none of my meals, “Grab n’ Go’s” or snacks were more than 450 calories per serving. If the calorie count was too high, I needed to swap the item for another. After choosing the Chicken Quesadilla as my meal, I hit the back arrow by accident instead of closing out of the current meal. I discovered that doing this made me start over in creating my meal plan, which was an annoyance to me. I went through the whole process again and made sure to add the plan to my cart, hoping that doing this would prevent me from losing my selections if I happened to hit the back arrow again. I then went through my meal plan and clicked on each meal, “Grab n’ Go” and snack to find the nutritional information. This information was easy to find, but I did have to go to each product page to find the information, just like in the previous task. I only found three Grab n’ Go’s to have over 450 calories, so I swapped those out for other options. I found the process of swapping meals/Grab n’ Go’s to be easy because I had experimented with this in the last assignment. However, one thing I did notice was that no nutritional information was given for the fruit/snacks. I just assumed that the fruit and healthy snacks included in the meal plan would be under 450 calories. The last task was to figure out if the spicy meal I ordered would arrive by Saturday if it was a Monday at 3:30 p.m. When reading this task, I thought it would be easiest to search “shipping” to find the range of time it would take for Chef’d to prepare and deliver my meal plan. However, after putting this keyword in the search bar, I got no results. So, I decided to enter the same keyword in the help box in the bottom corner. A list of nine results popped up, and I clicked on “How do I set up delivery? What if I have special driver instructions?” The answer told me to look in the “Your Cart” page for delivery information. After going to my cart and putting in my zip code, it told me that the soonest delivery date would be March 6, which was a week and a day from the date I took this test. Therefore, the meal would not arrive in time
  • 4. Johnson 4 because Monday and Saturday are only 5 days apart. Completing these tasks before testing my users gave me an idea of what to expect and look for when conducting the tests. It also allowed for me to make connections between the problems of myself and other testers throughout the duration of the assignment. Knowing that I was familiar with the site beforehand and still experienced some of the same problems meant that there were usability issues for every user, not just newly exposed ones. Choosing Participants Tester 1: Kalleigh Tharp My first tester is a 19-year-old female who is a sophomore at Northwest Missouri State University. Kalleigh is a full-time student studying Agriculture Business/Agronomy, and she is involved in multiple on campus organizations, such as the Northwest Missouri State University Collegiate Farm Bureau Chapter and the Baptist Student Union. She considers school and these organizations to be her current occupation because this is where she dedicates the majority of her time. In her free time, Kalleigh enjoys going to the gym and making new recipes she finds off Pinterest. Being interested in Agriculture, Kalleigh made sure to mention that her major does influence what she eats and that she prefers to buys local or homegrown products when available. Kalleigh spends about 10 hours a week on the Internet, 7 of those hours being dedicated to school and the other 3 dedicated to personal use at home. For her split between social media and browsing, she said about 20% of her time is spent on social media, with the other 80% going to browsing. Within social media, she spends about 50% of that time on Pinterest because it is one of her favorite sites to spend time on. Kalleigh considers herself a high-experience user of the Internet because Internet is something that she has used since 3rd grade and she continues to use it more and more as she gets older. As years pass, she expects her
  • 5. Johnson 5 experience on the Internet to get even better. When asked about Chef’d, Kalleigh had never heard of the brand but was aware of what pre-portioned meal kits were. She has never shopped for food online before, but knows that it is offered. Kalleigh is a reasonable tester for this assignment because she is a college student, cares about what she eats, and was willing to participate. Since Spoon University’s Meal Plan is for college students, it was important to get a college student to complete the test since this is the audience being targeted. In addition, since Chef’d as a whole focuses on healthy meal kits with fresh ingredients, I thought Kalleigh would relate to this specific company since she is involved and invested in Agriculture. Lastly, before we began the testing, I made sure she was willing to take her time and speak out loud when completing the tasks so I could gather as much information as possible. I also chose Kalleigh because she is different from me. I know her from the Baptist Student Union and we are friends, but not best friends. She also lives a very different lifestyle than me because she is so interested in Agriculture, so I thought she would be a good candidate for this assignment. Since she had never heard of Chef’d, I also knew she would be a new user to the site, which is another important aspect of this assignment. Environment for Tester 1  Location of test: This test was conducted in the Starbucks area on the first floor of the B.D. Owens Library. We sat at a round table against the wall, which was next to a window. I made sure to ask her where she wanted to conduct the test beforehand so we could go to a location where she was most comfortable. Since she takes all her classes on campus, she mentioned that she tends to spend the time in-between classes at the library. Kalleigh normally does her homework on the first floor and even though noise is around, she says that she can
  • 6. Johnson 6 focus and get assignments done in this spot. Since this assignment required focus, she thought it would be most beneficial to conduct the test on the first floor.  Physical Environment: As I mentioned, Kalleigh and I sat at a table that was right by a window. The Starbuck’s area of the library is very dim, but sitting by the window allowed for some natural light to come in. It was 4:30 p.m., so the sun was starting to set when we began the test. It was very loud in the Starbuck’s area at first, but as time went on, people began to leave the library and it got much quieter. We sat in chairs that had back support and not a lot of cushioning. Kalleigh sat with her feet flat on the floor throughout the duration of the test. The main distractions in the room were noises made by people. Others talking, Starbuck’s machines, and a heater were the main surrounding noises. Kalleigh had her phone put away, so that was not an object of distraction for her.  Technical Environment: Kalleigh used her school laptop for this test, which is a silver Hewlett-Packard (HP) Elitebook. She was connected to the Northwest Secure Wi-Fi and used Google Chrome as her browser. She did not have any plug-ins on her screen, so Chef’d’s website appeared as it would on a normal laptop screen. She did have other tabs open on Google Chrome, which could have affected some of the speed issues, which I will discuss later. Tester 2: Bruce Dewitt My second tester is a 21-year-old male who is a freshman graduate student at Northwest Missouri State University. Bruce is a Geographic Information Systems major and is involved in organizations both on and off campus. He is a member at the Baptist Student Union, is in the choir at Laura Street Baptist Church, and leads a 6th grade youth group at his church as well. He has a full-time job at Midland GIS Solutions in Maryville, MO, but he considers being a student his occupation as well. He does not have much free time, so he prepares meals that are quick and
  • 7. Johnson 7 easy. Bruce cares about what he eats and tries to keep a healthy balance between different food groups. Bruce spends about 50 hours a week on the internet, 40 of those coming from work, since his job requires constant use of the Internet. The remaining 10 hours are for personal use at home. He hardly spends any time on social media, so his split between social media and browsing is about 10% and 90%. Bruce considers himself to be a high-experience user of the Internet because since his job forces him to use the Internet all day, it has become an important part of his life. His occupation interests him; therefore, the Internet interests him as well. When asked about Chef’d, Bruce had never heard of this brand, but he was aware of what pre-portioned meal kits were. He does the majority of his shopping in-stores, so he has never purchased food online before. However, he was aware that these types of companies existed and that buying food online is an option. Bruce was a reasonable tester for this assignment because he is a college student, watches what food he consumes, and was willing to take time out of his day to help me. Like I mentioned before with Kalleigh, Spoon University offers a meal plan that is targeted towards college students, so that was the first necessity when looking for a tester. Bruce is also aware of the food he eats and tries to eat as healthy as he can with his busy schedule. He also knew that this usability test would take active participation on his part so that I could get as much useful information from him as possible. I also chose Bruce because I wanted to have a tester that was not only different from me, but the other tester I chose as well. Both Bruce and Kalleigh have different characteristics, such as gender, age, and Internet exposure. Having two different genders complete the tests can be beneficial because they might have different perspectives and frustrations when it comes to chefd.com. In addition, while Bruce is only 2 years older than Kalleigh, those two years can mean a lot since he is farther along in his schooling and has more
  • 8. Johnson 8 experience with technology. Lastly, Bruce appears to be exposed to the Internet 5 times more than Kalleigh on a weekly basis. I thought it was important to find two users that differed when it came to Internet exposure in order to see if they still had some of the same problems, or if one user discovered more problems than the other. Since both of these people met the requirements to be considered “reasonable testers,” I was able to use them for the completion of this assignment. Environment for Tester 2  Location of test: This test was conducted at Bruce’s apartment, which is located at 316 East 4th Street in Maryville, Missouri. When I asked Bruce where he wanted to take the test, he said that he is most productive in his personal space, so he thought his apartment would be the best fit for this kind of test. Bruce does not spend a ton of time on campus, so he is used to completing his assignments at his apartment. He focuses the best in a quiet environment and since his roommate, Bob, is not around much, this is why he thinks he is able to get more accomplished in his home.  Physical Environment: Within Bruce’s apartment, the test was conducted in his living room on the couch. It was a very casual setting with artificial lights on in both the kitchen and living room, making the room well-lit. Since we sat on a couch with more cushioning, the seat was less supportive compared to the chairs I sat in when conducting Kalleigh’s test. Bruce sat with his feet crossed on the ground, without shoes. Overall, this environment was much less formal than the library. We started the test at 5:00 p.m. Two noise distractions were his laundry machine, which ran during the first half of the test, and his phone, which vibrated towards the beginning of the test.
  • 9. Johnson 9  Technical Environment: Bruce used his school laptop for his test as well. Again, the provided laptop from Northwest is a silver Hewlett-Packard (HP) Elitebook. He was connected to his personal Wi-Fi, from SuddenLink, and used Google Chrome as his browser. I noticed that he uses a dark theme on Google Chrome instead of the default light theme. With this change, the background color is black instead of white, and the text color is light instead of dark. I was not sure if this would affect the appearance of chefd.com, but it was interesting to note that he prefers a darker theme to a lighter one. Bruce also had some bookmarked pages on his screen like weather, maps, Gmail, and the Northwest homepage. Having these bookmarks made the screen a tiny bit smaller when compared to Kalleigh’s screen. He had no other tabs open prior to starting the test. Test Results Initial Site Thoughts Kalleigh’s first thought about chefd.com was that the layout, pictures, and colors were appealing to the eye. Just by scrolling through the home page, Kalleigh knew that the person who started this company cared about health friendly products. She also gathered that the meal kits offered would vary based on personal preferences and interests. Kalleigh noticed that there was a featured chef towards the bottom of the home page, so she wondered if this was the person who started this organization? Or if they involved in some other way? Overall, Kalleigh liked the look of the home page, but did not feel as though she could grasp a ton of useful information from it. Since the website seemed to be grouped in different sections, she also felt like she had to scroll for a while before reaching the bottom of the page. At first glance, Bruce noticed there was a slideshow at the top of the page. He told me that it had high-quality pictures, but other than that, it was “just a boring slideshow”. He said that
  • 10. Johnson 10 the text on the slides did not excite him or make him want to click for more information. When he read the text on the home page, Bruce felt like there was no clear indication of what Chef’d’s purpose was. He guessed that the company delivered pre-prepped meals to people, but he felt as if he should have been given a clear answer from the beginning. Another thing Bruce mentioned about the home page was that he did not like the way the navigation was set up. When he tried to scroll down on the home page, he accidentally brushed his cursor over a navigation item. When he did this, the dropdown menu took up over half of his screen and it was hard for him to get rid of it. He had to move his cursor to the bottom of the screen to get this menu to disappear, which slightly annoyed him. Kalleigh and Bruce did have some similar initial site thoughts as well. Both testers said that the pictures of the food/ meal plans on the site looked appealing. They both noticed that there was a video on the home page as well, but could not tell what the video would be about just based on its heading and cover photo. Kalleigh and Bruce also noticed that Chef’d as a company offers many types of meals, with most of those meals looking like healthy options. Both users hoped that the rest of the site would be as visually appealing as the home page. However, they felt the information given on the home page did not explain enough about Chef’d, so they hoped the other pages of the site would make them fully understand this company and what it offers. Task 1: Build a Spoon University meal plan and determine the total weekly cost. Summary for Both Testers: Tester 1 Tester 2 Average Average Satisfaction 3 4 3.5 Success Rate 100% 100% 100%
  • 11. Johnson 11 Highlights: 1) Testers were confused about the grey/orange buttons when creating their meal plan. Both testers were not sure if they were selecting or deselecting certain options when answering the questions. 2) Testers thought the dropdown menu was too sensitive because it would disappear if their cursor was not on the exact right area of the screen. This made it difficult for the user to click on the “Spoon University Meal Plan” link. 3) After completing the second step in creating a meal plan, users were unsure what to do when a blank white screen with a “Next” button appeared. Since the button was highlighted orange, users did not know if they were supposed to click the button or find another question to answer before clicking it. Biggest Problem: The biggest problem for this task was the first highlight I listed, when users were confused about the grey/orange buttons when creating their meal plan. When Kalleigh started creating her plan, she thought the process seemed straightforward and simple. When asked about her allergies, she clicked none. When she clicked “none,” the button turned from grey to orange. After selecting this answer, she clicked on the “next” button. The following step was to decide what proteins she wanted in her meal. All of the proteins were highlighted orange, but since she had selected her allergies in the previous question, she thought she was supposed to select her preferred proteins in this step. So, she clicked on beef, lamb, poultry, fish, pork, and shellfish, thinking she was selecting these proteins to be included in her meal kit. However, she was actually deselecting all of these options, turning the buttons grey. Vegetarian was now the only option that was still highlighted orange when she clicked “next”. The next screen was white with another “next” button, so she clicked on that to finish creating her meal plan. She then scrolled
  • 12. Johnson 12 down to discover she did not have any meals in her meal kit, so she scrolled up and discovered she skipped that step. She added 2 meals to her kit and realized that none of her meals had meat in them. She said, “I am confused as to why my meals don’t have meat in them. I selected every kind of protein besides Vegetarian”. Kalleigh was frustrated and confused, so she went back to look at the choices she made for her meal plan. After going through each step again, she realized that orange meant selected and grey meant deselected. She reselected the protein options she wanted and deselected vegetarian. Redoing this step took extra time and frustrated Kalleigh. Bruce was also confused about whether the buttons were selected or deselected when creating his meal plan. To start, he read the phrase “I’m allergic to” and immediately scrolled down to click “next,” because he has no allergies. The button was greyed out and he could not figure out why. He scrolled back up to discover that he had to click “none” to move on to the next step. When the next question asked him what proteins he liked in his meals, he looked over the options and clicked beef. After a couple of seconds, he realized that he had deselected beef since it turned grey. He reselected it and said, “Well, that is confusing”. Even though he caught his mistake before moving on to the next step, he still admitted that he was confused. He clicked “next” and was presented with a white screen and another “next” button, just as Kalleigh was. He was unsure of what to do, but noticed that his scroll bar was not at the top of the screen. He scrolled up to reveal another question, asking how many meals he wanted in his meal kit. He selected 1 meal and then clicked on the “next” button. He noted that this process was more confusing than it should have been, especially since there were only a few questions. Alignment to Heuristic: Recognition rather than recall This heuristic matches the biggest problem I observed for this task because users should know exactly what they need to do when creating a meal plan at Chef’d. Recognition rather than
  • 13. Johnson 13 recall is about having actions, options, and instructions available to the user if necessary in order to create a good user experience. The buttons/labels on the page should also be clear and easy to understand. For Chef’d, there were no instructions available when making the meal plan. After clicking “Start my Meal Plan,” the page just lists the first prompt, “I’m allergic to”. Even though this first task seemed straightforward, one of my users did not even realize that he had to select an option before clicking next. In addition, my users unknowingly deselected the proteins because there was no information even available to let them know that Chef’d had already selected all of the protein options. The inconsistency of buttons being selected or deselected across the questions made the buttons confusing. Users should not have to remember that orange means “selected” from the first question about allergies, just as this heuristic mentions. If a site offers good user experience, testers should know what to do. However, if they do not know what to do, resources should be available in order to help the tester understand what to do. If instructions or a little extra information would have been given throughout the process of making a meal plan, it could have eliminated some, if not all, the confusion felt by my users. 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 1 4 2.5 Success Rate 50% 100% 75%
  • 14. Johnson 14 Highlights: 1) Testers were frustrated when the page froze and they had to refresh/go back to the previous page. This not only took extra time, but forced them to recreate their meal plan every time the page reloaded. 2) Testers were surprised that they had to go to each individual product page to find how spicy the meal was. They were unsure if there was an easier way to find this information. 3) Testers were unsure if there was a difference between “mild” and “none” when talking about the spiciness of various meals. Biggest Problem: The biggest problem for this task was the first highlight I mentioned, which was when the refresh or back button was clicked, all the data entered in for the meal plan was lost. Both of my users clicked on one of those buttons while trying to complete the second task. Starting with Kalleigh, she clicked on one of her existing meals, “Chili Mac and Cheese,” to try and find if this meal was considered spicy or not. The meal was considered “mild,” so she hit the back arrow to look at the spiciness of her other meal choice in her meal plan. However, when she clicked the back arrow, she was taken all the way back to Spoon University’s landing page. She clicked on “Start My Meal Plan,” and realized that none of her data had been saved. So, she had make another meal plan, which took extra time. After finishing, she looked at another meal choice, “Black Bean Chicken Brown Rice Bowl”. This meal was still considered mild, so she began swapping her meals out, looking for a meal that would be spicier than mild. Since all of her data was lost when she clicked the back arrow, she discovered a small “x” in the top right corner that she had to click after looking at each product page. However, because she is so used to using the back arrow on a daily basis, she did click it another time when trying to complete this task. Even after hitting the forward arrow, she still had to recreate her plan yet another time. She told me
  • 15. Johnson 15 that this was a major pain and that she was very unsatisfied with this task for this reason. Kalleigh wanted to be able to go back and forth between product pages using what she was comfortable with- the back arrow. Since Kalleigh only noticed “mild” meals and did not notice that some were labeled “none,” I gave her a 50% success rate for this task. Bruce also had to recreate his meal plan throughout this task, due to a similar problem. Bruce only had 1 meal in his meal plan, so he added another meal to his plan and went to each product page, looking for how spicy each one was. His two initial meals, “Spicy Mac and Cheese” and “Smokey Buffalo Chicken Grilled Cheese,” were both mild. So, he hit “Swap Meal” and looked at all of his options. Just by looking at the other meals offered, he said, “None of these seem like they would be spicy.” But, he still went to every product page to look for the level of spiciness. When he clicked on “Spaghetti Carbonara,” he got a loading icon that would not go away. The product page did not load quickly, so Bruce decided to refresh the page. When he hit refresh, he was taken back to Spoon University’s landing page. Just like Kalleigh, he had to recreate his meal plan because all of his data was lost. He was annoyed by this, but figured starting over would maybe fix the problem. Bruce tried clicking on “Spaghetti Carbonara” again, only to have the same problem. He had to refresh the page and start over in creating his plan. He decided to forget about the spaghetti and continue looking at other meals. After looking through every meal, he noticed, unlike Kalleigh, that some of the meals had “none” for spiciness, while others had “mild.” So, he chose a mild option for his spicy meal to finish the task. At the end of the task, he said that he was annoyed and tired of making the same plan over and over. Alignment to Heuristic: User control and freedom This heuristic matches the biggest problem for this task because my users had no way to escape or undo the mistake they made. User control and freedom is typically when testers think
  • 16. Johnson 16 along the lines of, “Oops! Let me outta here!” If they think this while at a site, it is important to have a way to escape so their experience is not ruined. In Kalleigh’s case, hitting the back arrow and seeing Spoon University’s page was not what she expected. She instantly wanted to get back to the page she was just on, so she clicked the forward arrow, or “redo”. However, even when she did this, she still lost all of the data she had entered. Having to go through the whole process of making a meal plan again was not ideal and there was no way for her to undo the mistake she made. Chef’d needs to have a better support for undo and redo in order to save the data created when making a meal plan. For Bruce, when the product would not load, his only option was to refresh the page. There was no “emergency exit” to stop the product from loading, such as a clickable “x” in the corner. Refreshing the page led him to the same problem that Kalleigh had, having to recreate his meal plan. Since this happened multiple times, it impacted his experience in a negative way. If Chef’d had multiple ways to escape the page without refreshing it, this would give the user more control over his/her experience. 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: Highlights: 1) Testers were both surprised and annoyed that they had to go to each individual product page to find the nutrition facts for each meal. They were unsure if there was a quicker way to accomplish this task. Tester 1 Tester 2 Average Average Satisfaction 1 4 2.5 Success Rate 100% 100% 100%
  • 17. Johnson 17 2) Testers were surprised that there was no nutritional information available for the seasonal fruits or healthy study snacks. 3) Testers were unsure why there was a slideshow on each product page when the images were all the same. They wondered what the point of a slideshow was if it showed the same picture repeatedly. Biggest Problem: The first highlight was the biggest problem for my users when they tried to complete this task. Having to go to each product page to find the nutrition facts was tedious and time- consuming. Both of my users expressed their thoughts on this process. Kalleigh said that the nutrition facts were where she expected them to be, but she felt it took her too long to complete the task. When she started the task, she went to the search bar to try and find some of the items available in her meal plan. She searched “Cheesy eggs & spinach burrito in a mug,” which was a “Grab n’ Go”. She got no results and after searching some other items in her plan, she discovered that nothing in the Spoon University Meal Plan returned a result from the search bar. So, she went back to her meal plan and clicked on each product. After clicking on the product, she had to scroll down and click on a “Nutrition Facts” tab to find the information she was looking for. She would then x out of the product page and repeat this process over and over. Once again, she mentioned that this process was not hard, but that it took her too long. Kalleigh was not required to swap any meals, “Grab n’ Go’s,” or snacks throughout this task because all of her preselected choices were under 450 calories. However, she did swap “Four Cheese Mac n’ Cheese in a Mug” with “Pepperoni Pizza in a Mug,” just to prove that she knew how to swap items. Bruce also had some thoughts on the repetitive nature of this task. He said that “Going back and forth [between pages] is annoying”. He began this task by first checking the nutrition
  • 18. Johnson 18 facts for his meals. He easily found the information for the “Chili Mac and Cheese,” noting that is was 440 calories, just under his 450 limit. His second meal was “BBQ Chicken Flatbread”. He clicked on this product and clicked on the “Nutrition Facts” tab to find how many calories the flatbread had. After clicking this tab, Bruce did not see any nutrition facts and instead saw a blank white screen. He went back and forth between the other tabs on the screen, those being Ingredients, Allergens, and From Your Kitchen. All of those tabs had information under them, but after he clicked on the Nutrition Facts tab again, he still saw nothing but a blank screen. This frustrated Bruce and forced him to spend even more time going back and forth to find a new meal that he knew was under 450 calories. After finishing his meals, he went through the Grab n’ Go’s and the snacks. All of his Grab n’ Go’s were under 450 calories, so he did not have to swap anything for this part of his meal kit. When he looked at his fruits/snacks, no nutrition information was available, but he assumed that all of these products would be under 450 calories. It took Bruce a long time to complete this task and he did not like having to go to every product page to find one item of information. Alignment to Heuristic: Flexibility and efficiency of use This heuristic matches my biggest problem because testers were unable to speed up the process of looking at nutritional information during this task. Since Kalleigh and Bruce had to go to each product page to find the nutritional information, it would have been beneficial to have a quicker way of finding this information. As mentioned above, each user expressed that they did not like having to go back and forth between pages. The process was very repetitive and time consuming for both testers. Flexibility and efficiency of use is all about allowing the tester/user to do more or less. In this circumstance, if Chef’d offered the option to filter the meals in each meal plan based on calorie count or total grams of fat, the user would not have to go to each
  • 19. Johnson 19 product page to find the nutritional facts. The user would still have that option available, but adding this filter could serve as an accelerator for those wanting to group the meals based on common nutrition facts. This accelerator could apply to both new and returning Chef’d users because many online shopping sites use filters to group items together. In addition, since completing this task took so many extra clicks, adding this filter would lessen the amount of needed clicks to find the nutritional information. Having to go to each product page is not efficient and Chef’d should be doing something else to offer a better experience for its potential customers. Task 4: Assume/pretend that it is Monday at 3:30 p.m., and you plan to prepare the spicy meal on Saturday night. Will the meal arrive in time? (5 days’ time) Summary for Both Testers: Tester 1 Tester 2 Average Average Satisfaction 2 3 2.5 Success Rate 100% 100% 100% Highlights: 1) Testers were unsure where to find delivery information. 2) After finding delivery information, testers were confused as to what their shipping options were. 3) Testers were unsure why they had to put in their postal code before they could select a delivery date. They wondered if the delivery date varied based on location.
  • 20. Johnson 20 Biggest Problem: The first highlight, testers being unsure where to find delivery information, was the biggest problem for this task. When this task was read to Kalleigh, she had to sit and think about what to do. This was different from previous tasks because typically, she would immediately start interacting with the site. After thinking on it, she decided to go to the search bar. She typed “shipping” in the box and hit enter. She got no results and wondered what to do next. Kalleigh decided she wanted to try to get back to the home page. Since she had just skimmed over it in her initial site thoughts, she thought that she might have skipped over some shipping information on that page. However, Kalleigh could not figure out how to get back to the home page. There was not a “Home” on the navigation, so she gave up on this idea quickly. She went back to her cart to look over her meal plan again and hit “Checkout”. She was then asked to put in her zip code for a delivery date. She did this and found that the soonest it could be delivered was March 7, just over a week from when she would have ordered it. So, this was not quick enough to meet the needs of the task. The shipping information was not where she expected it to be, which is why it took her so long to find it. Throughout multiple tasks, Kalleigh used the search bar in hopes that it would help her find the information she needed. However, the search bar never returned any results for her. This was a difficult task for Kalleigh to complete because she was unsure where to start. Even though she did complete it, she was still left unsatisfied. This task was the most challenging for Bruce when compared to the other three. He started this task by scrolling up and down on Spoon University’s page. After finding nothing, he hovered over each navigation tab to see if anything would relate to delivery. Nothing seemed fitting, so he went to a secondary navigation bar in the top left corner of the page. He clicked on “How it Works,” expecting to get some more information on delivery. Bruce did not think this
  • 21. Johnson 21 page was helpful at all. So, he turned to the search bar. He searched one of the meals in his cart to try and find some delivery information on an individual meal. His meal, “Black Bean Chicken Brown Rice Bowl,” did not pop up. He said aloud, “Am I in the wrong spot?” Bruce was very confused at this point and tried to think of other places he could look. He then remembered that he had not looked at the footer yet, so he scrolled down to that section of the page. He clicked on “FAQ,” and looked through the page. He noticed there was a shipping & delivery section, so he clicked on “When will my Chef’d box get delivered?” The answer told him that it would be between 8am to 8pm. This was not the information he was looking for, so he chose another question instead. This question was “What are your delivery date options?” The answer told him to look at the cart page for specific delivery date options. So, he clicked the Chef’d logo, thinking this would take him back to the home page. Instead, he was taken to the home page of the FAQ website. Without knowing it, he had gone to a separate site designated for Frequently Asked Questions. In order to get back to his cart, he had to type chefd.com in his browser. He then clicked on his cart, hit “Checkout”, and put in his shipping zip code. He noticed that the soonest his food could be delivered was Wednesday, March 7, which was a week from the day he would have ordered it. This was not quick enough to meet the needs of this task. After completing this task, he turned to me and said, “That was WAY too hard.” From the beginning, Bruce was unsure what steps to take to find the right information to complete this task. The FAQ eventually lead him to the right answer, but it took a lot of thinking/processing on Bruce’s end to reach that point. Alignment to Heuristic: Consistency and standards This heuristic matches my biggest problem because the testers were unsure where to find shipping information. In addition, even when they did find this information, it did not seem to
  • 22. Johnson 22 make much sense. Consistency and standards as a heuristic means that something seems familiar and makes sense to the user. When creating a website, it is important for the company to think about where users expect things to be. So in this instance, Kalleigh expected to find shipping information by using the search bar. However, the search bar did not return any results for her. Many users expect to find what they are looking for through the search bar because they use some sort of search bar every day. Users like consistency, and since Chef’d’s search bar did not return results, this was inconsistent from what Kalleigh normally experiences. In Bruce’s case, he expected to find his answers through the Frequently Answered Questions page. It still took a couple of tries to find his answer, and when he did, it still required more effort on his part to find what he was looking for. After going to his cart and finding the delivery dates, it still did not make sense to him why this information was only available at the end of the ordering process. Many people, like himself, want to know when the product will be delivered prior to adding it to their cart. Both Bruce and Kalleigh thought the cart was a fine place to put the shipping/delivery information, but they thought it would make more sense if the information was also available in other spots on chefd.com. Final Site Thoughts: After completing these tasks and digging deeper into the site, some of Kalleigh’s thoughts had changed, while others remained the same. She still thought the site was very visually appealing. All of the photos used were of high quality and the layout of the pages was organized. She liked the colors used and thought that the site looked professional. However, she did not think the site was as easy to use as she thought it would be. Kalleigh thought ordering meals was more difficult than it should have been. She thought the information throughout the
  • 23. Johnson 23 site was not always helpful. For example, the instructions for making the meal plan were not clear and caused her to be confused. She also did not like the “How it Works” section. She expected this section to give a clear understanding of what Chef’d does as a company. The text descriptions throughout the site were short and did not provide her with enough information. The last thing she mentioned to me was that the navigation was bad between pages and it was easy to get frustrated. Anytime she hit the back arrow, as mentioned before, she had to start over her meal plan. To her, this alone did not make the site seem user-friendly. Bruce also had some thoughts that remained the same and others that changed. He thought the site overall was still nice and fairly organized. He liked the style of the site and the way the information was presented. However, he felt that the site was missing a lot of information. For example, when he was trying to complete tasks, there was little information on, how to create a meal plan and how to find delivery information. Bruce also mentioned that some pages, like the home page, required a lot of scrolling to get to the bottom of the page. Something else that frustrated Bruce throughout this process was the slow load time and glitches that happened more than once. He told me that “if anything breaks, there is no way to get out”. That directly aligns with one of the heuristics and big problems I talked about earlier, which I thought was interesting. Even after using the site for only 30 minutes, he still knew that this was a problem and something that needed fixed. If this issue was fixed, it would better his experience on the site. Both Kalleigh and Bruce had positive and negative things to say about chefd.com after going through their usability tests. It is clear that both testers liked the design and layout of the site, but found many problems regarding the information on the site. Both users experienced
  • 24. Johnson 24 confusion throughout the testing and did not know what to do. In the end, they both wanted more information available on the site so they could find what they were looking for. Recommendations to improve user experience Single problem being fixed: Task 3: Testers were both surprised and annoyed that they had to go to each individual product page to find the nutrition facts for each meal. Problem Improvement: Added some filters so users can only have items in their meal kit that meet their needs. Figure 1 Overall Filter Change
  • 25. Johnson 25 Figure 3 Other Added Filters Figure 2 Nutrition Fact Filter
  • 26. Johnson 26 Figure 5 Spoon University Plan After Above are the wireframes and screenshots that I created to improve Task 3’s big problem, which involved Spoon University’s Meal Plan. Since testers were annoyed that they had to go to every product page to find nutritional information, I thought it would be beneficial to put this information in a filter that could be utilized when users first discover what is in their meal kit. Having filters gives the user the option to update the items in their kit based on certain Figure 4 Spoon University Plan Before Nutrition Facts Difficulty Time Spiciness Ingredients Meals
  • 27. Johnson 27 characteristics. However, if they are happy with the meals chosen, they do not have to use any filters and can continue to the checkout. I chose to put the filters on this page instead of Spoon University’s landing page because in order to even create a Spoon University meal plan, one must answer some questions, which already filters each person’s meal kit based on their answers. Those questions are what allergies a consumer has, what proteins he/she prefers, and how many meals he/she wants in the meal kit. I believe these questions are necessary for everyone to answer because they are the foundation of the meal plan. However, many people may have additional preferences for their meal plan, an example being Task 3 of this assignment. Currently, the only way to know if a product has less than 450 calories is to go to every product page and check the nutritional information, as I mentioned earlier. Adding a filter for nutrition facts allows people to select their personal preferences for these facts. My idea is that once a filter is selected, the page will automatically update and replace the meals/grab n’ go’s/snacks that do not meet the requirement of that filter with something that does. For example, if I wanted my meal plan to only include items under 300 calories with 10 grams of fat or less, I would select the 200-300 calories box and the 5-10 grams of fat box under the Nutrition Facts filter. It would result in the screenshot below, because all three meals meet the requirements of both items in that filter. Nutrition Facts (2) Difficulty Time Spiciness Ingredients Meals Indicates that two items are selected in the filter All three meals changed from previous screenshot because of the filter
  • 28. Johnson 28 Having this Nutrition Fact filter eliminates the repetitive task of going to every product page to find nutritional information that fits a specific need. In the wireframes above (page 25), I chose to use calories, fat, and protein as the categories underneath the Nutrition Facts filter. I chose these because I believe these are the facts that the majority of people care about/ pay the most attention to. Personally, when I am looking for something to eat, I look at the calories first, fat second, and protein third. Chef’d could add more categories, such as sodium or cholesterol, if they felt it was necessary. However, I thought these three categories were enough. When reading about filters on Baymard, the article warned designers to not over-categorize filters (Holst). This is another reason that I chose to stick with just three. Since Chef’d does not currently have any filters for nutrition facts, I thought three would be a good start. Within the Nutrition Fact filter, one will notice that I had to choose ranges for calories, fat, and protein. I did not just choose random numbers when creating these ranges. I went to the product page of every meal and grab n’ go, and then wrote down the amount of calories, fat, and protein in each. After writing these numbers down in a notebook, I wanted to figure out a way to organize them that would be consistent with what users would be likely to see on other websites. Amazon is a site that filters its food offerings by nutritional information, so I looked at their site for reference. I noticed that they used large ranges for calories and smaller ranges for fat and protein, so I followed these guidelines when creating my own ranges. After finalizing the Nutrition Facts filter, I thought it would be beneficial to add some other filters as well. In the same wireframes/screenshots, I also created four other filters for this page. I decided to add other filters that I felt would create an even better user experience. Difficulty, time, spiciness, and ingredients were all items that can be found on each individual product page. Placing these items into filters gives the users other ways to adapt their meal plan. I came to the
  • 29. Johnson 29 conclusion that if users got tired of going to each individual product page to find Nutrition Facts, then they would probably also get tired of going to those pages to find things such as difficulty, time, spiciness, and ingredients. However, if I were Spoon University, I would create filters for all of these, but still keep this information on each product page so it is still available to the user. For example, if a user wants to know a piece of information about one item without having to change his/her meal plan, it is still beneficial to have characteristics about each product on its individual page. When creating the different options within these filters, I once again looked at every product page to find what ranges existed within Spoon University’s meal plan. Difficulty, spiciness, and time each only had 2-3 options to begin with, so each of those became an option in the filter. For ingredients, I found the six most common ingredients across the meal offerings and put those as the options within that filter. Lastly, I want to discuss why I chose to do a horizontal filter bar as opposed to a vertical one in a sidebar. When reading articles about filters from Baymard, they let me know that horizontal filter bars can be beneficial when only a few filters are present. This is because limited space is available when using a horizontal bar and it is not suggested to squeeze a lot of filters in this small amount of space (Holst). I knew that I only wanted to add a few filters, so that is one reason I went with this type of bar. Another reason I chose this bar is because, according to Baymard, many people overlook the sidebar area of a site, which is where many filter bars appear (Holst). Having a horizontal bar towards the top of the screen grabs the attention of the user and lets them know that this bar is something they can use. If filters are there and no one sees or uses them, they have no purpose. Once again, the big problem in Task 3 was that users were annoyed going back and forth between pages to find nutritional information. I created
  • 30. Johnson 30 filters to try and fix this problem. However, if the filters are created and never seen, the problem still exists.
  • 31. Johnson 31 Works Cited Holst, Christian. Filtering UI: A Horizontal Toolbar Can Outperform the Traditional Sidebar. Baymard, 5 May 2015, https://baymard.com/blog/horizontal-filtering-sorting-design. Accessed 8 March 2018.