• Save
Behind the Kimono - Iowa UPA
Upcoming SlideShare
Loading in...5
×
 

Behind the Kimono - Iowa UPA

on

  • 2,370 views

 

Statistics

Views

Total Views
2,370
Views on SlideShare
2,289
Embed Views
81

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 81

http://www.russunger.com 73
http://www.linkedin.com 8

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Behind the Kimono - Iowa UPA Behind the Kimono - Iowa UPA Presentation Transcript

    • Opening the Kimono: A look behind the design process Russ Unger | @russu Iowa UPA User Experience Director Happy Cog
    • we don’t show our work.
    • we don’t show our work designers do it
    • we don’t show our work developers do it
    • we don’t show our work but...
    • we don’t show our work have you ever seen a wireframe from: JJG? Peter Morville? Jared Spool?
    • we don’t show our work JJG? Global Navigation Default state store September 24, 2009 Version 1.0 logo search 2 Jesse James Garrett 1 cart 1. Today on HBR today on current account blogs books authors HBS downloads This new page highlights timely content from the blogs, magazine, hbr magazine 3 and books sections. explore hbr 4 2. Store area expand your knowledge build your expertise discover new approaches This area provides a focal point for all e-commerce related links. 3. Authors This new page allows users to find aggregated links to content from Partially expanded state popular authors across blogs, magazine, and books sections. 4. Explore drawer store logo search This expandable area encourages and facilitates exploration of cart content by subject. today on current account blogs books authors HBS downloads 5. Expand your knowledge hbr magazine This area features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes “Topics” category in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management 6. Build your expertise Information & technology Managing uncertainty Forecasting This area features editorially selected sub-categories from the current Global business Time management Knowledge management “Management Skills” category in search results. 5 7 7. Discover new approaches expand your knowledge build your expertise discover new approaches 6 This area features editorially selected sub-categories from the current “Tools & Methodologies” category in search results. 8. “More” links Fully expanded state These links drive users interested in exploring further to dedicated store landing pages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches Web Redesign | Harvard Business Review
    • we don’t show our work Peter Morville?
    • we don’t show our work Jared Spool?
    • we don’t show our work “our work is proprietary.”
    • we don’t show our work it’s time to ask your boss to let you show your work.
    • wireframing was the obvious choice.
    • wireframing was the obvious choice Visio HTML Axure Omnigraffle Pencil & Paper what is the best tool? Keynote Flash Catalyst iRise Fireworks Powerpoint Balsamiq
    • wireframing was the obvious choice “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that works for everyone just because it works for you now!” Me | @russu
    • wireframing was the obvious choice “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
    • wireframing was the obvious choice sigh.
    • wireframing was the obvious choice I <3 and...
    • wireframing was the obvious choice it’s time to end the debate of wireframes vs. prototypes.
    • wireframing was the obvious choice if you’re still arguing about wireframes and prototypes, you are missing the point.
    • wireframing was the obvious choice they’re just communication tools.
    • nut up or shut up.
    • nut up or shut up four designers
    • nut up or shut up two wireframers
    • nut up or shut up two prototypers!
    • nut up or shut up 1 problem.
    • nut up or shut up 2 rules.
    • nut up or shut up each designer uses a different tool.
    • nut up or shut up balsamiq omnigraffle axure rp fireworks/html
    • nut up or shut up no talking.
    • nut up or shut up oh... document everything.
    • s i d e b a r
    • sidebar we could have designed anything.
    • sidebar a college website without girls under trees.
    • sidebar a website selling affordance faucets.
    • sidebar the project had to be for a non-profit and had to be real.
    • the case study
    • the case study Tori Tuncan @lend4health www.lend4health.com “ If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?
    • the case study
    • the case study
    • the case study whew.
    • the case study connecting people is a manual process.
    • the case study not scalable.
    • the case study Never doubt that a small group of thoughtful, committed, citizens can change the world. Indeed, it is the only thing that ever has. ~Margaret Mead
    • requirements & research
    • research & requirements Gabby Hon @gabbyhon http://linkedin.com/in/gabbyhon @uxbookclubchicago http://uxbookclubchicago.org
    • research & requirements
    • research & requirements
    • research & requirements objective: design the path for funding a loan.
    • research & requirements how it’s done today: • user reviews profiles/needs in the blog format • user determines amount they can loan • user contacts lend4health • lend4health connects user and loan recipient • lend4health supplies loan agreement • user funds loan via paypal • lender repays funds via paypal per agreement • lender supplies updates to child’s progress to lend4health and lender • lend4health updates progress on website • continues until loan is paid back
    • research & requirements whew.
    • research & requirements a very manual process.
    • research & requirements not scalable.
    • this is how i do it
    • this is how i do it requirements Requirements Courtesy of: Gabby Hon @gabbyhon staywiththegroup.com
    • this is how i do it personas
    • this is how i do it information architecture
    • this is how i do it information architecture
    • this is how i do it information architecture
    • this is how i do it user journey Meet Angela The Loan Funder Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund Request (0.0.0.0) (1.0.0.0) (1.1.0.0) http://www.flickr.com/photos/ 11762156@N06/2912606267/ Part-time working mother of 8 year old son Avery who is able to stay with a babysitter several hours a day. Angela has been through the gamut of testing and wants to help others.
    • this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
    • this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) quantity over quality.
    • this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) quantity over quality. 15 sketches for 3 screens.
    • this is how i do it sketching
    • this is how i do it sketching i even sketched this presentation.
    • this is how i do it wireframing 50% off code: friendofruss (“friend of russ”)
    • this is how i do it wireframing Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
    • this is how i do it visual design Brad Simpson @simplybrad http://i-rradiate.com
    • this is how i do it visual design Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
    • this is how i do it kinda cool.
    • this is how i do it the entire process
    • the overlap
    • the overlap russ unger information architecture
    • the overlap fred beecher information architecture
    • the overlap will evans information architecture
    • the overlap russ unger sketching
    • the overlap todd zaki warfel sketching
    • the overlap fred beecher sketching
    • the overlap will evans sketching
    • the overlap russ unger visual design
    • the overlap todd zaki warfel visual design
    • the overlap fred beecher visual design
    • the overlap will evans visual design
    • the overlap the videos http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
    • Russ Unger | @russu ideaconference.org User Experience Director Happy Cog