SiteOne App

Project Overview

SiteOne is a large landscape supply company that sells to businesses and contractors.

I set out to make ordering and finding your way around much easier on a phone than the website was.

Challenge

Ordering on the SiteOne website was hard on a phone.

Approach

I mapped the user flow, drew wireframes, designed the screens and built a small design system.

Basic Wireframe and User Flow

A user starts on the login screen. It has two buttons, one green and one gray. The next screen shows the login inputs with a keyboard, so the first thing a user does is sign in.

After that, the main screens sit behind a bar of four dots at the bottom. From the home wireframe, with its image and map, a user can move to shop, to the locations map or to the account page. Shop opens a grid of categories. The shopping flow goes from category screens to a product list and then the cart.

The locations screen is its own stop, with a map and a route line. The main screens share one bottom bar with Home, Shop, Locations and Account.

Click any picture to see it full size.

Home Screen

The home screen is one scroll that runs from the header down to the navigation menu. The seven parts are listed here in order. Prices and store hours in these screens are illustrative.

1
HeaderThe logo, a search field and a green cart button sit at the very top.
2
HeroAn offer banner on a photo is the first big thing a user sees after the header.
3
Locations ModuleA small map with pins and a row of nearby store cards puts the closest stores on the first screen.
4
Deals ModuleA weekly deals strip shows product photos with prices and an add button, so offers are one tap from home.
5
Team PageA photo of two people, a short message and a button lead to the team, which puts a face on the brand.
6
Support CenterThree green tiles with icons for tools and resources, learn and events keep help close to the shopping.
7
Navigation MenuThe bottom bar has Home, Shop, Locations and Account, so every main area is one tap away.

Shopping Section

The first screen is a grid of category photos, two across: landscape supply, nursery, equipment, lighting, irrigation and hardscape. Photos let a user spot a category at a glance, before reading a label.

The second image goes one level down. One screen has category tiles under a photo banner, and the next lists products with a photo, a name, a price, a star rating and an Add to Cart button. Most items have a green Add to Cart button. An item that cannot be added shows a gray See Inventory button in place of Add to Cart.

Store Locator

The map fills the top of the screen. Green pins mark stores and a green line traces a route, so a user sees where the stores are before reading anything.

Under the map, a store card gives the store name and address, the distance, a Get Directions link, a phone number and the store hours. A second card starts at the edge, which hints that more stores are a swipe away. A green My Store mark with a check shows which store is the user's own. The hours shown are illustrative.