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
Processed Through Our Client Sites Each Year Full-Time Staff
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
Of Australian households Of the Australian had a tablet by the end of population 18+ own a 2012 tablet device * Secure Insight Consumer Discovery * h ttp://stakeholders.ofcom.org.uk/binaries/ Report, November 2012 research/cmr/cmr12/icmr/ICMR-2012.pdf of mobile shoppers have stopped an in-shop purchase as a result of using their device, usually because they found a better price elsewhere * comScore, “ Mobile Shopping Goes Mainstream” *Gartner forecast The expected value of of purchases were made on mobile phones by the Of mobile shoppers make Australians spend 10% less online sales in Australia by end of 2012 online purchases while in time accessing the internet the end of 2013 a shop by desktop or laptops *eBay / PayPal, December 2012 *Experian, November 2012 * * comScore , “Mobile Shopping Goes * Nielsen PayPal Mobile Study, Oct 2012 Mainstream” of retailers don’t have in Australia, only 5% of Of the Australian of all eBay sales are of all PayPal transactions active PayPal users total retail sales are made population 18+ own a occur on mobile devices processed through a plans to create a mobile In Australia online smartphone mobile device optimised website as part of their online strategy *Alpha Digital, June 2012 * Nielsen PayPal Mobile Study, October *Experian, November 2012 *eBay, July 2013 *eBay, July 2013 *eBay, July 2013 2012
100% 90% 80% 70% • Aggregated data for 3 of our Magento EE retailers • Average online turnover for the three companies in 2013 was 60% $5m 50% • None of these clients currently have a mobile solution 40% • In 2011, tablet traffic accounted for less than 1% - by 2013 it climbed to over 10% 30% • Mobile (smartphone) access increased by 15% over two years 20% • Desktop usage dropped by over 25% over two years 10% • Over 92 different browsers accessed the site 0% • 20 different screen resolutions account for 95% of the 2011 2012 2013 2014? traffic – another 160 variations make up the remaining 5% Desktop Mobile Tablet
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 only 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 one 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)
OTHER 31% 3% 42% 14% 10% Conversion Rate site-wide Desktop 6.75% Mobile 2.41% Average visit duration Tablet 4.39% 1600+ 27.00% 1280x800 15.21% 1366x768 11.39% 320x480 9.88% Returning Bounce 1280x1024 7.16% Visitors Rate site-wide 768x1024 7.05% New Visitors 1440x900 6.76% Desktop 37.89% Average page load time 1024x768 6.55% Mobile 44.70% Other 9.00% Tablet 38.20%
Responsive Leverage all Embrace the Introduce a Convert first time Enable non- without of the principles of fresh design buyers into high- technical staff compromising functionality adaptive that reflects the value repeat to manage all functionality on native to device brands & customers aspects of the smaller break Magento design at key resonates with website within points Enterprise break points loyal customers Magento
We review our options and go with a more
1 Smartphones portrait 2 Smartphones Landscape | Mini tabs 3 Tablets portrait 4 Tablets landscape | Desktops 5 Tablets landscape | Notebooks | Desktops Each with a different set of style sheets 6 Notebooks | Desktop | High res screens Increased control over the design and UX 7 Notebooks | Desktop | Create app-like behaviour on mobile breakpoints 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
Navigation is Transition to small anchored at the logo to minimise top so it is always vertical real estate Search has shifted visible to the top navigation
Search bar slide down on click
Simply hide the the 4 column banner (least important promotional message)
Presentation of transitioning hero banner has changed Secondary promo banners previously in column 2 of the grid now appear here
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
Swipe action Mouse click
‘Modal window’ appears ‘Mini Cart’ slide down – user remains on giving the user the options product page
<input type=“email” /> <input type=“ tel ” />
It simplifies the checkout and allows us to better handle ‘guest’ abandonments
Nice clear validation Make entering CC details a no brainer Validate state and suburb via post code and cut out 2 fields
Post Transaction During Checkout
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…
Recommend
More recommend
