The document discusses user experience design and provides a 15-step workshop for designing websites and apps with a focus on the user. The steps include preparing by sketching ideas without computers, developing a user persona, writing user stories from the persona's perspective, sketching and refining wireframes based on user needs, and documenting requirements. The key messages are to understand users by creating personas and prioritizing their needs through user stories to design websites that meet user goals rather than just fulfilling stakeholder requirements.

1. Stop making pretty websites that suck:
designing for the user
FWD Presentation

2. Hello,
We are Profero Sydney.
we create ideas people belong to™
Profero Agency Credentials 2013. Copyright © 2012-2013 Profero LLC
Profero Agency Credentials 2013. Copyright © 2013-2014 Profero PLC

3. Barry Saunders
I'm a user experience architect. I work at Profero.
I’ve designed and managed websites and apps for Earth
Hour, WWF Australia, Google, Sanitarium, Taste, Vogue and
Westpac.
I’ve worked with Indymedia, EngageMedia, YouDecide2007
and various community media projects.
FWD Presentation

4. What I do
I help clients understand what they want, and help them shape their brief.
I help designers understand what the client wants.
I make sure the designers and developers are solving the right problem.
FWD Presentation

5. Stop making pretty websites that suck:
designing for the user
FWD Presentation

6. we aren’t talking about art direction or brand
Source:
http://tpdsaa.tumblr.com/
FWD Presentation

7. we’re talking about designing for users
FWD Presentation
Source:
http://theprofoundprogrammer.com/

8. the number one problem with most websites
no coherent vision of what the site should do
FWD Presentation

9. the easiest way to prevent bad websites
define a clear brief that addresses the user’s experience
FWD Presentation

10. Workshop
A few quick techniques that will help you when
designing websites and apps.
FWD Presentation

11. Step 1: preparation
Step away from the computer
FWD Presentation

12. The most powerful design tool
Pen and paper!
FWD Presentation

13. Free your mind
At this point, we are trying to get all our ideas onto paper to evaluate
them. It is ok to throw ideas away; in fact, it’s the most important part.
FWD Presentation

14. Step 2: pair up
FWD Presentation

15. Step 3: chat and decide on an idea
Something like ‘a site for people to donate money to our organisation’.
Think of a primary function, and at most two secondary functions.
You should be able to articulate the vision for your site in a single sentence.
FWD Presentation

16. Step 4: imagine who might use this site
Make a few notes about who this person is.
•
•
•
•
FWD Presentation
How old are they?
What do they do?
What kinds of problems do they have?
How might we be able to help this user?

17. Step 5: give your persona a name
This is the person we will be designing for. This is your ‘user persona’.
This helps us think about our users as people, and imagine how they might
use our site.
We need to frame our design in terms of what the user wants, not
what the project stakeholders want.
FWD Presentation

18. Laura - digital influencer
!
Laura has been studying at uni for 4 years. Her goal is to
finish her university arts degree and study film producing.
!
She attends lectures on campus and online, uses the Internet
to do assignments and is quite digitally adept.
!
She loves being on up with the latest trends, love B-grade
movies - particularly dodgy budget films like ‘Sharknado’ .
She loves to watch films to review on her blog. She regularly
uses Facebook, Tumblr, Twitter and YouTube. She hopes to be
popular on the internet, and gain a large following on her
blog.
!
Profero Agency Credentials 2013. Copyright © 2012-2013 Profero PLC

19. Step 6: write a user story
A user story is a sentence that describes an interaction in the form of:
as ____________, I want to _________, so that _________.
So as user of Amazon might say:
As a user, I want to receive email notifications so that I can buy products I’m interested in.
An Amnesty user might say:
As an Amnesty supporter, I want to download a letter template so that I can write more
effective letters.
FWD Presentation

20. Step 7: write more user stories
Write as many as you think you need.
Remember that you are writing from the perspective of your user persona.
You are not your user.
FWD Presentation

21. Step 8: review
Prioritise the stories.
A common prioritisation structure is:
•
•
•
•
FWD Presentation
Must Have
Should Have
Nice to Have
Trivial

22. Step 9: Draw!
Using pencil and paper, sketch up a page of what you think the site
could look like.
Don’t worry about neatness.
FWD Presentation

23. Step 10: Share and compare
Present your sketch to your partner. Explain what it does, how it works.
Pick out the features of each sketch that you like. Explain why you like
them.
FWD Presentation

24. Step 11: Draw! (again)
Sketch the same page again, this time incorporating the bits you liked
from your partner’s sketch.
FWD Presentation

25. Step 12: Share and compare (again)
You can do this a few times to really work through the different ways
you could design the site.
FWD Presentation

26. Step 13: Document
Take photos of your sketches to make sure you have a record of what
you’ve decided.
FWD Presentation

27. Optional: Wireframe
Carrier
9:41 PM
LOG
IN
1
Recipe of the day feature as per the iPhone
app, to maintain a base level of
consistency and familiarity between
environments.
2
Navigation through the carousel supports
swipe through of the photos, tap on circle
Indicators, tap on arrows and auto-scroll
after x-second timeout of no activity.
AD BLOCK
If you have a UX person/
producer, get them to do this.
4
SEARCH 20000 RECIPES
Search
3
RECIPE OF THE DAY
1
4
5
2
If you don’t, you can use
Powerpoint or Balsamiq.
Keep it high-level, we are
looking for indicative detail, not
pixel-perfect design.
FWD Presentation
6
SEASONAL RECIPE COLLECTION
5
3
BECOME A TASTE MEMBER
FOLLOW US
7
6
AD BLOCK
MREC
7
Tap below to add
Taste.com.au to your Home
Screen for quick access.
Promotional area for seasonal category
types e.g. Christmas, Spring, Australia Day,
Easter, etc.
Find a recipe displays the search modal In
Its default state #0.1
Call to action to sign up to Taste.
to #0.7
Links
Follow Taste on Facebook links directly to
the taste facebook page and on Twitter
http://twltter.com/team_tasty
The first "x" times a user visits
taste.com.au on their smartphone, display
the prompt to bookmark the site (add icon
to homescreen).

28. Step 14: Admin and Technical Requirements
Document the user stories that you need as administrators and project
owners. List out any brand, tech or communications requirements or
restraints that might impact the project.
Do this last.
If your requirements conflict with the user stories, you should resolve that conflict in
favour of the user.
FWD Presentation

29. Step 15: Collate these documents
You now have enough information to brief your design and tech team
to start work on the project.
FWD Presentation
•
•
•
•
•
Key site vision
Personas
Prioritised user stories
Wireframes / sketches
Requirements

30. Takeaways
Develop an idea of who your users are.
Frame your brief with user stories to ensure you remain focused on
your users.
Avoid developing laundry lists of requirements.
FWD Presentation

31. Questions?
FWD Presentation