stop making pretty websites that suck
DESCRIPTION
Stop Making Pretty Websites That Suck: focusing on the user FWD2013TRANSCRIPT
![Page 1: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/1.jpg)
FWD Presentation
Stop making pretty websites that suck:designing for the user
![Page 2: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/2.jpg)
Profero Agency Credentials 2013. Copyright © 2013-2014 Profero PLC
Profero Agency Credentials 2013. Copyright © 2012-2013 Profero LLC
we create ideas people belong to™
11Hello
,We are Profero Sydney.
![Page 3: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/3.jpg)
FWD Presentation
Barry Saunders
Feasible
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.
![Page 4: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/4.jpg)
FWD Presentation
What I do
Feasible
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.
![Page 5: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/5.jpg)
FWD Presentation
Stop making pretty websites that suck:designing for the user
![Page 6: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/6.jpg)
FWD Presentation
we aren’t talking about art direction or brand
Source:http://tpdsaa.tumblr.com/
![Page 7: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/7.jpg)
FWD Presentation
we’re talking about designing for users
Source:http://theprofoundprogrammer.com
/
![Page 8: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/8.jpg)
FWD Presentation
the number one problem with most websites
Feasible
no coherent vision of what the site should do
![Page 9: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/9.jpg)
FWD Presentation
the easiest way to prevent bad websites
Feasible
define a clear brief that addresses the user’s experience
![Page 10: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/10.jpg)
FWD Presentation
Workshop
Feasible
A few quick techniques that will help you when designing websites and apps.
![Page 11: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/11.jpg)
FWD Presentation
Step 1: preparation
Feasible
Step away from the computer
![Page 12: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/12.jpg)
FWD Presentation
The most powerful design tool
Feasible
Pen and paper!
![Page 13: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/13.jpg)
FWD Presentation
Free your mind
Feasible
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.
![Page 14: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/14.jpg)
FWD Presentation
Step 2: pair up
Feasible
![Page 15: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/15.jpg)
FWD Presentation
Step 3: chat and decide on an idea
Feasible
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.
![Page 16: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/16.jpg)
FWD Presentation
Step 4: imagine who might use this site
Feasible
Make a few notes about who this person is.
• How old are they?
• What do they do?
• What kinds of problems do they have?
• How might we be able to help this user?
![Page 17: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/17.jpg)
FWD Presentation
Step 5: give your persona a name
Feasible
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.
![Page 18: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/18.jpg)
Profero Agency Credentials 2013. Copyright © 2012-2013 Profero PLC
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.
Laura - digital influencer
![Page 19: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/19.jpg)
FWD Presentation
Step 6: write a user story
Feasible
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.
![Page 20: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/20.jpg)
FWD Presentation
Step 7: write more user stories
Feasible
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.
![Page 21: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/21.jpg)
FWD Presentation
Step 8: review
Feasible
Prioritise the stories.
A common prioritisation structure is:
•Must Have
•Should Have
•Nice to Have
•Trivial
![Page 22: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/22.jpg)
FWD Presentation
Step 9: Draw!
Feasible
Using pencil and paper, sketch up a page of what you think the site could look like.
Don’t worry about neatness.
![Page 23: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/23.jpg)
FWD Presentation
Step 10: Share and compare
Feasible
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.
![Page 24: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/24.jpg)
FWD Presentation
Step 11: Draw! (again)
Feasible
Sketch the same page again, this time incorporating the bits you liked from your partner’s sketch.
![Page 25: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/25.jpg)
FWD Presentation
Step 12: Share and compare (again)
Feasible
You can do this a few times to really work through the different ways you could design the site.
![Page 26: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/26.jpg)
FWD Presentation
Step 13: Document
Feasible
Take photos of your sketches to make sure you have a record of what you’ve decided.
![Page 27: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/27.jpg)
FWD Presentation
Optional: Wireframe
Feasible
If you have a UX person/producer, get them to do this.
If you don’t, you can use Powerpoint or Balsamiq.
Keep it high-level, we are looking for indicative detail, not pixel-perfect design.
![Page 28: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/28.jpg)
FWD Presentation
Step 14: Admin and Technical Requirements
Feasible
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.
![Page 29: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/29.jpg)
FWD Presentation
Step 15: Collate these documents
Feasible
You now have enough information to brief your design and tech team to start work on the project.
• Key site vision
• Personas
• Prioritised user stories
• Wireframes / sketches
• Requirements
![Page 30: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/30.jpg)
FWD Presentation
Takeaways
Feasible
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.
![Page 31: Stop Making Pretty Websites That Suck](https://reader033.vdocuments.us/reader033/viewer/2022042614/554ddd51b4c905c70e8b51af/html5/thumbnails/31.jpg)
FWD Presentation
Questions?
Feasible