Starting with discovery exercises like empathy mapping and user-journeys, learn how to bring together the UX and design phases to create a user-centric website. Get tips and best practices that push your site design to the fullest, yet keep your developers from hating you at the end of the day.

1.  by katy hinz
 senior designer @ teal media
from discovery to design:
a collaborative approach to
a user-centric website

2.  creative problem solver
 intuitive designer
 deep thinker
design nerd

3. creative with a conscience
o full-service digital design agency
o non-profit & advocacy focus
o focus on user-centric design & strategy
tealmedia.com
@tealmedia
tealmedia

4. collaboration?!
sorry my introverted friends

5. user-centric design

6. what does ‘user-centric’
even mean?

7. what does ‘user-centric’
even mean?
user-centric design is a framework of processes in which a user’s characteristics, habits,
preferences, and goals are given extensive attention at each stage of the design process in
order to create the best user experience possible.

8. why do we need to collaborate for
user-centric design?

9. because i said so
#ThingsMyMomSays

10. when clients, users, and creatives
have a common consensus,
decisions become obvious

11. user-centric design process

12. step 1: discovery

13. create a common
understanding
o surveys (user + stakeholders)
o client design survey
o analytics review
o competitive landscape analysis
o usability testing / auditing
o pain points + goals
o written website plan

14. so we discovered stuff…
now what?

15. step 2: user mapping

16. who are we designing
for, and what do they
need?
o user personas
o empathy maps
o journey maps

17. arthur daniels
aficionado of superhero stuff
o 44 year old computer data engineer
o introverted, socially awkward, but has a
serious girlfriend that he met online
o hyper-focused on what he cares about,
everything else is just noise
o spends his spare money on super hero
collectables
o especially loves dressing up in super hero
costumes to impress his small group of
friends with his latest gear

18. what’s it like to be arthur?

19. thinking & feeling
o I want the have the best
costume for next months
super hero party!
o
hearing & seeing
o There’s a lot of drama on
MovieTalk about Marvel’s
latest release not being true
to the comics
o
saying & doing
o SuperHeroStuff.com is
running a sale this week,
maybe I’ll just order from
there
o
painpoints
o I’m swamped with work and
don’t have a lot of time to
search for something
o
top goals
o I need to find what I want
quickly, and know that it will
arrive on time
o

20. what does arthur’s website
experience look like?

22. user mapping: pro tips
o work through empathy maps & journey maps with your client
o put yourself in the shoes of the users & advocate for their needs
o forget about your personal preferences (and remind your client to do the same)
o think about the user’s experience from different angles – their experience is probably
not linear
o document your findings & get sign off before moving on!

23. step 3: information architecture

25. home

26. information architecture: pro tips
o create, discuss with your client, iterate, iterate, iterate…then get sign off
o create page templates, not pages (and color code them!)
o account for all pages, all instances of pages, and all features & functionality
o gut check any major functionality with dev

27. step 4: user experience

29. so you want to be a super
hero, ey?
secondary headline lorem ipsum
LET’S DO THIS
so you want
to be a
super hero,
ey?

30. information architecture: pro tips
o prep your client for what wires are – and are not
o annotate to help your client grasp concepts
o work out major content, feature, and functionality issues in wires, before you start
designing
o if time/budget allow, create high-fidelity wires and perform user testing
o gut check wires with dev at least twice: before sharing v1 with the client, and after
client approval (before you start design). stay within scope!!

31. step 5: design

32. i’ve never had a problem with a
dumb client. there is no such thing
as a bad client. part of our job is
to do good work and get the
client to accept it.
Bob Gill
“

33. it’s more than just a pretty face
o consistency & design patterns
o visual language
o interactions / animations (big and small)
o usability & accessibility

37. how would you design
for this guy?

38. design: pro tips
o advocate for the user — leave personal preferences out of it
o use animations/interactions wisely — they should enhance the experience and serve
a purpose
o be thinking about how your developers will translate this to code
o be prepared — be very prepared — to present your design to your client (NEVER
NEVER NEVER send over without explanation!!!)
o every decision should be intentional and have a reason behind it
o gut-check your designs with dev before sharing with your client

39. handoff to dev

40. as a designer its your job to translate the user
needs & client goals into a final visual design,
and then communicate that visions to your
developers to be carried out in code

42. handoff to dev: pro tips
o nothing should be a surprise at this point — be in constant communication
throughout the project
o communicate about content types and how your client expects them to work
o be detailed about interactions — share examples, or mock up an animation
o provide both desktop and mobile specs
o set up time for a thorough design audit / qa of the site before launch
o be as nice as possible to your developers — they’re usually bending over backwards
for you

43. your thoughts & questions?
holla at me
katyhinz.com
katymhinz@gmail.com