Closing out this issue with open user testing research.

Plan & Script

https://app.zenhub.com/workspaces/product--inception-pipe-5f82e534db531f000f8c09ff/issues/openfoodfoundation/inception-pipe/21

There was a lack of clarity about the usability of the next buttons on the checkout process so Eriol of the design team has set up usertesting to collect qualitative data alongside some quantitative data from analytics tools to help choose a direction.

Usertesting Script

5 tests, split 3 desktop 3 mobile (virtual on the computer via dev tools)

Target User

Test with max 6 users who are likely to be regular and reasonably proficient online shoppers for food and/or groceries. They don't need to be experts in online shopping, but know it exists and have placed at leas one shopping order within the last 3-6 months.

Housekeeping questions

Can you hear and see me all okay?
Can you and are you happy to share you screen with me? Set up screenshare on zoom
Can I record this session for private note checking purposes?
Can I take notes as we talk? I can share the notes with you afterwards and you can check, delete or edit any details you need to before an anonymised version goes into our open data repository.

Scenario preamble

We're testing part of the experience of shopping on the Open Food Network in order to better understand how real people use an online shopping kind of experience to purchase food and other produce. The Open Food Network platform is a way of finding local food hubs or producers to purchase goods from that aims to shorten the food supply chain so food and produce comes from 'farm to table' much quicker with fewer 'middle services' like large lorry/truck transport and grocery chain store mark-up. We're going to default to the UK site unless there is an operational OFN in your country of residence.

I’ll ask you some questions about your online shopping behaviours first, then to complete 2-3 tasks using the website we're testing and then ask some general questions at the end, if that’s alright. The test should not take longer than 30 minutes.

You have no need to feel pressure here, we’re testing the designs, not you, so don’t be afraid to explore and speak your mind.

You don’t need to worry about hurting our feelings. We have very thick skin, so don’t be afraid to be brutally honest.

It helps a lot for our analysis if you can think out loud and describe what you’re doing as much as possible while you’re browsing the test website.

If at any point you choose to stop the session, that’s absolutely fine. Just let me know.

Intro questions

Can you tell me the last time you purchased food online?
Was the service you used a large, well known service or brand? like a supermarket chain?
Was is a large or small shop? how long was the produce meant to last you?
Have you ever heard of or used the open food network before? if yes, can you briefly explain how and why you visited?

Tasks

We'll be using google chrome (green yellow and red circle) as a browser if we can.

For Mobile testers: so we can take advantage of the mobile screen view. I'll walk you through this part.
1. Open Chrome browser
2. Go to https://openfoodnetwork.org.uk/eriol-farmer/shop
Mobile testers!
1. Right click anywhere in the webpage and choose 'Inspect' from the list of options.
2. Your webpage might go a little strange to begin with but we'll click a few options so you get to simulate a mobile phone screen.
3. Top section with a down arrow pointer → opens a list of options → choose Pixel 2 or what model the user uses.
4. This simulates a mobile phone functionality so we can see a mobile view, but on our computer screen so if you'd take a moment to get in a 'mobile' mindset that would be great!
Attempt to purchase at least 3 items. Allow the user tester to explore and have a little fun here.
Once finished, show me where you would attempt to pay.
Stop once you believe you are on the 'checkout' page.
Take this page slowly, fill in all the details , you can place fake info in these fields. Talk me through each section as you complete it, letting me know what makes sense, what doesn't etc.
1. Fake name, email@email.com, 0712345678, Flat 1, Random road, Bristol, Somerset, BS1 1QB,
2. Interviewer notes: Pay close attention to if the tester uses the next buttons and in what circumstances. Pay particular attention to if the user expands the section after clicking next or find any of of 'next' confusing. if they click next more than once. If they scroll the page to double check any information.
Stop just before clicking the 'place order now' and we'll move onto the general wrap up questions.

General feedback

What do you think overall?

Were there any parts of the process that were confusing or difficult?

Were there any specific elements on the page that were difficult to use or hard to understand what was happening?

If the user has still not mentioned the 'Next' button functionality ask this explicit question:

I've noticed that you have not yet mentioned the next buttons in the checkout section. Did these function in a way that made sense to you? Why?

Usertester '1' notes

Located in India.

Typed notes:

Shops online semi-regularly. Larger grocery shop to last 1 week. From a chain or recognised supermarket. Delivered.
Seems tech and web shopping savvy.
Heard of farm to table concepts but not of OFN. Has heard of open food facts!
Uses chrome regularly but Firefox is default.
Task 1 to 4 - Sees several items and 'variants' uses the word variant. Wonders about the pie chart and is distracted by it because it's unusual. Found it confusing, understood it should contain a breakdown but the breakdown wasn't informative for these products given it was the same price repeated without fees. User mentioned wanting to see taxes, delivery and charges.
User did mental calculation in order to find the cheapest product based off size. Used Milk as the example for getting best deal.
Clicked add buttons fine, understood adding multiples.
"Where is the cart" - noticed it was in the 'standard' top right and sees the little 3 to indicate the number of products in their basket. Was confused when clicked due to the pop-out as they expected a new page. Clicked edit cart to edit numbers to 'learn' how to change things. The edit page was easy to understand and user found critical functions easily.
Only odd behaviour was reducing to '0' clicking update and there was a small moment it was still present and user expected an immediate deletion. They actually wanted to add the item back after updating and then said 'uh oh' I need to get back to the shopping page. They clicked 'shops' and they got the list of shops and then panicked and clicked 'back' to get back to the store they wanted. got easily lost when they needed an item they had 'removed'.
Wants to explore page more and talks briefly through the filter and search function. Looks for broccoli and doesn't find it so is satisfied with understanding the search. Even though they 'knew what they wanted' they wanted to browse the other items in the store before proceeding.
Described it as 'Scary' to be lost in pages and assuming worried they would loose their basket choices and/or not be able to find the shop again.
Task 5 - 6 - Landed on the checkout details page with next buttons. Uses an initial for name 'A' . The 'x' is weird.
"What happens if I don't click next?"
User eventually states they think that the next sections won't be 'activated' if they don't click next'
They hover over next a few times to try to understand what it's doing when it's not 'enabled'
Info already being present in the shipping section (because there's only the pick up option) User gets confused with shipping being selected automatically because there's only one option. They were expecting to put in there shipping details and this actually distracted them for the entire UX of the checkout. They mentioned it 4+ times.
They wanted to be reminded that this shop only does pick up.
They wanted to place in the pick up notes box 'can you deliver?' ← I wonder if other shoppers do this too. Is free text in this section a temptation.
in India, Home delivery is important because of the traffic and transport systems or they would hire a pick up company to pick up for them and deliver.
User does some head calculation in the checkout page in order to decide if it's worth picking up the good vs. ordering somewhere else and getting delivery.
User doesn't understand the (free) in the brackets in pick up and the payment options. Thinks it's for fees.
Never used stripe. Uses credit card and online bank transfer payments (net banking in India). Confused by just the statement 'Stripe'
Reviewing page is a waste of time for this user, they are confident they've done everything correct or they wouldn't have done it. They are frustrated by errors most likely. But also didn't notice they had a page error.
They did see the summary info on the expand/collapse arrow section and read it to confirm details.

Next button info

Think they need to click it in order to 'activate' the next section' so they wouldn't be able to type in the next section until they clicked 'Next'
Think it's 'for mobile' as they go through desktop. Accepted is as a mobile feature.
Unusual but easy to learn once clicked once.
Didn't comment on it 'helping' in particular but it didn't continue to pose a problem.
Didn't observe a jump on page but did progress through details without noticing error and not clicking 'place order'

Usertester '2' notes

Located in USA.

Typed notes:

Last food order they've done was a cat food order on Chewy.com. They 'tweaked' an order two days ago.
They get regular standing orders for different cat food and sundries on this website so they have at least two recurring orders, one for 9 weeks and one for 12 weeks and they often go in and make small edits for one-off items.
Mentioned the excellent customer service 4+ times including express delivery if an order is incorrect under 48 hours and xmas cards to the customers and pets.
Mentioned a 'auto shipping' feature
- Image under here
It's a well known service especially through word of mouth.
Ordered a large amount to last 'a while'
Not heard of OFN before
Typically uses Opera due to moving away from Chrome being 'icky' and Opera has an in-built VPN.
In the product list the tester found it strange to not have headings or groupings like 'dairy' or' Vegetables'. "It's strange to go from milk to Quiche!"
Made the tester think that there are not a lot of products in this one shop and it is 'limited'.
No problems adding products to their basket.
Was confused by the 'bacon and cheese slice' because it's a baked pastry and not slices of bacon and slices of cheese in a pack. The user used the image and the description to discover this and was surprised.
This tester said before they go ahead and purchase they like to discover more info so they said before checking out they would go through all the 'headings' like 'About' 'Producers' and 'Contact' the tester used these sections to learn about delivery options, location and info about the 'farmer'. They said they use this info in order to inform whether they 'bookmark' the page/website.
They also said they wanted to see if the farmer 'specialises' in anything or if there are things not currently available in their shop.
Called the filters 'categories'
Used the about info to learn about 'pick up only' and no delivery options.
The tester briefly mentioned something called a 'CSA' which is a buying group and spoke about the large deliveries where multiple households need to purchase from producers and they all get some of the large delivery.
They pick up eggs from their local farmer and also talked about a Vegan market locally they pick up orders from. They are dairy free.
They saw the order cycle, read out the info and said 'Ok?' and then 'ok'
Tester then clicked on the map and expected the location to be recognisable as their rough area and was confused to see the entire UK. Related to the cookies message being seen as 'capturing' their location so this was extra odd to them.
Had lots of trouble zooming on the map. expanded first and then tried the track pad pinch zoom but it didn't work.
Expected the producer they were just shopping at to be a bigger pin or more prominent and the producers nearby to have connections or affiliated with that producer to be connected.
Eriol made a quick sketch
The tester found this statement very useful 'Shopping, transformed: Food grows in cycles, farmers harvest in cycles, and we order food in cycles. If you find an order cycle closed, check back soon.' this helped the tester remember that getting food from a farm means to understand the seasons and growing cycles and this statement helped them realise that and their attitude 'shifted'. They said that buying from farms is different from 'buying regular groceries'
They then clicked the basket and got the 'sidebar' Said they understand they either need to clicked checkout and pay or edit to change something.
Commented on the usefulness of guest checkouts in order to 'try out' a service or website without giving login details and this tester is concerned with how many logins for different websites they have.
Started to fill out the 'Your Details' page - easy, simple.
Wanted formatting suggestion for the phone number so if to include '-' or ()
Saw the next button and got a little confused. If it wasn't there they'd just scroll.
It's not standard and they haven't seen it before. But they decided it wouldn't 'harm' their form filling process to see what it did.
"oh it focuses my attention to the next section needed"
It 'pops' out.
Some confusion about county, state and country - from the USA to the UK and some hierarchy questions about what to select and how they would expect it from a USA perspective: State, County, City.
They remembered about pick up only from the producers about page so it doesn't surprise them. They then go on to add pick up preference times and days in the 'free text field'. The describe a current producer they get good from that they place an order, then they get a call or text and a conversation about when they can pick up. 10 mins away and they've developed a relationship. This producer manually removes shipping costs from this customers order and they have noticed this.
Prefers to pay online even with a pickup.

Next button info

Next's function was good for focussing attention and taking the tester to the correct next section.
Collapsing helps with reviewing the page details.
Some unsure feelings about what would happen when they click next for the first time.
Was worried the 'next button' would take them some other page or reveal hidden content which was not good.

Usertester '3' notes

Located in Chicago USA

Typed notes:

Last shop was 1 week ago. Intended to last for a few weeks and from a large brand supermarket. Paid for with coupons and giftcard.
Not heard of OFN before. No further mention yet of farm/short supply chains
This was a very speedy tester.
Tester scrolled a lot and spoke of expecting much more variety of items. Used search correctly because they wanted to find cheese which they expected due to milk being available and there being a 'dairy' category.
"There shouldn't be a 'dairy' category if it's only milk and not all dairy"
Wanted to be shown any nearby producer or hubs that did sell cheese after searching in the search bar on this producer and not getting cheese as a result.
Seeing variety was a key aspect of shopping online, tester described knowing what they wanted to buy but also needing to be tempted and excited by new and unknown options and variety played into that. OFN didn't give this experience for this tester and felt very 'functional' and not exciting.
Some confusing words used in the prototype 'goon' for a large container of milk.
Interested in 'tasty treats' as a filter item but wasn't quite in agreement with the results.
Understood that the basket in the top right showed the amount of items currently added.
No problems getting items in their basket using new add buttons but mostly took time due to lack of 'choice' in products.
Onto checkout they filled in 'your details' fine and then stopped to review using the green tick as confirmation it 'looks good'
Talked about 'hitting next' to progress
Wanted a search field in the address entry section.
Confused by the label 'Address cont.' it's too vague and non-descript. Wants specific fields labelled like 'apt number' 'street' etc.
Continues to use 'next' to progress.
Tester is very confused about shipping info selection choice. Tempted to leave it blank and gets stuck in a loop of what to choose. Notices the red x and and states 'That is not good'. Does not want to go pick up at local deli and delivery was assumed as norm.
The combination of adding in an address previously and then shipping info not connecting with the pick up option was deeply confusing and stuck this tester for a while.
They added details in the free text box like 'Ring the bell when delivery is here'
Talked about not being able to 'go anywhere' after not filling out that info correctly or assumed incorrectly and also could not unselect the single pick up option so felt really stuck. "I have to pick this" no other options left but to agree or abandon.
Confirms and finishes the checkout process.
Finds the process reasonably straightforward except the shipping method area due to the confusion.
Described wanting to see confirmation page and email.
Items on sale are not in sections before and after selecting categories (filters)
Wants to see sale items and those kinds of promo offers. Shopper is looking for value. Also keen on seeing 'out of stock' items for better understanding of the produce sold.
The green and the next button enabling was how this tester 'knew' she could go ahead
They questioned the 'verbage' of 'next' though they would like to know what section they would move to next so: 'Next: Shipping details' etc.
Tester was worried if they left anything empty they would get errors or not be able to proceed.
Cross and tick and red and green helped user understand they did something right but they believed that a 'x' prevented the next section from being able to be filled.
Next gave 'confirmation'

Next button info

This user thought they needed to use next to progress. When asked what they would do if the next button wasn't present they said they would just scroll but next offered them some kind of 'confirmation' of correct input.
The green and the next button enabling was how this tester 'knew' she could go ahead
They questioned the 'verb-age' of 'next' though they would like to know what section they would move to next so: 'Next: Shipping details' etc.
Next gave 'confirmation'

Usertester '4' notes

Located in Germany. Tested on virtual mobile in browser.

Typed notes:

Can't remember the last time they shopped online. They usually buy from a fresh produce market in person locally. They last bought groceries online about 3 years ago for a special present they believe it was chocolate.
They last shopped in a local grocery market shop. They have a local market that is split in two sections, one section for local produce and one section for imported goods.
They get around a weeks supply of fresh food for a household of two adults.
Not heard of OFN until Eriol mentioned it.
Tasks: Accepted the cookies message. They were confused and annoyed to see they cannot 'customise' the cookies options, only accept. This tester always customises their cookies for privacy or they don't use the website.
Landing on the shop page "I don't like bacon, I'm vegetarian"
They wanted to get an overview of the 'range' on offer. Does this shop specialise or what is their speciality?
"The quiche looks good!"
Tester scrolled entire page before going back to do a detailed pass of the info.
Tester described behaviour being that they would click the 'top' info first to learn more so wanted to explore about, producers and contact. They expected some in depth knowledge but the test producer was blank. They wanted to learn more about the shop they bought from.
"What's producers?' - is Eriol a producer? - clicks 'producers' tab. Pauses. ah it's probably the 'sources' that Eriol uses but does that mean that Eriol is not a producer? This confused the tester and took them time to figure out.
The about section was empty and tester expected some detail info about what the producer is doing.
Contact is clear - this is how I get in touch.
Shop. Mentions the loading graphic. - We get an error because the OC closes early and the loader endlessly spins. We take a quick detour here to explore what a user would do in this scenario.
Tester assumed that there is server problems and would do some tech troubleshooting.
On refresh we saw that OC's closed. tester said this comes too late and there is no warning and they are grumpy.
They mentioned that they completly ignored the OC's section beyond thinking it was a drop down or button so they ignored the 'closing in...' messages. They need this bigger are more clear. They later expected it to be clickable and spent some time clicking.
They said at this point they would not be bothered to complete a purchase and bounce.
We then redirected to the test questions and spoke about searching through each of the shop navigation items "I always want to know who i'm buying from" this tester wants to investigate and know who they are and their values and backstory.
They were confused by the search section right under OC.
They used filter for fruit & veg > only lemons, ok and then cleared filter.
Slightly confused by the message under the add button of '1 in cart' it didn't look connected to the button and floating text. It's mostly okay but gave pause.
- Eriol made a sketch on an improvement
Tester looked at cart to double check the amount of items they were clicking on.
After adding 3 items they then started to try to figure out the OC and they guessed what it could mean. They expected to have to choose a time after placing in address and sorting delivery.
'Ready for immediately' was very confusing statement for the tester.
Tester double checked the filters and made sure they didn't need 'unclearing'
After basket they found the total not clear or easy to see right at the bottom of the screen. When there is a small quantity of items the total is small and towards the bottom. They almost missed it. They also expected it to be aligned on same right hand side.
Checkout now order ready for immediately > wording so confusing. This page was a mess for this tester.
They think the farmer name and shop is too big.
Most important buttons of login and guest checkout are not prominent.
Tester clicked checkout so was expecting checkout process and not a confusing order summary that was not even finished (shipping info blank). Makes me think too much and think they're stuck in a loop.
Eriol did a sketch:
Order details page:
Scrolled
Too many empty headings
surprised I get red and it's checked as I'm typing...usually checked when finished with a section.
Why the repetition (with the mini summary) its distracting.
You shouldn't be able to select countries that this can't be delivered to.
Validation isn't accurate
Bug on double click?
Pick up option is liked. Asked for no packaging in the open text box.
They almost clicked on the 'back to basket' by accident at bottom of the section.
Place order now should be at very bottom
Sketch
Process was clear enough
Hide and expand didn't do much for the tester and they found it odd
Concerned with screen readers and accessibility of hide
Prefers 1 column forms on mobile.
Was interested to see what would happen if the short fields had long text in.

Next button info

Click next? why next? expecting the section to scroll with more info in that section.
Saw billing coming up (by scrolling) so expecting that section next.
Expand and hide is connected to next which is weird
Next is expected in the '1 of 4' scenarios. but the tester already sees in next section here
Expecting to scroll not click next
"But of course I'm going to click it because it's there, big and clickable so yes and I completed a task so I feel like I want to click a 'finish' action"
Curiosity but then disappointed that next only does the hide or close action. if it was labelled better it might be less disappointing like 'Next: billing details' or 'Save and hide' etc.
Talks about "nothing happened" and "It closes, where did it go? how do I get it back?" it was 'taken' away.

Usertester '5' notes

Located in USA. Tested on virtual mobile in browser.

Typed notes:

Never purchased food online before but looked online at grocery apps to look at the selection before visiting store to purchase.
Uses large chains and prefers to go to the closest store. Also visits specialist Chinese supermarkets with the best offering for these specialist goods.
Live close to a grocery store so buys for half a week to 1 week of food at a time. Basically fills up fridge and then empties it and the repeats. longest amount has lasted about 2 weeks. The closest single store is the most recent visit.
Not heard of OFN before.

Tasks

Immediately scrolled page when landed on it.
"This is one of the reasons I don't do mobile grocery shopping because i don't know what I want until i see it on the shelves".
This tester looks specifically for high value goods that are on sale like a meat item and then will shop for the accompanying recipe items. From memory.
Trying to find categories for the food so the tester clicked on the top left menu (three lines burger menu) didn't find an option they were expecting so closed menu.
This tester looks for 'sale' items first, then goods by the recipe.
Tester finds it odd to see ingredients and pre-cooked goods in same list immediately after one another.
Found the filter hard to locate.
Still finding navigation of product list not great so clicked menu in top left again and selected 'shops' stopped when they are asked to select a new shop. Was expecting categories of produce in the menu.
Back to the shop the tester encounters the bulk item 'bananas'. They wanted to add '1 bunch of bananas' and clicked 'add' and was confused to find this new 'overlay' input modal. They are confused by min and max
"I don't know why this has appeared, I just want 1 bunch!" "I can't figure out what's going on"
When asked to guess what they think is happening they try clicking the min and max buttons to see what happens in the UI. They notice price going up only on click of the min and are further confused.
They are frustrated there's no obvious help for this section.
They then clicked the pie and saw a price breakdown which they said would be helpful if they weren't stuck already.
They also click the picture of the item to try to find more help.
Not able to find help they click back into the min max modal and try to figure out what is happening from logical steps. They believe the min max acts kind of like 'flight tickets' in that a range is added min =2 and max = 5 and they explain that it's a flexible option for a min of 2 and a max of 5 but it would depend on what the store has "So I'm saying I want 2 but I'm willing to buy 5"
Tester then talks about it not being clear whether it's a bunch or single in the bulk buy but clearer on the initial product list screen with description and the kg and thats how they figured out the puzzle however, the 1 in cart is then further confusing!
Tester said the language of min and max needs to be better.
This tester did quick mental math to figure out prices savings. They said pie was helpful but still uses their brain.
Describes basket or checkout location as standard and finds it easy to get there.
On the 'login or checkout as guest' page the tester found the 'Ready for immediately' text confusing. Does it mean that stock is available immediately? that it would be delivered immediately?
Expected shipping to change when address was added.
Not happy but not upset...
Just show the total
Prefer to see shipping address first and wants to see a message like "ready to delivery in 2-3 days" helps them to plan better.
IS this a pick up? Not showing shipping as 0.00?
Wanted to see a shipping 'price range' a lot sooner so they can calculate before they got to this advanced stage. They're happy to pay when they want shipping and they know they will pay 'something' but they want some kind of ballpark estimate sooner in order to understand if they will want to deliver or pick up and which is most affordable.
With shipping, for this tester time was a bigger factor than cost. They are happier paying more if they can get the goods when they want them for a particular recipe/ They are concerned if they get the goods 'as soon as possible' it might not actually be when they need it.
Immediately is too vague, does it mean in 24 hrs? or is that only for pickup?
They added some text in the text box "Apt buzzcode and how to get in the building" but for pick up, no special instructions.
Clicked expand hide on accident.
If I can click, I will click.
Uses google autofill for all details.
Summary text was useful because concise but too small for this tester. Hard to read.
Payment was normal and as expected.
Confirmed, everything is here but there's lots of mixed text sizes and it makes it hard to read and also the tester doesn't often read these pages unless they are concerned about an error. They described a time they accidentally ordered an item and had to call and cancel it.
Tester then said their items don't look easier to find here so they found the change from list with pictures to no pictures to be strange.
Tester not used to seeing summary of info and having the section hidden.

Next button info

Clicks Next: Didn't expect it but fine. Oh it hid it?
The user said they are used to scrolling to find the next section and not an area 'shrinking'
It's unexpected but not a hinderance.
They've seen next in other pages but only with stepped process with a back button too. They said they don't like stepped processes.

Usertester '6' notes

Located in USA on East Coast. Tested on virtual mobile in browser.

Typed notes:

Never done grocery shop online except instacart. Last shopped for groceries in store 1 week ago.
Last ordered food last night for takeout and pick up from a restaurant 'downtown'. To last 1 night and leftovers.
Ordered from the restaurant website itself.
Not heard of OFN before.

Tasks

Scrolled page.
Wanted to get a look at 'everything they have'.
Looked at sourdough bread.
Personal touches are cute.
Expect the top left menu to be an expanded shop listing.
About should contain everything about this farmer.
Contact is a nice detail (surprised tone so likely unexpected)
Tester expected more produce and more farmer pages easily accessible from the main nav menu (burger menu).
The smaller list of produce makes sense once the fact that this is 1 farmer was understood.
Adding to cart clear enough. Basket or cart is in periphery vision where expected.
min max bulk item proved a complex problem. Described as 'Little confusing'
Thought that there might be a range of loaves available once clicked.
Confused when clicking min and max the prices changes when one (min) is clicked!
When asked the tester explained how they believed min max to work: If a farmer is out of stock you only pay for what they can have in stock and give you.
Tester checks basket for the final total of loaves as 2 because the UI looks like '25' (min 2 max 5)
Tester notices other products don't behave the same so adds the 5 pack of Quiche expecting min max but doesn't get it. Mentions the odd difference. Testers find it hard or impossible to tell that an item is a bulk item option.
Tester checks the basket to see the quantity and everything is 'correct'
Tester is curious about some buttons and UI functions and explains they natural clicks around.
When ready they click checkout from the pop out basket.
"I don't have a login...is there a benefit? Like coupons for regular shoppers?"
Ok to checkout as guest.
Looking over the rest of the page "What does Immediately mean?"
Total looks all ok
Will shipping get added later?
You details is typical
The expand and hide makes sense in order to access more of the form fields.
Tester however, scrolls entire page and reads all the info needed before going back to the top of the page. Was specifically looking for delivery and pickup info and also to get a general sense of the page info needs.
"I started typing and I got an error already" I can't click next maybe because I haven't filled in the info.
Tester was relieved when they got the green tick accepted state.
This tester said they liked the preview text on the hide expand section.
When the tester saw pick up immediately and delivery immediately this made more sense in that they were reassured that the statement of 'ready for immediately' was in relation to pick up or delivery and contextual to that.
Tester checked over the shipping costs then chose pay on pick up.
Tester sees the green confirmed tick, time to pick up immediately and does a quick calculation and glance over total to see if they're happy. 'All adds up!'
The tester noticed tax was added at the end and while their voice dropped at this they understood this was needed.
Over all straight forward and met expectations.
Most confusing element was min and max After a brief explanation they understood the purpose. They asked if they would be charged more in store and if any other items used hat function.
Tester mentioned the form fields being 'too proactive' with errors.
Generally the tester said they don't order on phone and usually always desktop. On the phone they were curious for more accessible info about shopping and they certainly don't want information hidden.
They don't mind the '1 of 3' stepped processes and mentioned knowing roughly how long checkout will take is important.

Next button info

Couldn't click next because they didn't finish the info in the field and stopped because of the red 'x' icon or 'error' as they described it.
They didn't click next because they weren't sure it would 'do anything different than scrolling'
This tester understood the next button as part of 'verifying' the content from the form they just filled but they didn't want to click. Likely due to seeing all the form needs from the page scroll earlier.
On closer inspection the next button wasn't verifying but 'moved' the page and did the same as hide which the tester described as 'non essential'

Synthesis of usertesting

There are plenty of insights here on how to improve the shopper experience generally from landing on a shop right through to placing and completing an order.

Key subjects that either came up more than once or were key insights are:

The phrasing in OC's can be confusing. Especially the example of 'Ready for immediately" no testers fully understood what this meant and confused many of them.
Shipping was on every users mind right up until the delivery options. All testers mentioned shipping before thy were presented with the shipping details section of checkout. This means that shipping as a option must be referenced better earlier even if it is not determined in money value earlier there needs to be reassurance for users earlier that it exists.
Typical shopper users find stores without many products confusing until they remember it's a small 'mom and pop' store. This message could carry through to the header section or the product listing as most shopper users did not click on, or read the about page to discover deeper info. They were, understandably, focussed on shopping for produce.
There are many detailed insights on how to better the layout of the checkout details form page below.
The page that some users get before checkout (login vs. checkout as guest) has too much complex information around the simple choice of 'login' or 'checkout as guest'. We don't need all the extra complex info and totals and summaries when users make this choice. A single total line and the two buttons of 'login' or 'checkout as guest' is enough. However, one user wants to know the benefits of signing up or logging in on this page so a simple 'Login to make checkout faster next time!' would suffice.
Next button recommendations are below.
Other insights on the mobile shopping experience can be found here:https://www.notion.so/openfoodnetwork/Mobile-UX-Usertesting-bd8acdcc2071476dbae9511e9de26ce8

Next button and checkout recommendations

Changes to the way the data entry page with next buttons functions is reasonably clear and can be divided into quick or critical wins and longer wins.

Quick or Critical wins

The next button is confusing enough for people that removing it is the most logical option. It provides the same function as the hide and expand does without clear content that it hides or expands. On most mobile devices tested the users can see theres further sections and testers are natural scrollers.
Pairing the information validation red and 'x' icon with the activation of the next button forces users to think that is what they must click in order to progress. However, they don't expect the hide and expand function and get distracted at best and confused at worst. We should remove the text field validation from the entire section and either have it per form field or after the last form field in a section is completed.

Longer or less critical wins

Form and page structure

Having all form fields in a single, vertical line will help the presentation and data entry on mobile devices.
Removing or reducing the space that the producers logo and name take up will optimise the vertical space. Shopper users by this point only need a small piece of text reminding them what store they are on.
We should check if having a list of any country is applicable or whether we should limit the country selection field to the countries that any given instance does deliver to.
We should consider in field formatting suggestions e.g. 'email@email.com' especially with address e.g. 'House or flat number, Street name...' 'Area e.g. South London, Wimbledon etc.' '07123456789' '01225 425903'
Users like a summary of their inputs but likely only because the section was hidden. If we keep all fields open by default the need for a hid and expand mini summary is no longer needed. Suggesting this because some users wanted to re-edit info and then had to expand, check, hide and added too many steps and mental load. If we want to keep a text summary we should do that lower in the page near the 'place order' button so they can review details easily on mobile.
On mobile the back to cart button is at the very bottom and one user almost clicked and lost their checkout details. This should be changed to a text link or the 'place order now' button should be the last button on the page' 'Back to cart' could also be relabelled 'Back to edit cart' because it actually take you to the edit cart page and not the product list.
We can remove 'Your order' title from the order summary.
We can remove the boxes or borders around fields because we don't need to contain them in boxes any more. We can also design a better text hierarchy that removes the need for grey backgrounds on the title texts.
Bottom of the page should go information summary > total summary > Everything look ok? > place order now [button]
Remove the 'contd.' label text on address field 2. people had no idea what it meant

Shipping

Being able to show a calculation of totals along with the shipping cost in the shipping details section should meet users expectations of feedback about shipping.
In the total; summaries before shipping is a cost consideration we should change the '0.00' to a 'pending' or 'TBC' message to let users know the shipping info is coming up and not decided until they choose a delivery or pick up method.
Labelling the section 'shipping info' when there is only an option to pick up confused shoppers so much that one put their delivery address in the text box. Renaming this section something like 'Delivery options' or 'Pick up only' if it is able to be contextual to the method of delivery or pick up is best. This section does not always describe shipping so it needs to reflect that. A question or statement could be a good label 'Options for receiving products' or 'How would you like to receive your products?'
We need to consider an option for shopper users that have gotten to the shipping section assuming they can get delivery but only having the pick up option. Consider a text link 'back to shop' for those that can't or won't pick up and would ordinarily 'abandon the webpage' by instead taking them back to shops filtered by delivery available. Text link could read 'Delivery option not available? Shop from a store that offers delivery' or this could take people back to the about page of this store to check if they have an order cycle that has a delivery option.

Transaction fees

Much like with shipping, replacing '0.00' with 'Pending' helps the user understand this is yet to be calculated.

openfoodfoundation / product-pipe

Checkout & next button usertesting 12 / 2020 #21

Plan & Script

Usertesting Script

Target User

Usertester '1' notes

Next button info

Usertester '2' notes

Next button info

Usertester '3' notes

Next button info

Usertester '4' notes

Next button info

Usertester '5' notes

Next button info

Usertester '6' notes

Next button info

Synthesis of usertesting

Next button and checkout recommendations