WEB DESIGN
USER EXPERIENCE
Pumpkin Squash
Website design and build
3 months
Pumpkin Squash approached Pixel Dojo with a brief to design an online shop for their organic food delivery service in the North East of England.
The website would provide an alternative means to buying organic food from supermarkets that was local and from a trustworthy source.
We start our web design projects by understanding the problem and looking at the business objectives and needs of the user.
© 2022 Pumpkin Squash
1
Health conscious local people who believe in the virtues of organic food.
4
Currently and will continue as people become more health conscious and concerned about the environmental impacts of food.
2
People distrust the source and quality of organic food bought from supermarkets and finding a convenient local alternative is difficult.
5
The user will have an alternative to buy online from a trustworthy and local source.
3
The problem is widespread and is seen as an opportunity to deliver a website that enables people to purchase quality local organic food from a trusted source.
6
The user will buy online via the new website.
‘How might we design an ecommerce website to provide customers with an online solution to their needs for locally farmed organic food?’
Without measurable goals its difficult to ascertain whether a project has been successful or not. Smart goals are relevant, realistic and attainable and help guide your business to success within an agreed timeframe.
Pumpkin Squash aimed at converting 10% of its site visitors into paying customers in the first 6 months of trading.
What are the features or content that this website should include?
We agreed to creating a minimum viable product and concentrated on the most important core features initially for phase one of the project.
To avoid scope creep we drafted a scope document and added further requirements to phase two of the project.
Provide a responsive life-style themed ecommerce website with online system for customer order management and CMS for front-end product management.
Postcode search for delivery verification.
To grow an online community through recipe sharing, imagery and experiences and social channels.
User friendly website with easy to use shopping cart and front-end product display.
Website optimised for mobile.
Storyboards help to empathize with the user and make sense of how users might interact with the website.
A storyboard helps to communicate key moments of a customer experience with stakeholders
(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 our user 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 - that people distrust the source and quality of organic food bought from supermarkets and finding a convenient local alternative is difficult.
The storyboard is a visual reference combining user personas, user journeys and research findings that simplifies complex problems.
In order to help find potential solutions to the problems for Pumpkin Squash and their users, we performed the following types of UX research and data collection.
We used SurveyPlanet to research my client's ideal customer
We used this persona to:
The user research also identified the following user needs:
We examined the strengths and weaknesses of our clients’ competitors to reveal common features, examine content, styles and tones, social media engagement and calls to action.
Comparing features across industry competitors and our client’s recommended ecommerce websites.
We created user stories to better understand how user personas interact with the website in order to achieve their goals.
View user stories
As a result, I could identify what functionality to include in the website and define the core user journey.
Our core user journey
User journeys help us identify key actions within the website and what screens to focus on first.
Core user journey for mobile from homepage, product page, product details, basket and checkout.
With the discovery stage complete we move to the visual design stage which involves the creation of sitemaps, wireframes and website mockups.
We ensured that the website content was easy to find by working closely with my client to create a sitemap and a usable navigation system.
Pumpkin Squash sitemap showing list of website pages and how they relate to each other.
Wireframes visualise how the page content is to be laid out and what functionality should be included. It is an early stage in the web development process before any colour or imagery is added.
After defining the core user journey, we created a system map to enable us to see how users would navigate through the website.
They identify knowledge gaps, areas of complexity and provide a visual map for further discussion with my client.
Pumpkin Squash system map showing how a user navigating through the website
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.
The sum total of all the work up to this point. Mockups bring layout, typography and colours together whilst communicating the brand to the user.
The homepage is the website shop front and is tailored to the needs of the user.
The 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):
1
A standard placement for navigation conforms to a user’s mental models.
2
Informs the user and provides suggestions on what to buy.
3
Helps users navigate with an overview of products by category.
4
Provides helpful suggestions on what to buy.
5
For new customers. Sets customer expectations early on for a stress-free buying experience.
6
Seeks to educate the user about the benefits of shopping with Pumpkin Squash. (Validated by user research).
7
Social feed displays various photos adding new and regularly updated content to the website. Users can start conversations with each other through instagram.
8
Provides social proof and engenders trust in the brand.
9
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):
1
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).
2
Assists the user in product selection.
3
Helps users navigate and locate themselves in the page hierarchy.
4
Shop sections. Current section bold for easy page identification.
5
Clear descriptions and pricing with social proofing and ability to write reviews. (Supports findings in user testing).
6
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):
1
Ensure that the product meets the needs of the customer.
2
Inspire and assist users with food ideas and at the same time promote cross selling.
3
Educates users about organic. (Inspired by user research findings).
4
Ensures users know about delivery costs and company returns prior to checkout.
5
Helps buying decisions and at the same time promotes cross selling.
6
Social proof to enable users to make more informed buying decisions.
How it works informs new customers of the simple 3 step process of buying organic food from Pumpkin Squash.
Using glossy product imagery and handwritten fonts we brought 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.
Some vectors by Vecteecy.com
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 we created prototypes to test user interaction with the website.
• Prototypes test user interactions with the website and ensure there are no hidden problems.
• This approach reduces costs and saves time and is carried out before any code is written.
• Webflow was used initially to quickly build pages in HTML before handing over to the devs to add the bespoke shopping cart and content management system.
Starting with low fidelity wireframes we progressed 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.
We designed a user-centred checkout experience to drive conversions and minimise cart abandonment.
A ‘Guest checkout’ on desktop and tablet devices.
With a user centred website, my client now has the potential to establish and grow his delivery business in local organic food.
© 2022 Pumpkin Squash
Due for imminent launch, Pumpkin Squash will provide an alternative means to buying organic food for its health-conscious customers that is chemical free, trusted and supports the local community.
Need a consultation? We can advise
Whatever your business needs, we’ll create a great looking website that works for you.
Be first to receive offers and latest articles
