SlideShare uma empresa Scribd logo
1 de 74
Baixar para ler offline
Agile Prototyping Best
Practices
Nate Ginesi
About Me
Nate Ginesi
Senior Information Architect
Background is in visual design and marketing.
Started in design and SEO and moved to
Information Architecture and User Experience
because the problem solving aspect and
psychology of design is always what intrigued me.
I love that I still get to use my design problems
solving skills while solving complex business
problems for users.
ME
About LookThink
LookThink is a full service user experience agency focusing
on B2B enterprise product design.
LookThink.com
Our Clients
$
COMPLEXITY
TIMEFRAME
Days YearsLessComplexMoreComplex
$
$
$
$
$
$
$
$
$
$
$
$
$
$
$
Our Projects
Vary widely …
• in scope.
• in timeframe.
• as to when we enter the project.
• in client involvement.
• in the number of people working
on them.
What I hope you get out of this
• Help you move to a more Agile design process.
• Obtain faster approvals from product owners.
• Create natural collaboration with design team, development team,
and clients.
• Provide smoother handoffs to developers.
• Make your lives easier.
So let’s talk about how we got here ...
PROTOTYPINGSTATIC WIREFRAMES
Agile Prototyping Best Practices
Agile Prototyping Best Practices
Agile Prototyping Best Practices
Shown to clients for approval:
Note the versioning, and reference to the 187 page
requirement document.
Easy to follow, right?
Given to developers for development:
I kid you not …
this happened
OUR UX SOLUTIONS
How they looked:
What the client saw:
Is this going to be open all the time?
Can I click this image?
What does this show
when clicked?
Why is this turned off?
What happens when I
click the map?
Where will this go?
What page is this?
What happens when I
click the video?
Can I click
on these?
So, can users
click these?
Why is this
turned off?
What happens when there are
more than 20 results?
Agile Prototyping Best Practices
We put an image here to
build trust in the brand.
The results page can only
support one search category at
a time.
We reduced the number of
links here to two to increase
focus.
Users are now enticed to
search first and can find
what they are looking for
easily.
Confused users can
now easily access the
video explaining who
you are.
The table is more well spaced to
provide easy scanning.
Suppressing the button will clue users
into the selection access.
Users will care
about the location
of their results, so a
map is critical to
them finding usable
results.
Users can now easily
access a particular
facility.
What we wanted the client to see:
We realized we were losing the fight,
not to our work, but to the static
wireframe as a deliverable
We committed to codeless
prototyping as our method of Agile
delivery
Committed to the switch in one month
1
2015
START USING PROTOTYPES!
STYLE TILES
PROTOTYPING
WIREFRAMES
Now, EVERYTHING we deliver prior to development
gets delivered in UXPin
AaDESIGNS
WHY?
Clarity …
Acceptance criteria
If you’re going to make the move to prototyping,
here are a few things to consider:
1. There WILL be a learning curve with the technology.
Practice makes perfect.
2. Don’t panic when you feel like you’re spending WAY more time up front.
What you lose in time you’ll save in frustration.
3. Timelines for deliverables will be different throughout the project.
But you’ll get more out of each deliverable.
4. Accept that there will be things you can’t demonstrate.
Look for other examples online to help.
How do we incorporate these prototypes into our process?
Why am I here talking to you?
What have we learned?
What has been successful?
Best Practice #1
Prototype in Chunks: Depth vs. Breadth
vs.
… EVERYTHING FOR ME
STARTS ON PAPER
… THEY AREN’T PRETTY
… THEY’RE BARELY LEGIBLE
… BUT THEY WORK
Simple boxes
Links to pages
Light interactions
Content if possible
Are we done here?
How do I retrieve my tasks?
How do I see what I sent?
How do I know when tasks are complete?
What do the permissions look like?
What defines a complete task?
Can I put deadlines on tasks?
Nope: This is too much
for this sprint.
Agile Prototyping Best Practices
Option 1 Option 2 Option 3 Option 4
For dropdown example, see navigation at www.theopen.com
www.theopen.com
Link to references online to save time.
Best Practice #2
Prioritize your use cases
for prototyping
When deciding what to prototype first
focus on targets that will
ease approvals and create clarity
Keep your ears open for statements like:
“I’m just not sure about this.”
“I don’t think people will get it.”
“I don’t understand what’s happening here.”
“Can you explain to me why we have to do this?”
“Do you think people are going to see that?”
Priority #1
Has the client expressed confusion or concern over a particular piece of functionality?
Having a client or stakeholder
hung up on a piece of
functionality is a sure fire way to
add hours to a project.
Recognize confusion and address it quickly!
Priority #2
What are the highest value targets?
Target the critical
pieces first.
If there are critical spots in the application,
e.g. posting a photo in a photo sharing app,
focus on getting those interactions in front
of people and vetted before building out
things like the settings.
Do this
before
this
Priority #3
What are the most complex interactions?
You may not have to build it out. If it’s doing something similar to another site, save time and reference that.
Option 1 Option 2 Option 3 Option 4
For dropdown example, see navigation at www.theopen.com
www.theopen.com
Priority #4
What pieces are using commonly accepted UI patterns?
If you’re not doing
anything novel, it can
probably wait.
If you’re dealing with a known entity, you
can usually wait to prototype the details,
reference another instance, or avoid it
altogether, e.g. a standard login.
Priority #5
What parts of the product have we not figured out yet?
You can’t prototype what
you don’t know.
Create the page so you don’t interrupt flow, but
leave it blank if you don’t know what it is yet.
?
Best Practice #3
Pace Your Fidelity
Two types of fidelity:
INTERACTIVE (FUNCTIONAL) FIDELITY
How complete are the links, interactions, of the prototype?
DESIGN (VISUAL) FIDELITY
How complete is the design with regards to colors, shapes, hierarchy,
layout, content etc.?
Fidelity over time
A quick landscape of prototyping fidelities. (Image credit:
Fred Beecher, Boxes & Arrows)(View large version)
Benefits of your lo-fi version
• Acts as sitemap, a 10,000-foot view
• Just the basic interactions to get through the app
• Low investment
• Helps find holes in your requirements
If you don’t have content, write it!*
• The more you write for web products, the better you
get at it.
• You get a much deeper understanding of the product.
• The best way to get the right content from the client, is
to put in wrong content.
*obviously there are instances when budget and timeline don’t allow for this, but if you’re having a
hard time getting content from a client, this is an effective way to get them to act.
The more realistic the content, the better
both designers and devs can
understand the full scope of the system
Visual fidelity over time
A quick landscape of prototyping fidelities. (Image credit:
Fred Beecher, Boxes & Arrows)(View large version)
Designs get a separate prototype.
• We lower the functional fidelity, but raise the
visual fidelity to a production level design.
• These are often done in Sketch and
exported back into UXPin.
• Since stakeholders have already seen the
functionality in the functional prototype, we
don’t have to spend time recreating it in the
visual prototype.
• Allows design and IA to work in parallel.
Designs
Don’t recreate the
prototype in design.
• Focus on a few key interactions
and states.
• Use simple toggle and hide
functions and leave out any
complex logic.
• If you’re building for user
testing, focus only on the things
you’re testing.
Best Practice #4
Annotate Your User Flows
and
Your prototype becomes the documentation
Developers follow on screen
annotations to understand
what the app DOES, and not
just follow the documentation
and acceptance criteria.
Your
documentation
here
Highlight functionality on a user journey
E.g. “A user arrives on a page
with a table of data. A search bar
is available for the user to find a
specific data element. When the
user hits search, the table will
narrow the results. Upon clicking
a result, the user will go to the
individual record.”
And then the underlines would
show the focus state, the search
results table, and link to the
individual record respectively.
Reduce confusion by including states
Ensure you have all the different states the page could be in and ensure developers can find them easily
instead of having to click around.
Provide triggers on the
side of the page and
use documentation to
supplement by
providing the story.
Side of your prototype Native UXPin documentation
Reuse elements
(links, triggers, toggles, etc.)
When it makes sense, you can repeat elements in your off screen documentation.
Best used to reinforce functionality for elements that UXPin doesn’t let you clearly pin.
Modals MultistatesHidden elements
Benefits of the documentation?
- Ensures that devs see all the interactions.
- Devs get a better sense of the product as a whole.
- It allows the devs to plan ahead before their spring begins.
- Gives QA folks more contextual acceptance criteria.
- Creates a common language between devs and designers.
- It bakes in a level of user testing.
Best Practice #5
Re-use Your Components
Reusable elements for all team members
Expand upon what is already provided
Input and search fields
that clear on click
Simulated “Spotify” style search
Custom examples we’ve created with UXPin library as a start:
Tooltips that stay active
on hover
Expand upon what is already provided
Custom examples we’ve created with UXPin library as a start:
Easily editable sliders Self contained modals that can be dropped anywhere
Why use a UI kit?
- Very quickly creates visual clarity and “value” to clients.
- Translates easily into a design language.
- Anyone on the team can use it regardless of skill level.
- No lost momentum worrying about the HOW it works.
- Enormous time savings.
Best Practice #6
Validate Small Builds Often
The more you validate,
and the more you communicate,
the more agile you can be
Early validation increases agility
• Finds small mistakes before they’re big ones.
• Finds holes in the product.
• Prevents over-architecting.
• Increases communication.
Validate small, complete pieces
• If demoing incomplete thoughts, do so in person.
• Focus on flows first.
• Move to smaller interactions next.
• Demo only once you’ve added clarity.
• Don’t abandon the user.
• Reference earlier reviews to validate decisions for better
buy in.
WHAT HAVE THE RESULTS BEEN LIKE?
Things just run smoother
We’re able to spend more time on real business
solutions and user experiences, and spend less time
dealing with … the crap.
(for lack of a better term)
Benefits of agile prototyping
- There’s no risk of someone opening the wrong PDF from the email last
week instead of the most recent version
- There’s a common language between client, developers, and designers.
- When we work in UXPin, everything is viewed at the correct size in a
browser.
- No zooming issues.
- We can easily set breakpoints.
- We know it will display reliably on the client’s devices.
- THIS is why we put designs back into UXPin
Benefits of agile prototyping (cont.)
- We’ve seen faster approval from clients.
- Clients aren’t caught up in the deliverable.
- They can focus more on business solutions and UX work we did for them.
- They can interact with the deliverable instead of guessing.
- Higher quality and consistency of our work.
Benefits of agile prototyping (cont.)
- Less cycles are being wasted on petty stuff.
- Better conversations and relationships with developers.
- Comments and feedback are more easily managed.
- No more crazy email threads.
- Feedback cycles are much faster.
- Better questions during reviews.
Overall, life is just easier with prototyping
CLIENT
IA
DEV
DESIGN
Best practices for agile prototyping (summary)
1. Prototype in Chunks: Depth vs. Breadth
2. Prioritize Your Use Cases for Prototyping
3. Pace Your Fidelity
4. Annotate Your User Flows
5. Re-use Your Components
6. Validate Small Builds Often
THANK YOU!
If you’re interested in seeing more of what we do
www.lookthink.com
www.lookthink.com/blog
Thank you for your time!
Questions?
and

Mais conteúdo relacionado

Mais procurados

Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Researchuxpin
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design Systemuxpin
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your ProjectsKarl Kaufmann
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityuxpin
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...uxpin
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Studyuxpin
 
Agile For UX Practitioners
Agile For UX PractitionersAgile For UX Practitioners
Agile For UX PractitionersAnders Ramsay
 
Code with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersCode with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersAnita Cheng
 
Collaborative Design for Enterprise Teams
Collaborative Design for Enterprise TeamsCollaborative Design for Enterprise Teams
Collaborative Design for Enterprise Teamsuxpin
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Amrita Aviyente
 
Integrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowIntegrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowKarl Kaufmann
 
Scaling UX in Organizations
Scaling UX in OrganizationsScaling UX in Organizations
Scaling UX in Organizationsuxpin
 
Mural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesMural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesJohn Murray
 
Lean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopLean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopCassy Rowe
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileJeff Gothelf
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...John Murray
 

Mais procurados (20)

Best Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote ResearchBest Practices From 10 Years of Remote Research
Best Practices From 10 Years of Remote Research
 
Creating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design SystemCreating and Scaling an Enterprise Design System
Creating and Scaling an Enterprise Design System
 
Incorporating UX into Your Projects
Incorporating UX into Your ProjectsIncorporating UX into Your Projects
Incorporating UX into Your Projects
 
Design systems: accounting for quality and scalability
Design systems: accounting for quality and scalabilityDesign systems: accounting for quality and scalability
Design systems: accounting for quality and scalability
 
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
Surviving the Hype: An Experimental Framework for Scaling Enterprise Design T...
 
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case StudyThe Future of Enterprise UX Design: An Asana & Quickbooks Case Study
The Future of Enterprise UX Design: An Asana & Quickbooks Case Study
 
Agile For UX Practitioners
Agile For UX PractitionersAgile For UX Practitioners
Agile For UX Practitioners
 
Code with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX DevelopersCode with Empathy: UX for Engineers and UX Developers
Code with Empathy: UX for Engineers and UX Developers
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slides
 
Lean UX Workshop
Lean UX WorkshopLean UX Workshop
Lean UX Workshop
 
Collaborative Design for Enterprise Teams
Collaborative Design for Enterprise TeamsCollaborative Design for Enterprise Teams
Collaborative Design for Enterprise Teams
 
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!Agile + Lean Startup principles + Lean UX -> How to make it all work together!
Agile + Lean Startup principles + Lean UX -> How to make it all work together!
 
Integrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowIntegrating Design and Development in Your Workflow
Integrating Design and Development in Your Workflow
 
Scaling UX in Organizations
Scaling UX in OrganizationsScaling UX in Organizations
Scaling UX in Organizations
 
Mural: Build Experiences Not Features
Mural: Build Experiences Not FeaturesMural: Build Experiences Not Features
Mural: Build Experiences Not Features
 
Lean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 WorkshopLean User Research - UXPA 2013 Workshop
Lean User Research - UXPA 2013 Workshop
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
Introduction to Lean UX
Introduction to Lean UXIntroduction to Lean UX
Introduction to Lean UX
 
Beyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and AgileBeyond Staggered Sprints: Integrating User Experience and Agile
Beyond Staggered Sprints: Integrating User Experience and Agile
 
Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...Why your product team should use User Story Mapping to link user research to ...
Why your product team should use User Story Mapping to link user research to ...
 

Destaque

UX Strategy Blueprint for Agile Teams
UX Strategy Blueprint for Agile TeamsUX Strategy Blueprint for Agile Teams
UX Strategy Blueprint for Agile Teamsuxpin
 
Lean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case StudyLean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case Studyuxpin
 
Team Personas for Enterprise UX
Team Personas for Enterprise UXTeam Personas for Enterprise UX
Team Personas for Enterprise UXuxpin
 
Lean Experiments for Agile Teams
Lean Experiments for Agile TeamsLean Experiments for Agile Teams
Lean Experiments for Agile Teamsuxpin
 
Best Practices From 5 Years of Distributed UX Design
Best Practices From 5 Years of Distributed UX DesignBest Practices From 5 Years of Distributed UX Design
Best Practices From 5 Years of Distributed UX Designuxpin
 
The Perfect Designer and Developer Workflow
The Perfect Designer and Developer WorkflowThe Perfect Designer and Developer Workflow
The Perfect Designer and Developer Workflowuxpin
 
Flexible Design Sprints for Agile Teams
Flexible Design Sprints for Agile TeamsFlexible Design Sprints for Agile Teams
Flexible Design Sprints for Agile Teamsuxpin
 
The State of Enterprise UX 2016: Panel Discussion
The State of Enterprise UX 2016: Panel DiscussionThe State of Enterprise UX 2016: Panel Discussion
The State of Enterprise UX 2016: Panel Discussionuxpin
 
Beautiful Seams: The Intuit Design System
Beautiful Seams: The Intuit Design SystemBeautiful Seams: The Intuit Design System
Beautiful Seams: The Intuit Design Systemuxpin
 
Practical UX Research for the Enterprise
Practical UX Research for the EnterprisePractical UX Research for the Enterprise
Practical UX Research for the Enterpriseuxpin
 
Mission-Based Experience Strategy
Mission-Based Experience StrategyMission-Based Experience Strategy
Mission-Based Experience Strategyuxpin
 
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...uxpin
 
Agile UX Without Breaking Products
Agile UX Without Breaking ProductsAgile UX Without Breaking Products
Agile UX Without Breaking Productsuxpin
 
Spreading Design Thinking in Organizations
Spreading Design Thinking in OrganizationsSpreading Design Thinking in Organizations
Spreading Design Thinking in Organizationsuxpin
 
Designing Meaningful Data Products
Designing Meaningful Data ProductsDesigning Meaningful Data Products
Designing Meaningful Data Productsuxpin
 
Eliminating UX Debt in the Enterprise
Eliminating UX Debt in the EnterpriseEliminating UX Debt in the Enterprise
Eliminating UX Debt in the Enterpriseuxpin
 
Designing a Sustainable Enterprise UX Process
Designing a Sustainable Enterprise UX ProcessDesigning a Sustainable Enterprise UX Process
Designing a Sustainable Enterprise UX Processuxpin
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammeNeil Allison
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean StartupLane Goldstone
 

Destaque (20)

UX Strategy Blueprint for Agile Teams
UX Strategy Blueprint for Agile TeamsUX Strategy Blueprint for Agile Teams
UX Strategy Blueprint for Agile Teams
 
Lean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case StudyLean UX in the Enterprise: A Government Case Study
Lean UX in the Enterprise: A Government Case Study
 
Team Personas for Enterprise UX
Team Personas for Enterprise UXTeam Personas for Enterprise UX
Team Personas for Enterprise UX
 
Lean Experiments for Agile Teams
Lean Experiments for Agile TeamsLean Experiments for Agile Teams
Lean Experiments for Agile Teams
 
Best Practices From 5 Years of Distributed UX Design
Best Practices From 5 Years of Distributed UX DesignBest Practices From 5 Years of Distributed UX Design
Best Practices From 5 Years of Distributed UX Design
 
The Perfect Designer and Developer Workflow
The Perfect Designer and Developer WorkflowThe Perfect Designer and Developer Workflow
The Perfect Designer and Developer Workflow
 
Flexible Design Sprints for Agile Teams
Flexible Design Sprints for Agile TeamsFlexible Design Sprints for Agile Teams
Flexible Design Sprints for Agile Teams
 
The State of Enterprise UX 2016: Panel Discussion
The State of Enterprise UX 2016: Panel DiscussionThe State of Enterprise UX 2016: Panel Discussion
The State of Enterprise UX 2016: Panel Discussion
 
Beautiful Seams: The Intuit Design System
Beautiful Seams: The Intuit Design SystemBeautiful Seams: The Intuit Design System
Beautiful Seams: The Intuit Design System
 
Practical UX Research for the Enterprise
Practical UX Research for the EnterprisePractical UX Research for the Enterprise
Practical UX Research for the Enterprise
 
Mission-Based Experience Strategy
Mission-Based Experience StrategyMission-Based Experience Strategy
Mission-Based Experience Strategy
 
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...
Seismic Change in Enterprise UX: Blowing Up Your Legacy System to Start From ...
 
Agile UX Without Breaking Products
Agile UX Without Breaking ProductsAgile UX Without Breaking Products
Agile UX Without Breaking Products
 
Spreading Design Thinking in Organizations
Spreading Design Thinking in OrganizationsSpreading Design Thinking in Organizations
Spreading Design Thinking in Organizations
 
Designing Meaningful Data Products
Designing Meaningful Data ProductsDesigning Meaningful Data Products
Designing Meaningful Data Products
 
Eliminating UX Debt in the Enterprise
Eliminating UX Debt in the EnterpriseEliminating UX Debt in the Enterprise
Eliminating UX Debt in the Enterprise
 
Designing a Sustainable Enterprise UX Process
Designing a Sustainable Enterprise UX ProcessDesigning a Sustainable Enterprise UX Process
Designing a Sustainable Enterprise UX Process
 
Putting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website ProgrammePutting personas to work - University of Edinburgh Website Programme
Putting personas to work - University of Edinburgh Website Programme
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean Startup
 
Lean UX workshop - Part One
Lean UX workshop  - Part OneLean UX workshop  - Part One
Lean UX workshop - Part One
 

Semelhante a Agile Prototyping Best Practices

Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeGessica Puri
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?ProductCamp Chicago
 
Part C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docxPart C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docxsmile790243
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopReuven Cohen
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem Jenica Welch
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
Create free website
Create free websiteCreate free website
Create free websitefullerhqim
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their inputRandy Earl
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User TestingLaura Levisay
 
How to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageHow to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageBuiltvisible
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranetsContent Formula
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototypingMarcelo Graciolli
 
Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdfRanaFoud
 
Wendy week five power point busey
Wendy week five power point buseyWendy week five power point busey
Wendy week five power point buseywendyr1974
 

Semelhante a Agile Prototyping Best Practices (20)

Design Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: WireframeDesign Process | Tool 02: Scenario - Tool 03: Wireframe
Design Process | Tool 02: Scenario - Tool 03: Wireframe
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
Design process
Design processDesign process
Design process
 
PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?PCC2 - How do I incorporate Apple-like design into my products?
PCC2 - How do I incorporate Apple-like design into my products?
 
Part C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docxPart C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docx
 
Citrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping WorkshopCitrix Labs Rapid Prototyping Workshop
Citrix Labs Rapid Prototyping Workshop
 
User Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the UglyUser Experience Design + Agile: The Good, The Bad, and the Ugly
User Experience Design + Agile: The Good, The Bad, and the Ugly
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
Create free website
Create free websiteCreate free website
Create free website
 
"Open" includes users - Leverage their input
"Open" includes users - Leverage their input"Open" includes users - Leverage their input
"Open" includes users - Leverage their input
 
Prototyping & User Testing
Prototyping & User TestingPrototyping & User Testing
Prototyping & User Testing
 
LA Uncubed presentation
LA Uncubed presentationLA Uncubed presentation
LA Uncubed presentation
 
Os Leung
Os LeungOs Leung
Os Leung
 
How to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs languageHow to make change happen in your organisation by talking your devs language
How to make change happen in your organisation by talking your devs language
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranets
 
The ultimate guide to prototyping
The ultimate guide to prototypingThe ultimate guide to prototyping
The ultimate guide to prototyping
 
Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdf
 
Wendy week five power point busey
Wendy week five power point buseyWendy week five power point busey
Wendy week five power point busey
 

Mais de uxpin

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefelduxpin
 
From the designers laptop to the users
From the designers laptop to the usersFrom the designers laptop to the users
From the designers laptop to the usersuxpin
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systemsuxpin
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systemsuxpin
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterpriseuxpin
 
Should Designers?
Should Designers?Should Designers?
Should Designers?uxpin
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Processuxpin
 
From the designers laptop to the users
From the designers laptop to the usersFrom the designers laptop to the users
From the designers laptop to the usersuxpin
 
Accessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison ShawAccessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison Shawuxpin
 
Sonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teamsSonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teamsuxpin
 
UXPin: State of the Union Product Keynote by Marcin Treder
UXPin: State of the Union Product Keynote by Marcin TrederUXPin: State of the Union Product Keynote by Marcin Treder
UXPin: State of the Union Product Keynote by Marcin Trederuxpin
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimasuxpin
 
Scaling Products With Design Systems
Scaling Products With Design Systems Scaling Products With Design Systems
Scaling Products With Design Systems uxpin
 
Developing UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case StudyDeveloping UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case Studyuxpin
 
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...uxpin
 
Automating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case StudyAutomating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case Studyuxpin
 
Calculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial ModelsCalculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial Modelsuxpin
 
From 6 to 126 in 4 Years: The Story Behind Atlassian Design
From 6 to 126 in 4 Years: The Story Behind Atlassian DesignFrom 6 to 126 in 4 Years: The Story Behind Atlassian Design
From 6 to 126 in 4 Years: The Story Behind Atlassian Designuxpin
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativityuxpin
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Processuxpin
 

Mais de uxpin (20)

Creating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany SonefeldCreating and maintaining a design system for 130 teams - Bethany Sonefeld
Creating and maintaining a design system for 130 teams - Bethany Sonefeld
 
From the designers laptop to the users
From the designers laptop to the usersFrom the designers laptop to the users
From the designers laptop to the users
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systems
 
Principles & ux_systems
Principles & ux_systemsPrinciples & ux_systems
Principles & ux_systems
 
Initiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the EnterpriseInitiating and Sustaining Design Systems for the Enterprise
Initiating and Sustaining Design Systems for the Enterprise
 
Should Designers?
Should Designers?Should Designers?
Should Designers?
 
Evolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and ProcessEvolving your Design System: People, Product, and Process
Evolving your Design System: People, Product, and Process
 
From the designers laptop to the users
From the designers laptop to the usersFrom the designers laptop to the users
From the designers laptop to the users
 
Accessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison ShawAccessibility in Design Systems by Allison Shaw
Accessibility in Design Systems by Allison Shaw
 
Sonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teamsSonefeld creating and maintaining a design system for 130 teams
Sonefeld creating and maintaining a design system for 130 teams
 
UXPin: State of the Union Product Keynote by Marcin Treder
UXPin: State of the Union Product Keynote by Marcin TrederUXPin: State of the Union Product Keynote by Marcin Treder
UXPin: State of the Union Product Keynote by Marcin Treder
 
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken SkistimasConsistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
Consistency vs. Flexibility in Design Systems: A GE Case Study by Ken Skistimas
 
Scaling Products With Design Systems
Scaling Products With Design Systems Scaling Products With Design Systems
Scaling Products With Design Systems
 
Developing UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case StudyDeveloping UX ROI in Enterprise Land: An ADP Case Study
Developing UX ROI in Enterprise Land: An ADP Case Study
 
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...
Three's a Party: How Trifectas Help Product, Engineering, and Design Work Tog...
 
Automating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case StudyAutomating Design Processes for Teams: An IDEO Case Study
Automating Design Processes for Teams: An IDEO Case Study
 
Calculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial ModelsCalculating the ROI of UX with Standard Financial Models
Calculating the ROI of UX with Standard Financial Models
 
From 6 to 126 in 4 Years: The Story Behind Atlassian Design
From 6 to 126 in 4 Years: The Story Behind Atlassian DesignFrom 6 to 126 in 4 Years: The Story Behind Atlassian Design
From 6 to 126 in 4 Years: The Story Behind Atlassian Design
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativity
 
Design Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design ProcessDesign Systems First: Everyday Practices for a Scaleable Design Process
Design Systems First: Everyday Practices for a Scaleable Design Process
 

Último

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 

Último (20)

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 

Agile Prototyping Best Practices

  • 2. About Me Nate Ginesi Senior Information Architect Background is in visual design and marketing. Started in design and SEO and moved to Information Architecture and User Experience because the problem solving aspect and psychology of design is always what intrigued me. I love that I still get to use my design problems solving skills while solving complex business problems for users. ME
  • 3. About LookThink LookThink is a full service user experience agency focusing on B2B enterprise product design. LookThink.com
  • 5. $ COMPLEXITY TIMEFRAME Days YearsLessComplexMoreComplex $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ Our Projects Vary widely … • in scope. • in timeframe. • as to when we enter the project. • in client involvement. • in the number of people working on them.
  • 6. What I hope you get out of this • Help you move to a more Agile design process. • Obtain faster approvals from product owners. • Create natural collaboration with design team, development team, and clients. • Provide smoother handoffs to developers. • Make your lives easier.
  • 7. So let’s talk about how we got here ... PROTOTYPINGSTATIC WIREFRAMES
  • 11. Shown to clients for approval:
  • 12. Note the versioning, and reference to the 187 page requirement document. Easy to follow, right? Given to developers for development:
  • 13. I kid you not … this happened
  • 16. What the client saw: Is this going to be open all the time? Can I click this image? What does this show when clicked? Why is this turned off? What happens when I click the map? Where will this go? What page is this? What happens when I click the video? Can I click on these? So, can users click these? Why is this turned off? What happens when there are more than 20 results?
  • 18. We put an image here to build trust in the brand. The results page can only support one search category at a time. We reduced the number of links here to two to increase focus. Users are now enticed to search first and can find what they are looking for easily. Confused users can now easily access the video explaining who you are. The table is more well spaced to provide easy scanning. Suppressing the button will clue users into the selection access. Users will care about the location of their results, so a map is critical to them finding usable results. Users can now easily access a particular facility. What we wanted the client to see:
  • 19. We realized we were losing the fight, not to our work, but to the static wireframe as a deliverable
  • 20. We committed to codeless prototyping as our method of Agile delivery
  • 21. Committed to the switch in one month 1 2015 START USING PROTOTYPES!
  • 22. STYLE TILES PROTOTYPING WIREFRAMES Now, EVERYTHING we deliver prior to development gets delivered in UXPin AaDESIGNS
  • 23. WHY?
  • 26. If you’re going to make the move to prototyping, here are a few things to consider: 1. There WILL be a learning curve with the technology. Practice makes perfect. 2. Don’t panic when you feel like you’re spending WAY more time up front. What you lose in time you’ll save in frustration. 3. Timelines for deliverables will be different throughout the project. But you’ll get more out of each deliverable. 4. Accept that there will be things you can’t demonstrate. Look for other examples online to help.
  • 27. How do we incorporate these prototypes into our process?
  • 28. Why am I here talking to you? What have we learned? What has been successful?
  • 29. Best Practice #1 Prototype in Chunks: Depth vs. Breadth vs.
  • 30. … EVERYTHING FOR ME STARTS ON PAPER
  • 31. … THEY AREN’T PRETTY … THEY’RE BARELY LEGIBLE
  • 32. … BUT THEY WORK
  • 33. Simple boxes Links to pages Light interactions Content if possible
  • 34. Are we done here? How do I retrieve my tasks? How do I see what I sent? How do I know when tasks are complete? What do the permissions look like? What defines a complete task? Can I put deadlines on tasks? Nope: This is too much for this sprint.
  • 36. Option 1 Option 2 Option 3 Option 4 For dropdown example, see navigation at www.theopen.com www.theopen.com Link to references online to save time.
  • 37. Best Practice #2 Prioritize your use cases for prototyping
  • 38. When deciding what to prototype first focus on targets that will ease approvals and create clarity
  • 39. Keep your ears open for statements like: “I’m just not sure about this.” “I don’t think people will get it.” “I don’t understand what’s happening here.” “Can you explain to me why we have to do this?” “Do you think people are going to see that?” Priority #1 Has the client expressed confusion or concern over a particular piece of functionality? Having a client or stakeholder hung up on a piece of functionality is a sure fire way to add hours to a project. Recognize confusion and address it quickly!
  • 40. Priority #2 What are the highest value targets? Target the critical pieces first. If there are critical spots in the application, e.g. posting a photo in a photo sharing app, focus on getting those interactions in front of people and vetted before building out things like the settings. Do this before this
  • 41. Priority #3 What are the most complex interactions? You may not have to build it out. If it’s doing something similar to another site, save time and reference that. Option 1 Option 2 Option 3 Option 4 For dropdown example, see navigation at www.theopen.com www.theopen.com
  • 42. Priority #4 What pieces are using commonly accepted UI patterns? If you’re not doing anything novel, it can probably wait. If you’re dealing with a known entity, you can usually wait to prototype the details, reference another instance, or avoid it altogether, e.g. a standard login.
  • 43. Priority #5 What parts of the product have we not figured out yet? You can’t prototype what you don’t know. Create the page so you don’t interrupt flow, but leave it blank if you don’t know what it is yet. ?
  • 44. Best Practice #3 Pace Your Fidelity
  • 45. Two types of fidelity: INTERACTIVE (FUNCTIONAL) FIDELITY How complete are the links, interactions, of the prototype? DESIGN (VISUAL) FIDELITY How complete is the design with regards to colors, shapes, hierarchy, layout, content etc.?
  • 46. Fidelity over time A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, Boxes & Arrows)(View large version)
  • 47. Benefits of your lo-fi version • Acts as sitemap, a 10,000-foot view • Just the basic interactions to get through the app • Low investment • Helps find holes in your requirements
  • 48. If you don’t have content, write it!* • The more you write for web products, the better you get at it. • You get a much deeper understanding of the product. • The best way to get the right content from the client, is to put in wrong content. *obviously there are instances when budget and timeline don’t allow for this, but if you’re having a hard time getting content from a client, this is an effective way to get them to act.
  • 49. The more realistic the content, the better both designers and devs can understand the full scope of the system
  • 50. Visual fidelity over time A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, Boxes & Arrows)(View large version) Designs get a separate prototype. • We lower the functional fidelity, but raise the visual fidelity to a production level design. • These are often done in Sketch and exported back into UXPin. • Since stakeholders have already seen the functionality in the functional prototype, we don’t have to spend time recreating it in the visual prototype. • Allows design and IA to work in parallel. Designs
  • 51. Don’t recreate the prototype in design. • Focus on a few key interactions and states. • Use simple toggle and hide functions and leave out any complex logic. • If you’re building for user testing, focus only on the things you’re testing.
  • 52. Best Practice #4 Annotate Your User Flows and
  • 53. Your prototype becomes the documentation Developers follow on screen annotations to understand what the app DOES, and not just follow the documentation and acceptance criteria. Your documentation here
  • 54. Highlight functionality on a user journey E.g. “A user arrives on a page with a table of data. A search bar is available for the user to find a specific data element. When the user hits search, the table will narrow the results. Upon clicking a result, the user will go to the individual record.” And then the underlines would show the focus state, the search results table, and link to the individual record respectively.
  • 55. Reduce confusion by including states Ensure you have all the different states the page could be in and ensure developers can find them easily instead of having to click around. Provide triggers on the side of the page and use documentation to supplement by providing the story. Side of your prototype Native UXPin documentation
  • 56. Reuse elements (links, triggers, toggles, etc.) When it makes sense, you can repeat elements in your off screen documentation. Best used to reinforce functionality for elements that UXPin doesn’t let you clearly pin. Modals MultistatesHidden elements
  • 57. Benefits of the documentation? - Ensures that devs see all the interactions. - Devs get a better sense of the product as a whole. - It allows the devs to plan ahead before their spring begins. - Gives QA folks more contextual acceptance criteria. - Creates a common language between devs and designers. - It bakes in a level of user testing.
  • 58. Best Practice #5 Re-use Your Components
  • 59. Reusable elements for all team members
  • 60. Expand upon what is already provided Input and search fields that clear on click Simulated “Spotify” style search Custom examples we’ve created with UXPin library as a start: Tooltips that stay active on hover
  • 61. Expand upon what is already provided Custom examples we’ve created with UXPin library as a start: Easily editable sliders Self contained modals that can be dropped anywhere
  • 62. Why use a UI kit? - Very quickly creates visual clarity and “value” to clients. - Translates easily into a design language. - Anyone on the team can use it regardless of skill level. - No lost momentum worrying about the HOW it works. - Enormous time savings.
  • 63. Best Practice #6 Validate Small Builds Often
  • 64. The more you validate, and the more you communicate, the more agile you can be
  • 65. Early validation increases agility • Finds small mistakes before they’re big ones. • Finds holes in the product. • Prevents over-architecting. • Increases communication.
  • 66. Validate small, complete pieces • If demoing incomplete thoughts, do so in person. • Focus on flows first. • Move to smaller interactions next. • Demo only once you’ve added clarity. • Don’t abandon the user. • Reference earlier reviews to validate decisions for better buy in.
  • 67. WHAT HAVE THE RESULTS BEEN LIKE?
  • 68. Things just run smoother We’re able to spend more time on real business solutions and user experiences, and spend less time dealing with … the crap. (for lack of a better term)
  • 69. Benefits of agile prototyping - There’s no risk of someone opening the wrong PDF from the email last week instead of the most recent version - There’s a common language between client, developers, and designers. - When we work in UXPin, everything is viewed at the correct size in a browser. - No zooming issues. - We can easily set breakpoints. - We know it will display reliably on the client’s devices. - THIS is why we put designs back into UXPin
  • 70. Benefits of agile prototyping (cont.) - We’ve seen faster approval from clients. - Clients aren’t caught up in the deliverable. - They can focus more on business solutions and UX work we did for them. - They can interact with the deliverable instead of guessing. - Higher quality and consistency of our work.
  • 71. Benefits of agile prototyping (cont.) - Less cycles are being wasted on petty stuff. - Better conversations and relationships with developers. - Comments and feedback are more easily managed. - No more crazy email threads. - Feedback cycles are much faster. - Better questions during reviews.
  • 72. Overall, life is just easier with prototyping CLIENT IA DEV DESIGN
  • 73. Best practices for agile prototyping (summary) 1. Prototype in Chunks: Depth vs. Breadth 2. Prioritize Your Use Cases for Prototyping 3. Pace Your Fidelity 4. Annotate Your User Flows 5. Re-use Your Components 6. Validate Small Builds Often
  • 74. THANK YOU! If you’re interested in seeing more of what we do www.lookthink.com www.lookthink.com/blog Thank you for your time! Questions? and