Designing for todays multiscreen reality @netstarter netstarter.com - - PowerPoint PPT Presentation

Designing for today’s multiscreen reality

@netstarter netstarter.com

• Why we went responsive
• Our approach
• The technical challenges
• What we would differently

Head of Strategy & UX

Full-Time Staff Processed Through Our Client Sites Each Year

Ben Wyeth (CEO of Active Skin) Established in 2006 A leading pure play retailer of skin care and beauty products in Australia Built a very successful online store in a very competitive market place

• f purchases were made on mobile phones by the

end of 2012

• f retailers don’t have

plans to create a mobile

• ptimised website as part
• f their online strategy

The expected value of

• nline sales in Australia by

the end of 2013

in Australia, only 5% of total retail sales are made

• nline

Of the Australian population 18+ own a smartphone

active PayPal users In Australia

• f all PayPal transactions
• ccur on mobile devices

Of the Australian population 18+ own a tablet device

• f all eBay sales are

processed through a mobile device

Australians spend 10% less time accessing the internet by desktop or laptops

Of Australian households had a tablet by the end of 2012

Of mobile shoppers make

• nline purchases while in

a shop

• f mobile shoppers have

stopped an in-shop purchase as a result of using their device, usually because they found a better price elsewhere

0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

2011 2012 2013 2014?

Desktop Mobile Tablet

• Aggregated data for 3 of our Magento EE retailers
• Average online turnover for the three companies in 2013 was

$5m

• None of these clients currently have a mobile solution
• In 2011, tablet traffic accounted for less than 1% - by

2013 it climbed to over 10%

• Mobile (smartphone) access increased by 15% over two

years

• Desktop usage dropped by over 25% over two years
• Over 92 different browsers accessed the site
• 20 different screen resolutions account for 95% of the

traffic – another 160 variations make up the remaining 5%

1.

• This is not really a solution – it’s more a decision to do nothing
• Typically designed for a 1024 x 768 resolution – the most

practical option a couple years back when desktops were the

• nly concern
• Rely on the mobile browser simply scaling the website to fit

the available width

• Still renders reasonably well on some tablet devices
• Assume the size is going to ‘kind of work’ for everyone, but

accept there are going to be definite usability issues – frequent miss-taps, poor readability, constant need for pinch zoom, difficulty completing forms

• Not tolerable for much longer as users become more familiar

with a mobile optimised interface and demand a better experience

2.

• The concept of a separate mobile site is a dated solution
• Simply a desktop site optimised for a small screens –

does not cover tablets and other emerging devices (screen are getting larger and smaller simultaneously)

• Operates within popular web browsers native to the

device

• No installation required
• Duplicate content issues
• Natively supported by Magento
• Can be implemented reasonably quickly using Magento

‘out of the box solution’

3.

• Written for specific operating systems
• Feature rich with a tailored experience – generally a better

experience than a mobile site (but only for the specific device)

• Still issues with resolution size for different devices
• Not sustainable due to the proliferation of different mobile

platforms and frequent OS upgrades

• Prohibitively expensive to develop with significant ongoing

maintenance costs to different code bases

• Difficult to gain traction with users and even harder to get

exposure on market places

• Can still be suitable in a B2B context

A framework that uses media queries, fluid grids and flexible images to create an adaptive site that caters for different devices, screen sizes and user goals

COMMERCIALLY VIABLE | DEVICE AGNOSTIC | USER FOCUSED

• Active Skin had outgrown their current system
• Conducted a platform review and identified

Magento Enterprise as the best fit

• Go to tender with a high level requirements

brief – ‘mobile friendly’ listed as must have

• We dangled the ‘responsive carrot’ to get this
• ne over the line – in fact we pretty much

threw it in like a set of steak knives

little

• Loaded with functionality
• Complex category structure
• Customised configurable products
• Different attribute sets for different categories

(6-15 filters for each category)

Desktop 6.75% Mobile 2.41% Tablet 4.39%

Conversion Rate site-wide

Returning Visitors New Visitors

Bounce Rate site-wide

Desktop 37.89% Mobile 44.70% Tablet 38.20% 1600+ 27.00% 1280x800 15.21% 1366x768 11.39% 320x480 9.88% 1280x1024 7.16% 768x1024 7.05% 1440x900 6.76% 1024x768 6.55% Other 9.00%

42% Average page load time

OTHER

31% 14% 10% 3% Average visit duration

Responsive without compromising functionality on smaller break points Leverage all

• f the

functionality native to Magento Enterprise Embrace the principles of adaptive device design at key break points Introduce a fresh design that reflects the brands & resonates with loyal customers Enable non- technical staff to manage all aspects of the website within Magento Convert first time buyers into high- value repeat customers

We review our options and go with a more

• Each with a different set of style sheets
• Increased control over the design and UX
• Create app-like behaviour on mobile breakpoints

1 2 3 4 5 6 7

Smartphones portrait Smartphones Landscape | Mini tabs Tablets portrait Tablets landscape | Desktops Tablets landscape | Notebooks | Desktops Notebooks | Desktop | High res screens Notebooks | Desktop | High res screens

A collaborative approach Everyone needs to be involved from the outset of the project Requires an ‘Agile’ approach through each stage Development before design Rapid prototyping Validate ideas and demonstrate proposed behaviour Manage customer expectations Functional wireframes and approved designs for all interfaces at each breakpoint

Search has shifted to the top navigation Navigation is anchored at the top so it is always visible Transition to small logo to minimise vertical real estate

Search bar slide down on click

Simply hide the the 4 column banner (least important promotional message)

Secondary promo banners previously in column 2 of the grid now appear here Presentation of transitioning hero banner has changed

Mobile styled navigation

Lost the description Only display one secondary banner

Search always displayed

• Only three top level categories
• A clunky filter limited to ‘type’

and ‘brand’

• A very unhelpful ‘site search’

feature

• Unable to group colours

resulting in a messy grid showing only one product

• Enable multi-select on attribute values
• Preserve the parameter in the URL so users can navigate with the

browser back and forward buttons (very common on mobile devices)

• Canonical tags to prevent duplicate content issues with filters

Mouse click Swipe action

It simplifies the checkout and allows us to better handle ‘guest’ abandonments

Validate state and suburb via post code and cut out 2 fields Nice clear validation Make entering CC details a no brainer

During Checkout Post Transaction

FAIL

1

2

• Assume a mobile strategy could improve the conversion rate on Tablets and Mobiles by 20%
• The client would be looking at roughly another 410 orders and $26.5k in sales each month

3

• A good framework is a good starting point
• Borrow ideas and snippets and build into your own

code stack

• Magento has its own patterns and frontend practises

you need to be mindful of

• Be cautious of ‘responsive templates’ for Magento

4

Sometimes an adaptive interface for popular devices may be more practical…

5

Things change very quickly over a year…

Screen Size June 2012 June 2013 1280px + 46.5% 35.5% Tablet portrait 9.8% 17.2%

6

A Responsive Design can alientate existing customers who are resistant to change – even if it is for the better.

7

• Try them out for both promotional and

transaction emails

• Integrate well with most campaign clients
• There are still compatibility issues with

certain email clients

• Plenty of great templates are available

8

9

It not just about a sexy interface, its about quality content in a format and structure that works across all devices and screen sizes

10

Are they experienced with Magento and do they have any live examples for you to review?

@netstarter netstarter.com

Win a trip to

Imagine 2014

Remember to drop answers at registration desk