Totokaelo GOING MOBILE
CASE STUDY Prepared by Tiffany Lin v.4 8/2014 www.tiflindesign.com
About...
Totokaelo is a purveyor of beautifully designed and thoughtfully curated fashion and objects.
We represent artists and designers whom we believe to have an independent and thoughtful sense of beauty.
2 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Getting Flexible... TOTOKAELO.COM - HOME
Currently, Totokaelo’s home page feels more like a redirect. First steps? Simplfying the experience by focusing the content and thinking about the mobile experience.
LINKS TO...
WOMENS
3 Going Mobile : Totokaelo v.4 8/2014
MENS
ART-OBJECT
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Content Strategy...
1. UNDERSTANDING THE CURRENT CONTENT PUBLISHING WORKFLOW.
GOAL:
To create once and publish everywhere. HOW:
Creating a content management system to guide your creators in making flexible sets of content.
4 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Content Strategy...
2. WRITING FOCUSED, FLEXIBLE CONTENT.
GOAL:
Understanding what each piece of content is supposed to do. HOW:
Short sentences, flexible chunks, assign use for copy, no truncation, creating short forms or long forms, or the perfect one form.
5 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Content Strategy...
3. WHO’S LOOKING...WHY? GOAL:
Understanding context and communication goals.
E-commerce Quarterly EQ3 2013, from Monetate
HOW:
Researching your audience!
*For more details please view the Content Strategy Proposal. 6 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Navigation... SHORTER, CONSISTENT, FOCUSED NAVIGATION
7 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Navigation... Header navigates back to the Home page. Even when inside of an item detail page. We can reduce this pogo-ing effect.
Totokaelo’s various stores are navigated by image blocks, living at the bottom of the page.
8 Going Mobile : Totokaelo
Case Study: Prepared by Tiffany Lin March, 2014
CURRENT NAVIGATION
Home Sale (Woman)
Woman New Arrivals Signature Blog
Header What Members are Saying Favorites Blog Sign in/Membership Shopping Bag Receive Email Updates
Sale (Man)
Man New Arrivals Signature Blog
Main Nav New Arrivals Shop by Look Back in Stock Designers Clothing Footwear Accessories Signature Sale Search (dialogue)
Art-Object New Arrivals Essentials Blog
Main Nav New Arrivals Gift Ideas Favorites Essentials Members are Saying Back in Stock Blog All Designers Adonde Habidecor Yoshii Akiko’s Pottery Hakusan Hakusan by Mori
Now Hiring
All Items Art Object Furniture Lighting Tabletop Textiles Shopping Bag Sign In/ Membership Search
Footer Visit Totokaelo Man Visit Totokaelo Art-Object Visit Totokaelo Contact Us About Shipping Returns Careers 9 Going Mobile : Totokaelo
Gift Certificates Receive Email Updates Terms & Conditions Privacy Policy Investor Opportunities Case Study: Prepared by Tiffany Lin March, 2014
Navigation... SUGGESTED SITE NAVIGATION
Woman
Man
Clothing Footwear Accessories Signature Sale
Header Sign in/Membership
Footer Gift Certificates
10 Going Mobile : Totokaelo
Art-Object
Clothing Footwear Accessories Signature Sale
Search
Art Object Furniture Lighting Tabletop Textiles
Shopping Bag
About
Blog
Shipping & FAQ’s
Privacy Policy
Receive Email Updates Contact Us
Investor Opportunities
Case Study: Prepared by Tiffany Lin March, 2014
Navigation... YOUR BUSINESS, YOUR CUSTOMERS Content wise, focused on the main departments.
Woman
Man
Clothing Footwear Accessories Signature Sale
Art-Object
Clothing Footwear Accessories Signature Sale
Blog
Search
Art Object Furniture Lighting Tabletop Textiles Focused inventory list for the user. Refined categories, less options for user.
Header Sign in/Membership
Shopping Bag
Shipping & FAQ’s
Receive Email Updates Contact Us A native app could eliminate the need for login, and increase personalization efforts.
Footer Gift Certificates
11 Going Mobile : Totokaelo
About
Privacy Policy
Investor Opportunities
Case Study: Prepared by Tiffany Lin March, 2014
User Profile... MEET EMILIE. SHE SHOPS AT TK BUT, SHE ALSO SHOPS AT...
Emilie 35 - Portland, OR
“I love quality, beautiful designer goods and great denim. Knowing about designers and artists is something I enjoy, and keeps me up to date and in style.”
12 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Competitive Analysis
FAB.COM
ANTHROPOLOGIE.COM
GOAL:
Finding ideas that work. HOW:
Visiting industry specific, audience matched sites. Trying things out, finding the best for you.
*For more details please view the Competitive Analysis Doc. 13 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Competitive Analysis FAB PREPARES CONTENT FOR “PUBLISH ONCE.”
FLEX TO MOBILE
DESKTOP
14 Going Mobile : Totokaelo
Case Study: Prepared by Tiffany Lin March, 2014
Competitive Analysis VISUAL & MATCHED TEXT BASED MENU
FLEX TO MOBILE
DESKTOP
15 Going Mobile : Totokaelo
Case Study: Prepared by Tiffany Lin March, 2014
Competitive Analysis SPECIAL FEATURES
More info/filters Pop-outs & hovers
MOBILE
16 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Competitive Analysis SHIFTING FOCUS
MOBILE version focuses on membership and cart
DESKTOP Heavy photo landing page has a mobile version.
17 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Competitive Analysis CONTEXT
The mobile version has a very easy to find “shop by lookbook.” The desktop version buries this option, then opens the lookbook in a new window.
MOBILE
DESKTOP
18 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Sketches DESKTOP
19 Going Mobile : Totokaelo v.4 8/2014
FLEX TO MOBILE
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Sketches DESKTOP
20 Going Mobile : Totokaelo v.4 8/2014
FLEX TO MOBILE
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Interaction CONTEXT IS EVERYTHING
COMMON MOBILE 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 changing
related to my current location in the world.
or updating and I want to stay on top of it.
EXPLORE/PLAY (bored, local): I have
EDIT/CREATE (urgent change/micro-tasking): I
some time to kill and just want a few
need to get something done now that can’t wait
idle time distractions.
*Source: Tapworthy, by Josh Clark and Mobile First, by Luke Wroblewski
21 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Scenario EXPLORE
Emilie User Scenario - 1/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 blouse featured in the email and goes to the TK site, hoping they have her size so she can purchase the blouse.
*For more details please view the User Scenario Doc. 22 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
User Scenario - 1/Responsive Site/Tablet
23 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Scenario STATUS
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!
24 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
User Scenario - 2/Smartphone
25 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough...
Wireframe Walkthrough... SMART PHONE
27 Going Mobile : Totokaelo
TABLET
Case Study: Prepared by Tiffany Lin March, 2014
Wireframe Walkthrough... SMART PHONE
28 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
29 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
30 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
31 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
32 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
33 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Wireframe Walkthrough... SMART PHONE
34 Going Mobile : Totokaelo v.4 8/2014
TABLET
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Medium Fidelity User Flow...
Medium Fidelity User Flow... ADDING TO BAG
User Scenario - 1/Explore
Medium Fidelity User Flow... CHECKING OUT
User Scenario - 1/Explore
Usability Testing...
MID FIDELITY INTERACTIVE PROTOTYPE USING INVISIONAPP
Usability Testing...
Testing Tasks/ Scenario 1
1. FINDING A SPECIFIC ITEM...
4. READY...
You’re looking for a new arrival, the Maison
Make your blouse purchase.
Martin Margiela Impression Blouse.
2. LEARNING MORE... What material is the blouse made of?
3. PICKING THE RIGHT SIZE...
5. MAKING SURE... You only want to buy the one blouse.
6. PURCHASE... You’re ready to make the purchase.
You want to select the light blue shirt in size 42 to buy.
39 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Usability Testing... ACTIONS @ SAME LINE OF SIGHT
V1
40 Going Mobile : Totokaelo v.4 8/2014
V2
V1
V2
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
Usability Testing... MORE INFO NEEDED Swipe cue unclear Track filtering parameters
V1
V2
V1
V2
Tap cue unclear Action change
41 Going Mobile : Totokaelo v.4 8/2014
Case Study: Prepared by Tiffany Lin (v. 1 March, 2014)
High Fidelity Design Implementation User Scenario - 1/Tablet
Totokaelo
Mar
IN NEW ARRIVALS SIGN IN Maison Martin Margiela Marvel Tee Martial Shirt
BY DESIGNER Marni Mary Katrantzou Marc Digeros
NEW ARRIVALS
VIEW ALL R ESULTS
S P R I N G 2 014
Totokaelo FREE DOMESTIC SHIPPING ON ALL EXCHANGES
HI, SIGN IN View and Update Your Totokaelo Account
SIGN IN
WOM AN
NEW ARRIVALS
WOMAN
ART/OBJECT
MAN
M AN ART / OB J E C T
BACK IN STOCK
TOTOK AE LO BLOG FAVOR I T E S G I FT I D E AS
FAQS
NEW ARRIVALS S P R I N G 2 014 FREE DOMESTIC SHIPPING ON ALL EXCHANGES
NEW A R R I VA L S
F R E E S H I P P I N G ON EXC HA N GES CONTAC T TOTOKA ELO
I NVE S TO R OP P ORTUNI TI ES
A RT/ OB J EC T
ABOU T TOTO K A ELO P R I VAC Y P O LI CY
Back in Stock
New Arrivals SORT BY PRICE
0 SHOP BY:
New Arrivals DESIGNER NAME Item Name
DESIGNER NAME Item Name
DESIGNER NAME Item Name
SORT BY PRICE
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
Item Name
DESIGNER NAME Item Name
DESIGNER NAME Item Name
SHOP BY:
Item Name
DESIGNER NAME Item Name
Item Name
Item Name
0
New Arrivals SECTIONS SORT BY PRICE Bottoms
0 SHOP BY:
Coats Denim Dresses Jumpsuits Shoes Tops
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
DESIGNER NAME
Item Name
Item Name
Item Name
Item Name
Item Name
Item Name
Shop by: in New Arrivals CANCEL
RESET
0 DONE
SHOP BY >
CATEGORY
COLOR
I
DESIGNER
PRICE
J
K
Shop by: in New Arrivals
L
CANCEL
M
RESET
DONE
SHOP BY >
I
J
Maison Martin Margiela
CATEGORY
K
Isabel Marant L
Martiniano
DESIGNER
Marni N
Marc Digeros
M
N
Mary Katrantzou COLOR
O
O
P
PRICE
Q
P R
Q
0
Shop by: in New Arrivals CANCEL TK ICONS
RESET
DONE
SHOP BY >
I
Totokaelo
0
CATEGORY
THANK YOU
0 J
K
L
Mint chambray Maison Martin Margiela DESIGNER
shoe fluffy sweater. Center part indigo
M
able knit tee Casio washed out ankle boots.
CT
N
COLOR
O
REVIEW YOUR ORDER P
Just for You
PRICE
Q
R
FROM FAB.COM
Shop by: in New Arrivals CANCEL
RESET
0 DONE
SHOP BY >
CATEGORY
COLOR
I
DESIGNER
J
K
L
LOADING Cancel
M
Maison Martin Margiela Isabel Marant Martiniano Marni Mary Katrantzou N
Marc Digeros O
P
Q
PRICE
Impression Blouse
0
Impression Blouse
$500 USD
DETAILS
SIZES AVAILABLE / LIGHT BLUE
Sleeveless with a subtle imprint of a button placket and collar, straight fit with side vents, keyhole button closure with classic margiela stitching at yoke. Origin Italy | Material 100% cotton
SIZING AND FIT Fit: Yanjn is wearing an Italian 40 Measure: 27 1/2" length, Italian 40 Model Measurements: Yanjin is 5'9",
NOTIFY ME WHEN MY SIZE IS AVAILABLE
$500 USD SIZES AVAILABLE / LIGHT BLUE
ADD TO BAG ADD TO WISHLIST
NOTIFY ME WHEN MY SIZE IS AVAILABLE
ADD TO BAG ADD TO WISHLIST
DETAILS SIZING AND FIT QUESTIONS/COMMENTS Paris sneaker luxe skirt denim Topshop shoe center part oversized clutch chignon...
0
Impression Blouse
1
ADDED TO BAG GO TO BAG
CONTINUE SHOPPING
$500 USD Remove Item from Bag
DETAILS
SIZES AVAILABLE / LIGHT BLUE
Sleeveless with a subtle imprint of a button placket and collar, straight fit with side vents, keyhole button closure with classic margiela stitching at yoke. Origin Italy | Material 100% cotton
SIZING AND FIT Fit: Yanjn is wearing an Italian 40 Measure: 27 1/2" length, Italian 40 Model Measurements: Yanjin is 5'9",
NOTIFY ME WHEN MY SIZE IS AVAILABLE
ADD TO BAG ADD TO WISHLIST
Your Bag
Your Bag
1
CHECKOUT
Order Summary
1
PURCHASE
CHECKOUT
SUBTOTAL : $500 1 ITEM
SUBTOTAL : $500 1 ITEM
IMPRESSION BLOUSE
EmilieS IMPRESSION BLOUSE
1
SUMMARY
Sign In Name Here
PRICE $500
Maison Martin Margiela LIGHT B LU E , SI Z E 4 2
PRICE
Delivery Date
$500
Maison Martin Margiela LIG HT BLUE, SIZE 42
******
QUANTITY: 1 SAVE FOR LATER
Address, City, State, Zip
QUANTITY: 1
SIGN IN
SAVE FOR LATER
FORGOT YOUR PASSWORD? DELETE
Item 1
$500
Tax
$ 50
Shipping
$
TOTAL
$550
0
DELETE
SIGN UP
SHIPPING INFO Name Here Address, City, State, Zip
CHANGE
PAYMENT INFO Card Type
CHANGE
High Fidelity Design Implementation User Scenario - 2/Smartphone
Totokaelo
Totokaelo
0
0
HI, E M IL IE
SIGN IN
YOU R TOTO KAELO
Sign In EmilieS
******
NEW ARRIVALS
NEW ARRIVALS SIGN IN
S P R I N G 2 014
S P R I N G 2 014
FORGOT YOUR PASSWORD?
FREE DOMESTIC SHIPPING ON ALL EXCHANGES
NE W AR R I VAL S
FREE DOMESTIC SHIPPING ON ALL EXCHANGES
WOM AN
NEW A R R I VA L S
WOM A N
M AN
A RT/ OB J EC T
MAN
SIGN UP
ART / OB J E C T
Back in Stock
Back in Stock
Emilie S YOUR ORDERS View, Modify, Track or Cancel an Order
TK Looks and Styles
ORDERS PLACED IN THE PAST 6 MONTHS
PLACED DEC 20, 2013 IMPRESSION BLOUSE Maison Martin Margiela YOU R TOTO K A E LO
SHIPPED ON JAN 01, 2014 DELIVERED
First Lastname Address C H A N GE
MasterCard ***0000 Exp 12/16
SIZING Height : Bust :
VIEW ORDER DETAILS
LI GH T B LU E , S I Z E 4 2
CURRENT SHIPPING AND PAYMENT INFO
City, State ZIP
0
YOU R O R D E R S
YOUR TOTOKAELO Favorite, Wishlist,
Your Orders
0
C H A N GE
TRACK
Thanks. WWW.TIFLINDESIGN.COM