MobileSite

Improving mobile site UX and ROI through research and design

jd@moorexpert.com | www.moorexpert.com | summer 2012

moorexpert

T DriversEd een
Case Study
I Drive Safely Objectives Approach
1. 2. 3. 4. 5. 6. 7.

moorexpert

State Approved Traffic School & Defensive Driving Online Courses, offering a teen-specific Drivers Ed product. Improve the User Experience of a mobile-driven search, discovery, and decision use case by re-designing the mobile sites teens homepage. In other words, make the teen mobile website better at capturing consumers and driving sales. Consider typical teen mobile search activity Evaluate positioning in search results Analyze existing design and content strategy Conduct User Research, focusing on competition Analyze data and highlight emergent themes Develop wireframe alternatives Propose re-designed prototype

jd@moorexpert.com | www.moorexpert.com | summer 2012

Mobile Search
Frequency of search engine use on smartphone

moorexpert

Number of search results pages viewed on smartphone

Frequency of search engine use on smartphone (18-29 y.o.) This chart shows us that almost three-quarters of 18-29 year olds are using their phones to search for and access mobile content. Source: www.ourmobileplanet.com

Number of search results pages viewed on smartphone (18-29 y.o.) This chart shows us that most 18-29 year olds do not bother to navigate past the first or second page of mobile search results. Source: www.ourmobileplanet.com

jd@moorexpert.com | www.moorexpert.com | summer 2012

Search Results

moorexpert

8th

First Page search results 59% of Americans aged 18-29 do not view search results after the first page. (source)

Second Page search results 83% of Americans aged 18-29 do not view search results after the second page. (source)

Third Page search results I Drive Safely is positioned on the third page in 8th place (6th after advertisements).

jd@moorexpert.com | www.moorexpert.com | summer 2012

T op-levelAnalysis
This is a non-standard design pattern for video content. The text, Watch Our Video and Learn More is superfluous and should be replaced with a compelling still frame image from the video. (Think YouTube, Hulu, etc.) What do teens really think about this image? How does it impact the overall impression of the brand/site? Exciting? Relevant? Cheesy? It should be tested, and perhaps re-introduced as the video still frame image to conserve on precious mobile site real-estate. State-selection drop-down and Go button pair give the site an antequated feel and forces visitors to work to access the product. IPbased state detection and/or a simpler call-to-action is preferred. This FREE DMV test is a compelling offer, but it is drowned out and de-prioritized. Assuming most consumers would want this, it should be prioritized as one of the primary call-to-actions to drive engagement. The bullet points may be easy to glaze over--especially on mobile. Additionally, the listed order should directly correspond to the real-world priority for the would-be teen driver. Are Cool animations really more important than making sure your pass your DMV Permit Test? (Note the typographical error, your; this damages the brand.) Furthermore, is the phrase Cool animations, relevant in todays teen vernacular?

moorexpert

1 2 2 3 4 5

1 3 4

5
5

jd@moorexpert.com | www.moorexpert.com | summer 2012

User Research
A small sample of persona-based study participants who had recently searched for online California DMV test study guides was asked to use a smartphone to search for drivers ed online and evaluate the first six competing products based on a real-life search and discovery use case. The discussion guide was formed of questions for each mobile site: 1) What is the price for the course in California? 2) Does the purchase offer a guarantee? 3) How many questions does the material include? 4) Does the service offer a mobile version or app? 5) Does the content seem up-to-date? 6) What would you say about the site from a teenagers perspective? The teen.idrivesafely.com site was then discussed in more detail, and thoroughly compared to five competitor sites and products. To debrief, overall preferences and impressions were discussed as the participant re-visited each site and elaborated on their experience. This approach captured would-be consumer expectations, realistic mobile search and navigation behaviors, competitive product analysis, and overall impressions and preferences related to the search and aquisition aspects of suitable online DMV test study material using a smartphone.

moorexpert

Participants used an iPhone 4S, Safari mobile web browser and Google search engine. Each session was recorded using AirPlay and Silverback.

jd@moorexpert.com | www.moorexpert.com | summer 2012

EmergentThemes
Searching for an online course or tests is
somewhat challenging on the iPhone, but actually consuming the content on a tablet or mobile device could be quite compelling. teen.idrivesafely.com
scored 2 out of 6 on the mobilefriendliness scale according to Google

moorexpert

Succinct descriptions of the product offering

are essential, covering a few key aspects such as: price of service; course format; guarantees and assurances (e.g. DMV approvals).

Information architecture of the site, usability,

and style, should all correspond to the device the site is accessed on as well as the target demographic (e.g. a mobile version for teens).

Mobile versions of the site should support

device detection, avoid too much text, prioritize critical content, and use UI components with high affordance for the touch-screen.

Demos of the content are welcome, assuming

they are accurate representations of the real material and do not replace succinct descriptions of what the product offers.

Emphasis on key selling points to differentiate

from competition such as: social media integration; DMV approvals; guarantees; promotions; free content; smartphone apps.

jd@moorexpert.com | www.moorexpert.com | summer 2012

Wireframe Alts.
LOGO TEEN I DRIVE SAFELY MARKETING SELLING POINTS AND PRICE... LOGO TEEN I DRIVE SAFELY Free test Parents page MARKETING SELLING POINTS AND PRICE... LOGO TEEN I DRIVE SAFELY Free test Sample Path to license Sample Path to license (VIDEO) ORIGINAL SITE LEFTCOLUMN CONTENT... ORIGINAL SITE RIGHTCOLUMN CONTENT... (VIDEO) (VIDEO) PRIORITIZED ORIGINAL SITE CONTENT...
Alternative 2 (Alt 1+improved navigation) Inclusion of a mobile-friendly, touch UI navigation component. Pros: promotes important site content, greatly improves navigation, feels app-like

moorexpert

Parents page MARKETING SELLING POINTS AND PRICE...

(SAMPLE ILLUSTRATIONS)
Alternative 3 (Alt2+sample illustrations) Inclusion of visual product overview (i.e. sample illustrations of what course looks like) Pros: offers a more compelling, visual introduction (assumed to better attract teens)

Alternative 1 (least amount of changes) Essential clean-up for a mobile UI with minimal development effort. Pros: mobile-friendly layout with prioritization of key content the consumer is looking for

jd@moorexpert.com | www.moorexpert.com | summer 2012

Design Proposal
Alternative 3 Incorporates improvements found in Alternatives 1 and 2 but also includes a visual product overview which offers a more compelling introduction to the product. We assume this is better at engaging teen users on smartphone devices. Key design features user-centered design mobile-friendly simplified layout enhanced navigation prioritizes key product information and content offers quick visual product overview Key technical features assumes HTML5/CSS3/ JavaScript usage leverages mobile site redirects and IP detection requires a non-Flash video player for iOS compatibility assumes an overall responsive design approach Notes This proposal incorporates the user and competitor research, and adheres to mobile site best practices published by Google. The design is achievable with minimal front-end development. A significant percentage is achieved by updating the sites style sheets (CSS) and HTML alone. Original content is maintained, requiring insignificant changes to text and graphics, though existing content should be tested with the target audience for suitability. The mobile version detects location and device parameters.

moorexpert

Above the fold Area viewable without scrolling

LOGO

TEEN I DRIVE SAFELY Sample Free test Parents page MARKETING SELLING POINTS AND PRICE...

Path to license

(VIDEO)

(SAMPLE ILLUSTRATIONS) Below the fold Area viewable after scrolling PRIORITIZED ORIGINAL SITE CONTENT...

jd@moorexpert.com | www.moorexpert.com | summer 2012

Axure Prototype
This is a mid-fidelity prototype created with, Axure. The prototype can be published online, and viewable/ clickable through a browser--including smartphone browsers which simulates actual usage. Most graphics are placeholder boxes or images, as the prototype focusing on the layout, interactions, usability, etc. and not the highfidelity final graphics or copy. All buttons are actually clickable, though the prototype is not fully built out. In other words, basic site navigation can be simulated, but the entire site functionality is not replicated. This image is a video placeholder and would be replaced with an attractive and compelling image still from the pre-existing video in a further higher-fidelity prototype. A bright yellow color is used here to draw attention to the primary callto-action. The other buttons in the prototype are colorless to emphasize the contrast, but would likely be colored in a higher-fidelity prototype. This row represents the sample illustration of the drivers ed course in an app-store-esque layout component. Half of the row is intentionally cut off to prompt the consumer to scroll down further and engage with content.

moorexpert

1 2 3 4 5 6

1 2 3 4 5 6

jd@moorexpert.com | www.moorexpert.com | summer 2012

10

Hi-fi Prototype
ORIGINAL PROPOSED
Summary
Recap of approach
1. 2. 3. 4. 5. 6. 7.

moorexpert

Improving mobile site UX and ROI

This proposed prototype design is mobile-friendly and prioritizes important content, product information, and touch-screen navigation. The design attempts to match the layout and content to the needs and preferences of the target consumers. The prototype should be better at capturing consumers and driving sales when compared to the non-optimized predecessor. Thought about teen mobile search behavior Examined current sites mobile search standing Reviewed the sites design and content strategy Conducted user research & competitive analysis Discovered emergent themes to apply Created various wireframe alternatives Proposed an improved mobile UX, which presumably has a higher return on investment

jd@moorexpert.com | www.moorexpert.com | summer 2012

11

Appendix
jd@moorexpert.com | www.moorexpert.com | summer 2012

moorexpert

12

T of the T ools rade

InDesign
Used for layout design (such as creating this document, or perhaps laying out a new UI). Photoshop Used for image manipulation and graphics. Often used for website design. Axure Used for rapid prototyping of publishable interactive wireframes.

moorexpert

Silverback Used to conduct user research. Captures multiple video sources and aids analysis.

Google, Our Mobile Planet, etc. Google actively supports the mobile web, and has a host of tools and data to prove it.

Pen and Paper No design project would be complete without plenty of sketching and note-taking!

jd@moorexpert.com | www.moorexpert.com | summer 2012

13