Re-designing an online grocer

Stef Donovan
Jan 10, 2020
3 min read

Project background

I was tasked with providing a suite of features required to allow businesses to sell and market their products, CanBasket provides opportunities for local businesses to serve their customers better and grow within their community. I was approached by CanBasket through a Fiverr gig to help them with their navigation, as well as the usability of their home, store, and product pages. I looked specifically at improving the usability, user flow, and visual appeal of their existing site.

Role

UI design
UX design

Skills used

UX consultation
Creating UI & documenting interactions
User flows
Wire-framing

Tools used

Sketch
Zeplin
Fiverr

Notes from the client

Look at the signup, login, and basket buttons within the header navigation. The basket should be more prominent and noticeable.
The left panel navigation for the category section needs to be redesigned. it should be the same on all pages except for the homepage.
On the homepage: 'Are you a seller/Are you a Courier/Are you a Shopper' needs to be given much prominence or should take less space.
The colour theme is yellow and green but use it sparsely.

Identifying User and Business Goals

I started by looking at CanBasket.co to try and understand the tasks users might need to perform on the pages I was touching. I was able to identify the following primary user and business goals:

Goal: Have users enter their delivery address accurately. Why? Nearby stores are generated based on where the user is located. Having an accurate address entered early into the experience ensures accuracy on their end and ours. How? To provide the best experience for CanBasket's users I proposed the following recommendations: - Introduce a browser-triggered notification that requests for CanBasket's permission to access the user's location. Clicking 'allow' gives us a general location for the customer. - Content be introduced to inform customers that the service is currently only located in Saskatoon to prevent users from outside cities from going any further and getting frustrated. - Improvements to the functionality of the existing search bar UI to restrict results to addresses within CanBasket's delivery zone.
Goal: Have the user easily be able to understand the purpose of the service, and how to interact with it Why? As a new business, it is necessary to inform their audience about what they do so store owners, consumers, and potential partners understand what they offer and how they can benefit from using their service. Understanding improves trust and adoption so which is key with new consumer services. How? To help CanBasket's audience understand what their service is about, what they offer, and how they can become a partner, I made the following recommendations: - Guide the experience for different user audiences. I implemented a 'How it works' section that segments customers from stores so that both audiences can easily understand the break-down of their business. - Provide banners at the top of the pages in order to give the user a better context as to where they are in the experience, and what they are viewing. Improved usability helps users to navigate and digest information more easily.
Goal: Make it easy to select and view products Why? The overall goal is to get users to select products, choose a time slot, and pay for their service. If it isn't easy to select and view a product to get more information then it won't likely convert to sales for their business. How? I made the following recommendations to make it easy to view and select products: - I looked at existing food delivery websites like Walmart Grocery, Metro, InstaCart, and UberEats for inspiration. After some analysis, I was able to design a card and user flow that allows users to both view the product in detail and select it from a quick view. - I added a secondary navigation element to help separate categories from special deals, promotions, and favourited items.

Styleguide

Canbasket had a logo but didn't have a style guide. I created a style guide for them so that I would have something to adhere to while creating the UI for the requested enhancements.

Wireframes

Homepage

Requirements: Look at the signup, login, and basket buttons within the header navigation. The basket should be more prominent and noticeable. My goals:

Make it easy to select and view products
Have users enter their delivery address accurately.
Have the user easily be able to understand the purpose of the service, and how to interact with it

Before user has entered their delivery address

After user has entered their delivery address

Navigation

Requirements: The left panel navigation for the category section needs to be redesigned. it should be the same on all pages except for the homepage. My goals:

Make it easy to select and view products
Have the user easily be able to understand the purpose of each category and understand how to interact with it

Suggestions:

To make navigation easier on mobile, having high-level categories on the top is the best choice.
Left-hand navigation should be reserved for further filtering within a store