Totokaelo: Going Mobile Case Study

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