Frog SleepUI/UX, Web Design, Front End Development

The goal of this project was to provide a landing

page to promote sales of the Frog mattress.

It needs to be user friendly, responsive and

highlight what makes Frog unique from other

bed in a box matresses.

Frog is a high-quality, environmentally friendly and allergen free mattress that’s handmade in Canada. Frog uses only the highest quality organic and natural ingredients.

01 ResearchThe first step was to look into Frog’s competition to see what was

working for other bed in a box mattress brands. By searching the

websites of leading competitors, I learned what should be included

on the landing page to make it successful.

A comment element on the competitors websites was that they

all offered free shipping and a 100-night trial. This needed to be

prominently displayed on the landing page.

I also took note of the look and feel of competitor websites. They

all had a lot of white space, clean typography and soft, welcoming

imagery of bedrooms and mattresses. This helped outline a feel for

the design of the landing page.

02 Landing Page StructureOnce the initial research was complete, the next step in the process

was to lay out the structure of the page using wireframes.

The landing page would consist of different sections that all have

a call to action button that leads to the purchase section. Each

section would highlight a feature of the Frog mattress that makes it

a unique product worth purchasing.

The purchase section would feature a dropdown that lets the

customer choose what size mattress they want. Once selected, it

would lead to a secure checkout page via PayPal.

Any additional information like shipping information and warranty

details would appear in a modal to prevent the page from getting

cluttered with too much text.

Wireframe Sketch

The FROG landing page consists

of different sections. Each section

would have either a button that

scrolls down to the purchase section

or opens a modal that provides

additional, detailed information.

03 Design CreationThe next step in the project was to create a high fidelity design

mockup for the landing page to send over to the client for approval.

The colours for the page were chosen to have an nice, earthy and

comforting feel, with a pop of orange and teal from the logo to add

excitement. The entire site was designed using a lot of white space,

clean sans serif typography and very cozy looking images to make

the user feel relaxed and ready to curl up on a brand new mattress.

The site also used these soft, earthy tones to help promote

that FROG was environmentally friendly, a unique feature that

distinguishes this mattress from any other competitors.

LANDING PAGE DESIGN CONCEPT

Style GuideThe following colour scheme,

typefaces and icons were selected

for use on the Frog landing page.

COLOURS

TYPOGRAPHY

#f37751R: 243 G: 119B: 81

MUSEO SANS 700

MUSEO SANS 500

Museo Sans 500

Tagline

Section Titles

Body Copy

#76C0A6 R: 118 G: 192B: 166

ICONS

#e9e4dd R: 233 G: 228B: 221

04 DevelopmentOnce the concept was approved by the client and all copy was

finalized, the landing page was ready to be coded.

Frog is built using html5 and css3, with some jQuery scripts for any

modals. It is based off the Bootstrap framework to ensure that the

site is responsive to all devices. This allows customers to have an

optimal experience purchasing a new mattress no matter what

device they are on.

View the site: lydiakowalski.com/frog