General Assembly UXDi Summer 2014 Sydney Student Project n.2 - ecommerce TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children.

1. E-commerce for
UXDi:
Student
Project
Team:
Deepa
Dhupelia,
James
Feng,
Sara
Michelazzo
SARA
MICHELAZZ0

2. As part of the team who did this
project what I have done is:
- Realize sketches
- Realize wireframes in Omnigraffle for John and Sara’s
flows
- Realize a prototype for John’s flow in Invision
- Realize the mockup for the home page
- Designing Scenarios for all the 3 personas
- Improving and updating user flows and site maps
- Being an active part of the team during design iteration
- Providing innovative ways to communicate our design

3. About the project
TrueSpirit
is
a
new
internet
retailer
for
schools
and
parents
who
want
a
modern
school
uniform
for
K-­‐12
children.
It
offers
updated
uniform
fashion
including
pants
for
girls
and
zip-­‐up
hoodies,
provides
a
“must-­‐
haves”
checklist
from
the
school’s
administrator
for
each
school
year,
and
recommends
accessories
allowed
by
the
school’s
dress
code.
Unlike
tradiLonal
suppliers,
True
Spirit
encourages
visitors
to
express
their
tastes—with
some
limits.
*required
from
the
project

4. About the product
TrueSpirit
is
a
new
internet
retailer.
The
TrueSprit
team
was
looking
to
create
an
appropriate
experience
for
their
target
customer
that
could
be
delivered
via
web
and
mobile
channels.
The
team
was
given
the
constraint
of
targeLng
ipad
as
primary
delivery
channels.
*required
from
the
project

5. Brainstorming
Brainstorming
helps
to
clean
my
brain
from
all
ideas
I
have
about
the
design.
I
leave
them
there
so
I
can
forget
about
them
while
analyzing
persona’s
needs
and
take
them
out
later
in
the
process
where
they
are
not
anymore
a
threat
but
a
resource.
Best
idea:
providing
a
lable
where
you
can
write
your
kid’s
name
so
she/he
wan’t
swap
it
by
mistake

6. Competitor
analysis
What
are
they
not
doing?
What
are
they
doing
that
you
can
do
beTer?
What
do
your
website
need
to
do…
go
back
to
personas!

7. Concept Model
*required
from
the
project

8. Card Sorting
Defining
categories
for
TrueSpirit
site
navigaLon

9. Rough Sketches
SeXng
out
ideas
on
paper,
keeping
the
funnel
wide

10. Scenarios
Scenarios
help
to
understand
beTer
user
flows

11. Site Maps
We
have
considered
all
of
the
user
flows
to
have
a
well
structured
site
map

12. Site Maps
Site
Maps
realized
in
Omnigraffles
are
easier
to
keep
up
to
date!

13. Meet the business
needs & style

14. About the brand
Fresh,
modern,
lighthearted,
open,
appealing,
friendly,
curated,
there
when
you
need
us
but
not
in
your
way
we
believe
in
service
easy
returns!
we
only
sell
quality
products
our
sizes
are
true
to
size
we
foster
community
support
educaLon
through
our
scholarship
program
*required
from
the
project

15. Get to know Persona
Personas
were
given
as
part
of
the
assignment.
Our
role
was
to
keep
them
in
mind,
understand
what
they
need.
Building
out
personas
as
much
as
possible

16. Personas: Sarah
*required
from
the
project

17. User Flow
Goals & Features
specific
URL
and
login
required
to
purchase
specific
secLon
required
clothes
school
buTon
on
the
home
page
in
case
she
doesn’t
have
the
URL
materials
and
importaLon
add
to
favorites
“She
likes
to
save
items
while
browsing
and
purchase
them
at
the
end
of
the
day”
care,
comfort
and
fit
in
the
descripLon
quality
page
*User
flow
realized
by
James
Feng
and
updated
by
me

18. Wireframes
School
Category
Page
School
Home
page
School
Shopping
List

19. Personas: John
*required
from
the
project

20. User Flow
Goals & Features
quick
buy
mode
in
category
page
dropdown
menu
and
filter
(colors,
prices)
*User
flow
realized
by
James
Feng
and
updated
by
me

21. Wireframes
Category
view:
gallery
Category
view-­‐quick
buy
Product
Page

22. John’s
Scenario
John’s
Scenario
helped
to
understand
beTer
his
needs
in
order
to
privide
an
effecLve
navigaLon
system.

23. Navigation
This
map
helps
to
understand
how
to
navigate
the
website
and
where
there
are
shortcuts
to
reach
one
or
more
pages.

24. Global Navigation - Header
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
TOPS
Girls > T-shitst and tops > polo shirt
BOTTOMS
ACCESSORIES
Formal shirts
Jackets
Skirts
Socks
iPhone case
T-shirts
Hoodies
Pants
Headbands
Plush toy
Polo shirts
Sweaters
Shorts
Gloves
Tank top
Logo Hoodies
Gymshorts
Belts
Logo shirts
Leggings
SALES >

25. Global Navigation - Header
GIRLS
BOYS
SHOP BY
SCHOOL
Girls > T-shitst and tops > polo shirt
St. Luke’s
GIRLS
Girls > T-shitst and tops > polo shirt
Search
SIGN IN
REGISTER
▼
BOYS
SHOP BY
SCHOOL
GO
SIGN IN
REGISTER
GO

26. Global Navigation - Header
GIRLS
BOYS
SHOP BY
SCHOOL
Girls > T-shitst and tops > polo shirt
St. Luke’s
GIRLS
Girls > T-shitst and tops > polo shirt
Search
SIGN IN
REGISTER
▼
BOYS
SHOP BY
SCHOOL
GO
SIGN IN
REGISTER
GO

27. Global Navigation - Header
GIRLS
BOYS
SHOP BY
SCHOOL
SIGN IN
REGISTER
2
ITEMS ADDED TO BAG
Polo shirt
$15
Pants
$12
SUBTOTAL
$37
GO TO BAG
SAVED ITEMS

28. Navigation - Footer
SERVICES
ABOUT US
FOR SCHOOLS
GET HELP
Shipping & tracking
Company info
Admin area
Feeling stuck?
Sizes & Conversions
Our Quality
Find your school
+61 5647 474637
Easy returns
Jobs
How to wash
Scholarships
help@truespirit.com.au
Contact us
Term of use | Privacy and Cookies
Copyright 2014
Navigation - Breadcrumb
Home> Girls > Tops > Polo Shirt

29. Filter

30. How the group arrived
at the final decision?
1)
A
funcLoning
team
-­‐
finding
strengths
and
weaknesses
-­‐
building
trust
with
our
users
and
stakeholders
2)
using
PERSONAS
and
Best
PracLce
UX
PRINCIPLES
to
take
our
decisions
Find the other
people strengths
and use them!

31. Refining and
decisions
We
were
able
to
find
beTer
results
as
we
could
merge
many
ideas
into
one.
Then
drew
larger,
more
detailed
sketches
for
consideraLon
Considered
and
chose
those
that
best
fit
the
personas

32. Wireframing
Discussed
as
a
team
Created
first
versions
(low
fidelity)
individually
in
Omnigraffle
Reviewed
as
a
team
Finalised
as
a
team
in
Omnigraffle
More refining of
wireframes and
process = less
time to
prototype !

33. Examples of
design iteration

34. Design iteration:
Navigation
Menu
on
the
leg
side
Menu
on
top
The navigation on
top allows ro
display more
items and the
relation with the
contextual menu
is easier to
understand!

35. Design iteration:
Product Page
First
sketch
Second
iteraLon
Final
design
The button to
swith view
moved to the
right (best
practice iPad).
The add to bag
button become
smaller.!

36. Design iteration:
Home page
Wireframe
A
Wireframe
B
What problem on the
page is everything
solving?
Brand
look&feel
business
needs:
sales
show
prices
and
comparison
with
sale
quality
and
care
easy
returns
Wireframe B solves more problems

37. Pushing the home page to the
next level
Imagine
the
website

38. Home page Mockup
Imagine
the
website

39. User testing
We
expect
picture
to
zoom..
but
user
expected
to
go
to
details
page
One
user
would
have
saved
his
profile
if
it
didn’t
include
credit
card
User
went
to
sales
buTon
to
find
polo
shirt
rather
than
top
navigaLon
bar.
(we
could
perhaps
re-­‐do
these
links
to
boys
and
girls).
One
user
said
he’d
prefer
just
to
use
images
rather
than
navigaLon
menus
2/3
users
could
not
find
the
alternaLve
views
(eg
gallery
vs
list).
Check
out
works
well!
The
person
I
have
tested
asked
not
to
be
photographed

40. Storytelling
In
order
to
communicate
our
design
effecCvely
we
have
played
a
role
game.
Where
one
us
was
playing
the
role
of
one
of
our
persona
using
a
prototype.
Wealso
had
an
external
narrator
to
explain
our
design
choices
based
on
the
acLon
of
our
persona.

41. Do you want to see
more about this
project?

42. Prototype
WATCH
IT
LIVE
hTp://invis.io/NVMSPEXU

43. Prototype in
Omnigraffle
Design Spec
WATCH
IT
LIVE
READ
DESIGN
SPEC

44. Thank you
Special
thanks
to
Deepa
Dhupalia
and
James
Feng.
Working
with
you
was
a
pleasure.
SARA
MICHELAZZ0