B & O Play

Website design analysis

START

Junchen chenE-commerce Personal project

CONTENT

INTRODUCTION

Page layout

NAVIGATION SYSTEM

Checkout funnel

MULTI BROWSERS FUNCTIONALITY

Interactive design

INTRODUCTION

Band & Olufsen

Founded in 1925 by Peter Band and Svend Olufsen, whose

First significant product was a radio with a trending style.

This company manufactures a highly distinctive and exclusive electronic products such as television, loudspeakers, telephones, and multimedia products combining technologies with emotional appeal.

In order to achieve those high quality products, B & O applies it acoustic skills and design competences in creating high-performance sound systems.

INTRODUCTION

Band & Olufsen + play = B & O PlayFour key points heritage from B&O

Visual beauty Crystallizing the fundamental user needs through the engineering phases

Natural and balanced to reproduce emotions

fit human needs

INTRODUCTION

Band & Olufsen + play = B & O Play“PLAY” Definitions

Curiosity Energetic Positiveness

Page layout

Website keywords Searching

Search those keywords on main stream searching engines in US to find out ranks of B&O Play

Page layout

Results of Searching

bing + = Ranks out of top 100!

Page layout

Page Templates

Three boxes

Simple, allow to put large and hi-definition pictures to attract people`s attention.

Featured graphic

Lack of distraction Easily being read

Page layout

Homepage Advanced version of three boxes.

First full screen area used to promote new product

Following blocks are gates to detailed product pages

Page layout

Detailed product page

Extremely straight ford to present product details.

Theme is super clear: showing product

NAVIGATION SYSTEM

NAVIGATION SYSTEM

B&O Play navigation system structureTwo components

Top navigation blocks

Bottom navigation system

NAVIGATION SYSTEM

Homepage top navigation block

Clearly show product categoriesSimple Purchase orientated Icon design is brilliant

NAVIGATION SYSTEM

Detailed product page top navigation block

Additional page jump function

miniature table of contents Quickly jump to interesting block

NAVIGATION SYSTEM

Detailed product page top navigation block

Button enabling people go back to homepageMaking homepage as the central hubAvoiding people to lost their way

NAVIGATION SYSTEM

Purchase orientated design

Every page is embedded the gate to checkout funnel, which is extremely to find out

NAVIGATION SYSTEM

Bottom information block

Provide further information about website, and available contact method

Checkout funnel

Checkout funnel

Checkout page design

1

2 3

Progress indicator is a good guideline for customers

Double emphasize the location of checkout funnel

Summary block reminds people how much they have to pay all the time

Checkout funnel

Multi available payment

Include main stream online payment methods

Checkout funnel

Trust and security

Lock icon and “secure checkout by Amazon” put in every checkout page to tell people it is safe if they purchase on this website

MULTI BROWSERS FUNCTIONALITY

MULTI BROWSERS FUNCTIONALITY

Brilliant multi browsers functionality Tested by tool named MultiBroswer, B&O Play website can open and display it well on almost every popular electronic devices:

Iphone Android phone Tablet Major browsers

MULTI BROWSERS FUNCTIONALITY

Drawback

Since many large and almost full screen pictures, displaying results are not perfect on some small screen devices like Iphone4s.

Interactive design

Interactvie Design = playful

Animated graphics and videos embedded in everywhere!

Interactive design

Interactvie Design = playful

Static graphic transform to animated pictures by your click!

Interactive design

THANK YOU