The team used a collaborative design process that involved personas and UX principles to make design decisions. They conducted card sorting, created site maps and user flows, reviewed personas, created rough sketches, refined ideas by merging them, created wireframes individually and then reviewed as a team, and iterated on the navigation, product pages, and home page before user testing. The process resulted in a home page mock-up and lessons learned around refining wireframes and prototypes and setting expectations for user testing.

1. The design decision
process
1) A functioning team
- finding strengths and weaknesses
- building trust with our users and
stakeholders
2) using PERSONAS and Best Practice UX
PRINCIPLES to take our decisions

2. Card Sort
• Ideas from the
whole team
• Collaborative
process with
feedback
• 2 options:
• boys/girls &
summer/
winter
• boys/girls &
tops/bottoms/
accessories
Defining categories for TrueSpirit
site navigation

3. Site Maps &
User flows
• We have
considered all
of the user
flows to have a
well
structured
site map
• All ideas as
team, then
refined
individually

4. Reviewing Personas
Extra work required:
• Referred back to
all 3 personas at
each step
• What we’d like to
continue working
on : Building out
the personas (not
as much )
Building out the
personas as much as
possible

5. Rough Sketches
!
• Setting out
ideas on paper.
• Keeping the
funnel wide
• As many
options as
possible were
considered

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

7. Wireframing &
Prototyping
• Discussed as a
Lesson 1:
More refining of
wireframes and
process = less time
to prototype
team
• Created first
versions (low
fidelity)
individually in
Omnigraffle
• Reviewed as a
team
• Finalised as a
team in
Omnigraffle
Lesson2:
Know what we are
setting up our
wireframes for

8. How the group arrived at the
final decision?
em
l
ob
h
ug
s
ea
id
isc
D
Ro
pr
s
us
n
ig
es
ld
na
Fi
ew
evi
R

9. Navigation iterating

10. Product page iterating

11. Product page iteration

12. Home Page iterating
• Brand
look&feel
• business
needs: sales
• show prices
and
comparison
with sale
• quality and
care
• easy
returns

13. The
result:
!
Imagine
the site

14. !
!
Imagine
the site
Home page Mock-up

15. User Testing
(key findings)
•
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 button to find polo
shirt rather than top navigation bar.
(we could perhaps re-do these links to
boys and girls).
•
One user said he’d prefer just to use
images rather than navigation menus
•
2/3 users could not find the alternative
views (eg gallery vs list).
•
Check out works well!

16. Q&A
Thanks