The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
-
Upload
dara-pressley -
Category
Design
-
view
279 -
download
0
description
Transcript of The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
![Page 1: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/1.jpg)
Dara Pressley @UXDiva
The Perils of Taking Great UX Commerce Mobile
![Page 2: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/2.jpg)
The greatest peril for the mobile strategy of Enterprise
is the audacity of the user
![Page 3: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/3.jpg)
–Karen McGrane | Content Strategy for Mobile
“Users insist on consuming content on the device most convenient to them.”
“They decide how and when to access your content, not you.”
![Page 4: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/4.jpg)
Too often Enterprise makes assumptions about the experience they should create on mobile which are often a great departure from the
experience that users are expecting.
![Page 5: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/5.jpg)
Flickr: "Curbside Cookoff 2010 Lobster Truck" by Mr.TinDC CC: Attribution-NoDerivs License
CustomInk certainly did not expect users to create T-Shirts on their mobile devices in 2011. But Mr. T used his mobile phone to design his products while waiting for customers.
![Page 6: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/6.jpg)
Obstacles Going Mobile
• Technology
• Content
• Responsive vs. Optimized
• Full Scale Redesign vs. Iterative Changes
• Mobile Friendly vs. Mobile Experience
• Internal Politics
• Change Management
• The Bottom Line
![Page 7: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/7.jpg)
A few examples
![Page 8: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/8.jpg)
NPR & COPE
Create Once, Publish Everywhere
![Page 9: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/9.jpg)
NPR is the poster child for content done right
- COPE separates the data from the interface so that that same dataset can be published to multiple interfaces.
- Using a taxonomy system complete with proper tagging, categorization, and meta-data, the same content can be used beyond the website.
- In fact, data can be moved even beyond mobile and tablet. NPR data currently streams to iTunes.
- With a multichannel strategy, the data can be pushed to social platforms, and internet connected devices such as cars and stoves.
![Page 10: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/10.jpg)
CMS
COPE
& More
![Page 12: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/12.jpg)
The Responsive Onion
![Page 13: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/13.jpg)
images: mediaquir.es
Publishing lends itself nicely to responsive design.
- Text easily bends to fit the space
- With image optimization, images can be delivered at a size and weight best suited to the device.
- Here you see The Onion has figured out how to reset ad placements per device so that the ads are not just clumped at the bottom.
![Page 14: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/14.jpg)
The Optimized Amazon
![Page 15: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/15.jpg)
• Amazon started in mobile long before notions of responsive design.
• Each property is optimized for the best experience.
• Window Shop for the iPad is so lovely, users may spend more than they had bargained for with out realizing
• just click, click, click
• Amazon has among it’s properties
• amazon.com
• amazon.com mobile
• Mobile Apps
• iPad Window Shop
• If the Kindle is an optimized book buying/ reading experience
• on Desktop, Mobile Apps, Tablets and the Kindle Tablet(s)
![Page 16: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/16.jpg)
Desktop Window Shop
Mobile Web
![Page 17: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/17.jpg)
An Iterative Make over
![Page 18: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/18.jpg)
The design is dead Long live the redesign
• The Guardian is working on redesign a responsive mobile first design
• while still keeping the current desktop design active
Working in the background
![Page 19: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/19.jpg)
So…. This is all great for content driven sites. !
What if your site is made up of applications?
![Page 20: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/20.jpg)
The Banking Industry
Mobile is a chance to be innovative.
Banking systems:
- Old technology makes it difficult for banks to update their systems for internal apps and customer facing websites.
- Mobile was a chance to start fresh / be innovative
- These interfaces are easier to use than the full site and much more pleasing
- I spoke with a Wells Fargo UXer (2 years ago) who was struggling to make the same games on their desktop property, and it hasn’t happened yet…
![Page 21: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/21.jpg)
Just imagine the experience of a brand new bank today
![Page 22: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/22.jpg)
• Each nuance of Simple is a delight.
• Simple is banking done right on desktop and mobile.
images: zagg.com
![Page 23: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/23.jpg)
Time Warner Cable
• The goal of their redesign was to move from static HTML page to a Content Management System
• Their plan was to create first an optimized desktop site then mobile.
• Mobile needs changed their strategy
• Users needed to be able to buy services
• And Users needed to be able to get help with their services
• Both of these needs had to be filled for when the user is not on desktop based internet
![Page 24: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/24.jpg)
Content & Change Management
• Time Warner Cable quickly found that in order to support the content needs of their new management system they needed to have the right team in place
• Companies that understand change management ahead of time, or adapt, will be most successful in creating their experiences
![Page 25: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/25.jpg)
Don’t judge a mobile experience based on a current experience that
doesn’t exit.
Internal Politics
One of the biggest obstacles to creating a mobile experience is just
getting started.
![Page 26: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/26.jpg)
CustomInk Making the Decision
to go Mobile
![Page 27: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/27.jpg)
6 CustomInk’s Design Lab
![Page 28: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/28.jpg)
• Early 2011 CustomInk mobile traffic was less than 10% — much lower than other retailers
• Most of over all traffic came from Customer Referrals, SEO, and Paid Search
• Landing on the site on Mobile resulted in an error page “Oops! You are in uncharted territory.”
• As a company, CustomInk wanted the experience of their site to be awesome, and that was only happening on the desktop.
• Rather than let mobile users choose to “pinch & zoom” desktop pages, their path was simply blocked.
• Natural search began to send more mobile users to the site
• For the most, those users were not returning on their desktop
![Page 29: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/29.jpg)
Flickr: "Curbside Cookoff 2010 Lobster Truck" by Mr.TinDC CC: Attribution-NoDerivs License
Remember this guy…
6
This is what he’s working with
![Page 30: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/30.jpg)
• With the error page removed, users could browse the site
• Early 2012, CustomInk began spending on TV ads
• Viewers were browsing the mobiles for more information
• By Q3, mobile traffic had almost doubled
• Fixing the Design Lab to work on touch devices allowed mobile users to save their designs.
• And of course… sharing brought people to the site from whatever device they were currently on.
![Page 31: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/31.jpg)
Fresh take on mobile
9
Booster Fundraising Not having to worry about the impacts of the main site, Booster was a chance to take a look at mobile
Fundraisers are meant to be shared and therefore created an inherit need for Booster to be available on what ever device the user chose to view.
![Page 32: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/32.jpg)
What Drives CustomInk Mobile Usage?
• TV commercials
• Sharing
• Group Purchase
• Booster
What drives CustomInk mobile usage?
• Macro trends
• TV commercials • Email • Facebook
14
![Page 33: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/33.jpg)
What do mobile users want to do?
![Page 34: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/34.jpg)
“While I realize there are limitations for the site
developer, as a general rule, I feel that anything available on the site should be available on
mobile.”
Users wanted to be able to do the same tasks on their mobile as their desktop.
![Page 35: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/35.jpg)
The way ahead | CustomInk
• Creating a strategy that includes mobile while still continuing to enjoy the same gains in sales is both exciting and terrifying
• All of the strategizes mentioned before come with wins and risks
• Let’s just do what works for each experience in the site
• So that users can use the device most convenient for them
Starting with baby steps
16
![Page 36: The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014](https://reader033.fdocuments.in/reader033/viewer/2022060118/558b0ec7d8b42a465a8b45c0/html5/thumbnails/36.jpg)
Thanks!
Dara Pressley
Lead User Experience Designer
@UXDiva