In-store Kiosk

Prototypes:
Home Page and
Product Page

Client: Loblaw Cos. Ltd.

Designer: Alexei Michailowsky
Due Date: October 19, 2016

1. The Current Loblaws Website

1.a. Home Page Online Shopping

1.b. Sample Product Page

Loblaw has incorporated an online shopping system to its grocery store

network website in 2014-2015. Its click and collect system is available
at some of its stores and can be reached from the carousel on their
website. It can actually be accessed from both slides, with the probable
intention of calling the users attention and letting them know about
that possibility.
Right below the carousel, there is a selection of flagship products
including some specials and the users can send them to the online
shopping cart right away. If they choose, they can click on the product
name and get more information before they buy. These are actually the
product pages, which look very clean and have product names
available on large bold fonts. The product picture takes approximately
half of the horizontal space of the page, and its large enough for the
customers to visualize the product in detail and make sure its their
desired product. A good amount of white space, here, is implemented
to avoid confusion and call attention for the essential features of the
page: picture, title, store choice button and add to list button. There is
not a search bar on the top header.
Loblaws colour scheme is minimalistic, based on white backgrounds for
the body parts and black backgrounds for headers.
This project aims to design the prototypes for a kiosk home page and a
kiosk product page. Loblaw wants to open some small neighborhood
stores and hopes this system will help them offer a great service with a
large number of products without having to use large commercial
properties. Somehow inspired by British electronics retailer Currys/PC
World, the new Loblaw neighborhood stores will allow customers to
make their requests on digital kiosks, pay with credit card and collect
their groceries shortly after in a specific counter.

2. Competitor Analysis
In Canada, not all grocery stores have implemented a click-and-collect
system. Walmart has started to implement it on its stores in 2015. Their
website features a small stripe taking the user to more information
about the service. However, its not as user-friendly as Loblaws, since
Walmart does not have the same focus on food products and needs to
feature a much broader range of products on its website. Its system is
also based on mail purchases.

On its product pages, Walmart also favors a simple design with essential
information and online shopping buttons (add to cart and add to
list). It seems to be more straightforward than Loblaws (the add to
cart link is very visible and easy to find). The pages include a very
convenient Walmart standard search bar, but suffer from poor
typography. There is not a proper balance between the product image
and the title with the product name. Images actually dominate the
screen, while they should blend with the title and the product
information text to make it easier for the user to get what he needs to
make a decision as quickly as possible. This shouldnt be the way to go
on a kiosk page, where the system must facilitate quick shopping.
For its, part, Qubec-based IGA grocery stores offer an online grocery
platform as well. However, at least from the desktop version of their
website, the link leading to online grocery is not highlighted in any way.
Like Metro (another competitor) sometimes does, IGA highlights
recipes on its main web page.

For its product pages, IGA follows the same general principles of
Walmart and displays only the essential information with the needed
tools for making purchases (add to cart and add to list). White space
is also widely used, there is a big search bar and the page is dominated
by the product picture. About the title, the fact that a much larger font
size (compared to the other text parts) is used ends up being more
positive than in Walmarts case and makes the title easier to read.

Finally, Grocery Gateway (now owned by Torontos Longos grocery

store chain) is the pioneer online grocery shopping system in Canada. It
launched in 1999 and its website has been designed exclusively for
online shopping. All the navigation links that appear right on the home
page are made to guide users on their online grocery purchases. Its
perfectly suitable for a websites desktop version and includes all the
tools for smooth navigation: a search bar, signup and login tools, list
directories and the shopping cart. It seems to be a well-designed and
well-planned straightforward system.

Product pages on the Grocery Gateway are designed in a way that,

unlike other online grocers, evidences the purpose of convenience for
the online shopper. The search bar on the top header and the drop-down
menus on the left are strictly online shopping tools and the products are
presented on a card-like structure dominated by product images and
titles these elements look very well-balanced between each other
and featuring buttons, ratings, price information and basic information
on the product (in addition to a read more-like link where the user is
taken to more detailed information on the product.
The alternance of shades of green, gray and white in the background is
a good solution for the white space question. The white space still exists,
but in this case it seems clearer that it is part of a concept instead of
simply being there because it is important to concentrate the users
focus on product pictures and information (so there wouldnt be any
reason to use another colour or create any graphic element).

3. Thumbnail Sketches
3.1. Home Page

3.2. Product Page

4. Prototype

4.1 Home Page

The Loblaws kiosk prototype is not necessarily based on the companys
website, which has very specific features for the Web format and not for an
instore kiosk. The layout is simple and straightforward, with plain background
colours (there are no background images) and a high emphasis on contrast to
facilitate the viewing. There are 16 aisle buttons, based on Loblaws online
grocery shopping system and displayed on a shape of L. Each one is displayed
in a different colour that somehow evoke the products.
There is a support screen (with white background) on the center right of the
image. The reason why it is positioned there is to connect it to the advanced
help icon. It is important to make things easy for the first-timer users so
whenever they get lost they can click the icon quickly and talk to a member of
the staff through audio conference.
In addition to the aisle buttons, the support screen and the right-side icon,
there is a top bar with the company logo, a search bar that will open a virtual
keyboard on the screen, and three icons: online help, list and checkout.

4.2 Product Page

The product page prototype is based on a very simple design, with a plain
white background and a black product card. This element includes the
product photo, the title, the price, a button where the user defines how many
units he will buy, add to list and add to card options.
A left-sided navigation bar with green buttons helps the user to move from
page to page, and the advanced help icon is moved to the left. It is available
on all pages so the user can quickly refer to it and have support in real time
from a staff member.

The top navigation bar (which blends on the page body thanks to the same
white background) features the three essential buttons: online help, list and
checkout.
Below the product card, there is a navigation bar that opens a virtual keyboard
on the screen.
Both pages have been created to be as user-friendly as possible to any kind of
user, including seniors and people with disabilities. Buttons are generally large
so no one will find it hard to click and navigate.