magic toy shop - uxdi london 2014 - project 2

24
Marta Fioni General Assembly London - UX DI Summer 2014 The Magic Toy Shop

Upload: marta-fioni

Post on 22-Apr-2015

259 views

Category:

Internet


2 download

DESCRIPTION

UX Design course project: developing wireframes for a vintage toy shop an e-commerce website. I have researched the competitive scenario, sketched the interface, developed wireframes of homepage, product pages, search pages, check out flow and reward and engagement system. I have then designed the clickable prototype in Omnigraffle, and run guerrilla testing to reiterate on the design.

TRANSCRIPT

Page 1: Magic toy  shop - UXDi London 2014 - Project 2

Marta Fioni General Assembly London - UX DI Summer 2014

The Magic Toy Shop

Page 2: Magic toy  shop - UXDi London 2014 - Project 2

Competitors Analysis

Bunny, my favourite toy

Page 3: Magic toy  shop - UXDi London 2014 - Project 2

‘Where have all these toys come from?’ Hiroshi Fuji

Page 4: Magic toy  shop - UXDi London 2014 - Project 2

An online toyshop that creates and re-creates

the magic moments of childhood.

The brief

Page 5: Magic toy  shop - UXDi London 2014 - Project 2

Curated

Mass Market

General e-commerce Toys

The opportunity

Page 6: Magic toy  shop - UXDi London 2014 - Project 2

Website Product page Navigation Check out NotesProduct reviewsSocial sharing

One click check-out Brand store

Categories Keywords

Brand stores

Edit basketStores multiple credit cards and addressesClear date of arrival

Powered by usersPersonalised

recommended items

Buy online/in store optionProduct tour (demo)

Might also interested in

Categories (10) Curated gallery

Mandatory registration

In store availabilityOn shelf promise

Email offersGift card

Toy safety Quantity / review

Social sharing Delivery / returns

Recommended age

Categories (10)Curated gallery

(brand, sub-subcats) Offers

Four steps check out Progress signals

Invoice information upfront

Pictures show the toy, not the box.

Only kids oriented,Functional

descriptions

Reviews + site repliesSocial sharing stats

Similar productsHeart availability / tags

Categories (9) newTop 50

Last chance

Four steps check out Justifies phone number request

Postcode automatic Look up

Pictures are curated! All objects in a

context

Quantity Availability

Themes Recommended by

buyers / shop history telephone number

Vertical form Too many steps

Boring tone of voice

Pure curation, no personality

What competitors do well

Page 7: Magic toy  shop - UXDi London 2014 - Project 2

As efficient as Amazon !

As surprising as Firebox !

As cozy and delightful as your favourite toy shop

The experience

Page 8: Magic toy  shop - UXDi London 2014 - Project 2

Designing for your users

‘He tells me what he wants - the problem

is to find it’

John

Tamsin Dexter

‘If I get her the cool stuff, she will think I am

a cool dad’

‘It’s not whether I can afford it, it’s weather I

can afford NOT to have it!’

Page 9: Magic toy  shop - UXDi London 2014 - Project 2

Designing the experience

Encourage Discovery

Support Buyers Decisions

Drive Sales & Delight

Page 10: Magic toy  shop - UXDi London 2014 - Project 2

Encourage Discovery

Page 11: Magic toy  shop - UXDi London 2014 - Project 2

One click to brand pagesDate

Notes

Title

g-design.net

>

Home Brand

>

Page 12: Magic toy  shop - UXDi London 2014 - Project 2

Support Buyer Decisions

Page 13: Magic toy  shop - UXDi London 2014 - Project 2

‘Ask someone’

Page 14: Magic toy  shop - UXDi London 2014 - Project 2

The expertsDate

Notes

Title

g-design.net

Help page Product Page

Page 15: Magic toy  shop - UXDi London 2014 - Project 2

The magic bagDate

Title

Notes

g-design.net

Page 16: Magic toy  shop - UXDi London 2014 - Project 2

Prototype

Drive Sales & Delight

Page 17: Magic toy  shop - UXDi London 2014 - Project 2

Check out process

ConfirmationPayment Bag

DateTitle

Notes

g-design.net

DateTitle

Notes

g-design.net

DateTitle

Notes

g-design.net

>> >>

Page 18: Magic toy  shop - UXDi London 2014 - Project 2

What’s your favourite toy?Date

Notes

Title

g-design.net

>

Form Discount

>

Page 19: Magic toy  shop - UXDi London 2014 - Project 2

Testing with users

Livia, Mum of Agata

Page 20: Magic toy  shop - UXDi London 2014 - Project 2

Results pages

Test page Final version

Page 21: Magic toy  shop - UXDi London 2014 - Project 2

Testing prototype

Final version

Messaging

Test message

Page 22: Magic toy  shop - UXDi London 2014 - Project 2

Demo

http://invis.io/5QYJS7NX

Buy a beginner’s level magic trick

Clickable prototype:

Page 23: Magic toy  shop - UXDi London 2014 - Project 2

Next steps

!

With your help,create magic content

Gather statistics and run A/B testing on the homepage

!

Monitor sales and engagement !

!!!

Page 24: Magic toy  shop - UXDi London 2014 - Project 2

Thanks!