Online Supermarket Website
Role: UX and Web Designer
Date: August 2019 - ongoing
Collaborators: Lewis Barnes and Min-Chia
Course: Interaction Design for Web at Swinburne University of Technology
For this unit, our assignment is to create a functional, usable online shopping website, utilizing design principles and using UX design thinking processes.
COMPLETE: user requirements (personas, activity diagrams, user scenarios, user journey maps, affinity diagram) and conceptual design (mood boards, functional requirements, proposed site map, content matrix)
IN PROGRESS: wireframes, prototypes, final coded website - coming soon!
Research
Data Gathering methods
The two data gathering methods we used are observation and semi-structured individual interviews. We chose to focus on these two techniques to get feedback from a representative population of our intended user groups: people ages 18-60, including both family buyers and on-the-go buyers. Conducting interviews rather than sending out surveys allows us to ask “why” or “why not” to follow up and learn more about participants’ reasoning. We interviewed a total of 9 participants of different demographics, both candidly at the Woolworth’s and Coles, and various people at Swinburne. Below are the questions we structured our interviews on:
1. Have you ever done grocery shopping online?
If so,
How often do you buy food online?
What is your favorite online supermarket to shop from?
What did you like and what did you not like about the process?
What are your main incentives to shop online vs. in person?
What does an in-store experience offer you that online shopping doesn’t?
What are the benefits to online shopping and what are the disadvantages?
If not, why not?
2. How often do you go to the supermarket?
3. Do you shop for a family or just for yourself?
4. What are things that you take into consideration when shopping (i.e. price, brand, health-conscious factors)?
Some who have tried it said there wasn’t a particular reason that they stopped using it online, other than it just being not worth it if they could just go to the store themselves. Others addressed slight inconvenience at the logistics of the delivery aspect: minimums for delivery, certain times for delivery not being convenient (having to wait at home specifically for it to be delivered), and delivery charge itself.
One of the most common and notable insights we found through interviewing is that people sometimes prefer in-store shopping because they can physically pick their produce. The hands-on aspect of being able to see and feel which fruits and vegetables are freshest this week or which slice of meat looks best is lost in the process of online shopping.
Personas
Jane
Age: 48
Occupation: Office worker
Family: Married with two kids
Skills: Basic computer literacy
Bio: Jane’s husband has a busy work schedule, so usually she needs to take care of her kids solely on weekdays. However, she has no car. Therefore, she needs to take the tram to go to work, and when getting off work, she often buys some ingredients on the way home. Once a week, she buys some heavy or big groceries online, because she wants to spend more time with her family going outside on the weekends, instead of the whole family going to the supermarket.
Goals:
Make sure her family has good quality food to eat
Have more leisure time to relax
Frustrations:
Spends most of time on doing household work
Always feels tired after work
Peter
Age: 55
Occupation: Swinburne tutor
Family: Married, three kids over 18
Skills: Knowledgable computer literacy - teaches IT technology
Bio: Peter works a varied schedule, teaching classes at the university every Tuesday and Wednesday all day. He has no kids living in the house currently--they’re either at university or working full time. Peter typically drives to the supermarket and buys food in person. He’s ordered groceries for delivery a couple times, but it was a hassle to be at home at the exact time they were being delivered.
Goals:
Buy food for him and his wife once a week
Tries to choose healthier options with less cholesterol
Frustrations:
Delivery logistics
Not being able to pick out produce when ordering online
Tom
Age: 48
Occupation: University student, works part-time at fast food chain
Family: Living away from home
Skills: Computer and mobile literate - accustomed to online buying
Bio: Tom is a busy student studying business at university. He owns an older car, which he drives to his part-time job. Juggling study, work and social events means making time for grocery shopping can be challenging. He lives in a small apartment with some roommates, and he’s often tight on cash to pay for all his living expenses.
Goals:
Buy food when he runs out
Buy inexpensive foods to save money
Frustrations:
Browsing and buying on a phone
Finding what he needs quickly
Activity Diagrams
User Journey Map
Scenario:
Peter is on his laptop at home, remembers he needs to stock up on groceries for the week.
…but doesn’t want to drive to the store.
He opens up his computer and goes to coles.com
He opens up his saved shopping list, and easily adds everything to cart.
When choosing delivery options, he sees that the most immediate time for delivery is the next day at 3pm. He ideally would’ve liked the food to be delivered in time for dinner tonight, and finds that this requires him to change his plans.
Peter is frustrated with high delivery charge coupled with the not-helpful delivery times and finds that online grocery shopping is not as convenient as once thought. If he had decided to simply drive to the supermarket, this wouldn’t be an issue. He considers alternatives.
He places his order anyway. Peter inputs his saved payment details and clicks ‘place order’. Payment process goes smoothly.
Later that night, he makes the necessary preparations to receive the delivery by telling his wife about the 3pm delivery time, as he will still be at work at that time.
Food is delivered successfully.
Expectations:
Fast delivery
Convenience
Easy shopping experience
Opportunities:
Promote express delivery options
Affinity Diagram
Lewis, Min-Chia, and I wrote down everything we could think of about online shopping, supermarkets, and pain points we found from our interviews onto post-its, and grouped them on a whiteboard. As we moved them around, we found trends in savings, navigation, and interaction. Most notably, we found that interaction between customer and physical items was a major thing lacking in the the online supermarket shopping experience. Customers want to be able to hand pick the freshest produce by look and feel, and that’s currently not possible with online shopping. We plan on focusing on this deterrent as a cornerstone for our ideation process.
Mood Board
I wanted my mood board to represent freshness, have a clean-cut look, and include fun food typography. Lewis’s mood board focused more on a gourmet, artisanal look, while Min-Chia’s was heavily based around color-blocking with a sunflower yellow.
Functional Requirements
Product purchasing
Product purchasing needs to be simple, intuitive, and yield to design principles of feedback, visibility, and constraints. This includes features such as adding to cart, increasing quantity of an added item, etc. A functional purchase page is key to being able to buy online.
Navigation
An easily accessible navigation is a necessity for a usable website design. Being able to look through the aisles of a supermarket and find the groceries you are looking for is a key aspect of the in store experience. Similarly, no one wants to get lost in virtual aisles trying to find what they need. This is usually achieved in a range of drop down menus and category sorting.
Search
Similar to navigation, searches allows users to find important details and quickly move through the site to find a specific item. These functionalities are often implemented with a readily accessible search bar and a site FAQ.
Device usability
Supermarkets service a large range of users using devices that range from mobile to tablet to desktop. Our website has to be functional, responsive, and usable within all these formats.
Proposed Site Map
Content Matrix
Coming Soon!
Currently working on wireframing, sketching lo-fi prototypes, building hi-fi prototypes in Axure, usability testing, and a final iteration of the site.