Going Mobile
Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14 www.tiflindesign.com
Interaction. Understanding Mobile Interactions While content and design play a very large part in creating a strong mobile experience, we must also organize our mobile strategy to include;
Understanding the behaviors behind mobile use and,
How and why people use their devices. 2 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Interaction. Understanding Mobile Interactions Common Interaction Types:*
Lookup/Find (urgent info, local): I need
Check In/Status (repeat/micro-tasking):
an answer to something now—frequently
Something important to me keeps
related to my current location in the world. changing or updating and I want to stay on top of it. Explore/Play (bored, local): I have some time to kill and just want a few
Edit/Create (urgent change/micro-
idle time distractions.
tasking): I need to get something done now that can’t wait.
*Source: Tapworthy, by Josh Clark and Mobile First, by Luke Wroblewski 3 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Interaction. Understanding Mobile Interactions Real Cases Explore/Play
“I am a regular online buyer
“...The site doesn’t have browse
and use the internet to seek
from low to high or show all
out fashion inspirations.
on one page. Those are really
Your website is one of my top
important for me even if I am
choices to visit because of
just browsing.”
your constant additions and
Claire C., Yelp. 1/9/2014
great styling.” Jennifer Latour and Jennilee Marigomen http://zero1magazine.com/
4 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Interaction. Understanding Mobile Interactions Real Cases Check in/Status
Real Cases Look up/Find
Ann Pontius was in the market for jeans
“Hi, I was in there last week, there was
recently, she turned to Totokaelo, her
a pair of sneakers I regret not buying.
favorite boutique in Seattle, to help find
I can’t find them on your website, and I
her a pair — this despite the fact that she
can’t seem to find an email address for
lives in Denver.
you. Can someone contact me? I would appreciate it.”
“Denim is always tricky,” said Ms. Pontius.
Levon V., TK-Man Facebook
“But they kept sending me different kinds of jeans until I found what I liked. Marisa Meltzer http://www.nytimes.com/ 5 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios. Understanding Mobile Interactions
Emilie User Scenario - 1/Responsive Site Tablet
Emilie’s at home, relaxing in her living room, she opens her email to find the New Arrivals message from Totokaelo. She loves the dress featured in the email and goes to the TK site, hoping they have her size. She finds the dress in her size. Then, she sees some suggested items to go with the dress, she takes a closer look and completes her purchase.
6 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Persona Emilie 35 - Portland, OR
I love quality, beautiful designer goods and great denim. Once in a while I splurge on local handmade designs.
Personalization Notes: As a responsive site, clients visiting Totokaelo get a whole new, easier experience. Here are a few Shopping TK native app bonuses to consider while we look at the responsive site design: Account login is automatic, Styles and preference recommendations can be personalized, Sizes can be stored, One tap checkout, Personalized sale alerts. 7 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios. Understanding Mobile Interactions
Emilie User Path - 1/ Responsive Site Tablet
1.Reads Email
9.Taps to Add to Cart
2.Taps on Ad (browser auto opens)
10.Taps to See Her Cart
3.Scrolls to Find Specific Item
11.Taps to Sign In (directs to sign in
4.Taps for Details
page, as a returning user her email is entered automatically)
5.Taps for Size (available sizes are listed)
12.Enters Her Password
6.Taps to Add to Cart
13.Taps Sign In (returns to cart)
7.Sees Suggested Items
14.Taps to Checkout
8.Taps for Item Details 8 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios.
9 Going Mobile : Totokaelo
Emilie Storyboard - 1/ Responsive Site Tablet
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios. Understanding Mobile Interactions
Emilie User Scenario - 2/Smartphone
Excitement is building for Emilie as she is waiting for her Totokaelo shipment. Today she’s on her way home from work and decides to check-in on her order via the TK website. Emilie sees that her shipment arrived today at her home!
10 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Personalization
“What Totokaelo can provide that those {other} companies can’t comes back to relationships and people.” Jill Wenger, Totokaelo’s owner
Personalization Notes: Here are a few Shipping TK native app bonuses to consider while we look at the responsive site design: Shipping alerts in phone, Source: http://www.builtbycivilization.com/projects/#totokaelo
One tap returns/exchanges, Offline access Quick access to order status.
11 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios. Understanding Mobile Interactions
Emilie User Path - 2/Smartphone
1.Opens Browser 2.Directs to Totokaelo.com 3.Taps Menu 4.Taps Name (opens account) 5.Taps My Orders 6.Taps Most Recent Order 7.See’s Delivery Date
12 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Scenarios.
13 Going Mobile : Totokaelo
Emilie Storyboard - 2/Smartphone
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14
Thanks!
What’s Next...? Wireframes & Prototypes!
14 Going Mobile : Totokaelo
User Scenario and Pathways Prepared by Tiffany Lin 2.12.14