A WEBSITE DESIGN CASE STUDY
Responsible for: User research, competitive analysis, systems map design, user flows, sketching, wireframing, prototyping, usability testing, visual design
Pumpkin Squash approached me with a brief to design an eCommerce shop for their organic and conventional food delivery service, in the North East of England. The website would provide an alternative means to buying organic food from supermarkets.
THE PAIN POINT
Some people feel that they cannot totally trust the source and quality of organic food bought from supermarkets and finding a convenient local alternative is difficult.
Pumpkin Squash saw this problem as an opportunity to deliver a website that enables people to purchase quality local organic food from a trusted source.
Health conscious local people who believe in the virtues of organic food.
Pumpkin Squash and its customers share the same values. A belief in the virtues of chemical free and sustainable organic food from local farmers that are trusted and vetted to the highest standards.
Our client needed a way to connect people with their local suppliers and a website was a way to do this.
I start my web design projects by trying to understand the problem by looking at the business goals and needs of the user.
Recommended reading: My UX website design process.
Create an eCommerce website to provide users with a solution to their needs for locally farmed organic food.
What I aimed to deliver:
- Responsive life-style themed eCommerce website with admin areas for customer order management and content management for client.
- Website design optimised for mobile.
- User friendly website with good content strategy so products easy to buy and information read.
- Postcode search for delivery verification.
- Grow online community through recipe sharing, photos, sharing experiences and social channels.
- Champion the benefits of organic food free from nasty chemicals with respect for the environment and its sustainability.
- Search engine optimised.
STORYBOARD THE PROBLEM
Storyboards help to understand what’s going on in the user’s world and make sense of how the proposed website can improve their life.
(1 – 4) We can see that the main character is struggling to make sense of the information on the product label she picks up. She leaves the shop unsure about her purchase.
(5 – 8) When she sees an advert for local organic food she is able to make a more informed buying decision by reading information about the product and customer reviews.
She is happy about her purchase and will no doubt use the home delivery service again.
What else does the storyboard tell us?
The issues that the woman is experiencing are directly related to the pain point that we identified earlier.
The storyboard is a visual reference combining user personas, user journeys and research findings that simplifies complex problems.
A food buyer survey revealed our ideal customers and their individual needs.
- The survey was conducted with 30+ respondents using SurveyPlanet.
- I asked 10 simple and actionable questions relating to respondent backgrounds, challenges/pains and goals.
The survey revealed the following buyer persona:
Heather the ‘Health Conscious Parent’
- Professional mother with 2 kids.
- 40 years of age.
- Busy, hectic lifestyle.
- Worried about future of environment and family’s exposure to chemicals in foods.
- Doesn’t trust food from supermarkets.
- Not sure that the information she reads is correct and needs scientific proof to buy more.
- Will pay premium for food that is sustainable with less toxins.
- A healthy family.
- Doing the right thing to help planet/protect children.
- Buy online is good for hectic lifestyle with kids and job.
- Prefers to buy locally.
- Needs a product that reflects her values.
- Bargain not important as long as she gets a food supplier that she trusts.
How to respond to their needs
- Promote convenience and scientific health benefits.
- Promote benefits of company that can be trusted to use chemical free local food.
I used this persona to:
- Speak the language of the user for content and headings creation.
- Formulate a value proposition for user problems that are solved.
- Increase conversions by having more relevant offers/promotions.
The user research also identified the following user needs:
- Scientific information about organic farming.
- An online store as an alternative way to shop to supermarkets.
- Need to support the local community and farmers.
I examined the strengths and weaknesses of my clients’ competitors to reveal common features, examine content, styles and tones, social media engagement and calls to action.
I created user stories to better understand how user personas interact with the website in order to achieve their goals.
As a result, I could identify what functionality to include in the website and define the core user journey.
Our core user journey:
- Look for a vegetable or fruit box.
- Add the box to the shopping basket.
- Provide user details and delivery details.
- Pay for the product.
User journeys help us identify key actions within the website and what screens to focus on first.
Wireframe prototype for core user journey (Desktop)
A system map enabled me to see how users navigate through the website.
They identify knowledge gaps, areas of complexity and provide a visual map for further discussion with my client.
Whereas system maps illustrate the wider user experience, user flows relate to how users complete specific tasks such as registration, purchasing a product and checking out.
Examining user flows help build a better user experience and as a result a more successful end product whilst focusing on the needs of the users and how they make decisions.
The following user flow demonstrates how a user makes a purchasing decision on the website.
From the homepage entry point they make their product selection and choose to checkout as a guest to minimise checkout time and inconvenience to themselves.
This flow would then be designed and built into the end website.
User flows facilitate the discussion of the website design between myself, stakeholders and developers.
The following user flow shows what decisions a user makes when checking out from signing-in to purchasing.
Content is king
I ensured that the website content was easy to find by working closely with my client to create a sitemap and a usable navigation system.
WIREFRAMES, MOCKUPS & PROTYPING
When our research has been gathered I then use these insights in the creation of wireframes, mockups and prototypes.
Recommended reading: My UX website design process.
The homepage is the website shop front and is tailored to the needs of the user.
Our aim is to push users down the sales funnel whilst educating them about the benefits of organic food and shopping with Pumpkin Squash.
Callouts (1 – 8):
- Horizontal navigation. A standard placement for navigation conforms to a user’s mental models.
- Hero. Informs the user and provides suggestions on what to buy.
- Shop by category. Helps users navigate with an overview of products by category.
- Popular food. Provides helpful suggestions on what to buy.
- How it works. For new customers. Sets customer expectations early on for a stress-free buying experience.
- The very best… Seasonal and local produce Seeks to educate the user about the benefits of shopping with Pumpkin Squash. (Inspired by user research).
- Instagram. Social feed displays various photos adding new and regularly updated content to the website. Users can start conversations with each other through instagram.
- Reviews. Provides social proof and engenders trust in the brand.
- Footer. Easily accessible help/company info/account links. Newsletter signup for email marketing and social links for users wishing to connect.
Only 3%* of online store visits result in a purchase but there are ways to minimise bounce rates
Source: ADI Report 2020
Designing product pages involves using quality images, informative descriptions, social proof and consistent calls-to-action.
Callouts (1 – 6):
- Cover image with text overlay and quick links – Cover image is used as a visual reference for the page. Text overlay will be used as a description with SEO rich content. Quick links enable the user to navigate to other product pages without scrolling (for both desktop and mobile).
- Filter/sort – Assists the user in product selection.
- Breadcrumb links – Helps users navigate and locate themselves in page hierarchy.
- Shop by categories – Shop sections. Current section bold for easy page identification.
- Veg boxes – Clear descriptions and pricing with social proofing and ability to write reviews. (Supports findings in user testing).
- Extras – Cross selling products to increase sells and boost customer satisfaction.
The product page is the most important page on the website. It describes the product and the company, builds trust through social proof and provides opportunities to upsell.
Callouts (1 – 6):
- Detailed product description – Ensure that the product meets the needs of the customer.
- Recipe suggestions – Inspire and assist users with food ideas and at the same time promote cross selling.
- Did you know? – Educates users about organic. (Inspired by user research findings).
- Delivery and returns – Ensures users know about delivery costs and company returns prior to checkout.
- You might also like… Helps buying decisions and at the same time promotes cross selling.
- Product reviews – Social proof to enable users to make more informed buying decisions.
How it works is a page to inform new customers of the simple 3 step process of buying organic food from Pumpkin Squash.
Using glossy product imagery and handwritten fonts I bring a human touch to the design which communicates trust and reassures new customers.
The help page aims to connect the user with customer services and find answers to questions in a way that is fun, human and reflects the personality of Pumpkin Squash.
The design guides users towards faqs and finding an answer for themselves before contacting customer services.
Recipes promote user engagement, drive sales and help grow the website through social channels and sharing.
User contributed content is important for search engine rankings and converting visitors to customers.
Blogs provide relevant content for customers and drive traffic back to the website when links are shared.
The website uses playful icons to categorise news, add interest and direct the user’s attention.
Once the website information architecture was completed I created prototypes to test user interaction with the website.
Starting with low fidelity wireframes I progress to high fidelity screens to establish a more realistic experience to encourage useful stakeholder feedback.
Good checkout design reduces cart abandonment by giving customers a friction free experience. Customers have a short attention span so the easier the process the less likely they are to leave a website without buying. I designed a user-centred checkout experience to drive conversions and minimise cart abandonment.
Objective: Streamline checkout process and remove barriers to buying.
Recommended reading: Reducing checkout abandonment.
A ‘Guest checkout’ on desktop and tablet devices.