Stop making pretty websites that suck:
designing for the user

FWD Presentation
Hello,
We are Profero Sydney.
we create ideas people belong to™

Profero Agency Credentials 2013. Copyright © 2012-2013 Pr...
Barry Saunders
I'm a user experience architect. I work at Profero.
I’ve designed and managed websites and apps for Earth
H...
What I do
I help clients understand what they want, and help them shape their brief.
I help designers understand what the ...
Stop making pretty websites that suck:
designing for the user

FWD Presentation
we aren’t talking about art direction or brand

Source:	

http://tpdsaa.tumblr.com/
FWD Presentation
we’re talking about designing for users

FWD Presentation

Source:	

http://theprofoundprogrammer.com/
the number one problem with most websites

no coherent vision of what the site should do

FWD Presentation
the easiest way to prevent bad websites

define a clear brief that addresses the user’s experience

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

FWD Presentation
Step 1: preparation
Step away from the computer

FWD Presentation
The most powerful design tool
Pen and paper!

FWD Presentation
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...
Step 2: pair up

FWD Presentation
Step 3: chat and decide on an idea
Something like ‘a site for people to donate money to our organisation’.
Think of a prim...
Step 4: imagine who might use this site
Make a few notes about who this person is.

•
•
•
•

FWD Presentation

How old are...
Step 5: give your persona a name
This is the person we will be designing for. This is your ‘user persona’.
This helps us t...
Laura - digital influencer
!
Laura has been studying at uni for 4 years. Her goal is to
finish her university arts degree ...
Step 6: write a user story
A user story is a sentence that describes an interaction in the form of:
as ____________, I wan...
Step 7: write more user stories

Write as many as you think you need.
Remember that you are writing from the perspective o...
Step 8: review
Prioritise the stories.
A common prioritisation structure is:

•
•
•
•
FWD Presentation

Must Have
Should H...
Step 9: Draw!

Using pencil and paper, sketch up a page of what you think the site
could look like.
Don’t worry about neat...
Step 10: Share and compare

Present your sketch to your partner. Explain what it does, how it works.
Pick out the features...
Step 11: Draw! (again)

Sketch the same page again, this time incorporating the bits you liked
from your partner’s sketch....
Step 12: Share and compare (again)

You can do this a few times to really work through the different ways
you could design...
Step 13: Document

Take photos of your sketches to make sure you have a record of what
you’ve decided.

FWD Presentation
Optional: Wireframe

Carrier

9:41 PM
LOG
IN

1

Recipe of the day feature as per the iPhone
app, to maintain a base level...
Step 14: Admin and Technical Requirements

Document the user stories that you need as administrators and project
owners. L...
Step 15: Collate these documents
You now have enough information to brief your design and tech team
to start work on the p...
Takeaways

Develop an idea of who your users are.
Frame your brief with user stories to ensure you remain focused on
your ...
Questions?

FWD Presentation
Próxima SlideShare
Cargando en…5
×

Stop Making Pretty Websites That Suck

1.431 visualizaciones

Publicado el

Stop Making Pretty Websites That Suck: focusing on the user FWD2013

Publicado en: Diseño, Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.431
En SlideShare
0
De insertados
0
Número de insertados
762
Acciones
Compartido
0
Descargas
5
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Stop Making Pretty Websites That Suck

  1. 1. Stop making pretty websites that suck: designing for the user FWD Presentation
  2. 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. 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. 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. 5. Stop making pretty websites that suck: designing for the user FWD Presentation
  6. 6. we aren’t talking about art direction or brand Source: http://tpdsaa.tumblr.com/ FWD Presentation
  7. 7. we’re talking about designing for users FWD Presentation Source: http://theprofoundprogrammer.com/
  8. 8. the number one problem with most websites no coherent vision of what the site should do FWD Presentation
  9. 9. the easiest way to prevent bad websites define a clear brief that addresses the user’s experience FWD Presentation
  10. 10. Workshop A few quick techniques that will help you when designing websites and apps. FWD Presentation
  11. 11. Step 1: preparation Step away from the computer FWD Presentation
  12. 12. The most powerful design tool Pen and paper! FWD Presentation
  13. 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. 14. Step 2: pair up FWD Presentation
  15. 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. 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. 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. 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. 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. 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. 21. Step 8: review Prioritise the stories. A common prioritisation structure is: • • • • FWD Presentation Must Have Should Have Nice to Have Trivial
  22. 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. 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. 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. 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. 26. Step 13: Document Take photos of your sketches to make sure you have a record of what you’ve decided. FWD Presentation
  27. 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. 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. 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. 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. 31. Questions? FWD Presentation

×