Agile Prototyping Best Practices
Transcript of Agile Prototyping Best Practices
![Page 1: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/1.jpg)
Agile Prototyping Best PracticesNate Ginesi
In collaboration with:
![Page 2: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/2.jpg)
About Me
Nate GinesiSenior User Experience 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.
MEand
![Page 3: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/3.jpg)
About LookThink
LookThink is a full service user experience agency focusing on B2B enterprise product design.
and
![Page 4: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/4.jpg)
Our Clientsand
![Page 5: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/5.jpg)
$
CO
MP
LEX
ITY
TIMEFRAMEDays Years
Less
Com
plex
Mor
e C
ompl
ex
$$
$$
$
$
$
$
$
$
$
$
$
$
$
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.
and
![Page 7: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/7.jpg)
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.
and
![Page 8: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/8.jpg)
So let’s talk about how we got here ...
PROTOTYPINGSTATIC WIREFRAMES
and
![Page 9: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/9.jpg)
![Page 10: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/10.jpg)
![Page 11: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/11.jpg)
and
![Page 12: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/12.jpg)
Shown to clients for approval:
![Page 13: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/13.jpg)
Note the versioning, and reference to the 187 page requirement document.
Easy to follow, right?
Given to developers for development:
![Page 14: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/14.jpg)
I kid you not …this happened
and
![Page 15: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/15.jpg)
OUR UX SOLUTIONS
![Page 16: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/16.jpg)
How they looked:
![Page 17: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/17.jpg)
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?
![Page 18: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/18.jpg)
![Page 19: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/19.jpg)
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:
![Page 20: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/20.jpg)
We realized we were losing the fight, not to our work, but to the static
wireframe as a deliverable
and
![Page 21: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/21.jpg)
We committed to codeless prototyping as our method of Agile
delivery
and
![Page 22: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/22.jpg)
Committed to the switch in one month
1
2015
START USING PROTOTYPES!
and
![Page 23: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/23.jpg)
STYLE TILES
PROTOTYPING
WIREFRAMES
Now, EVERYTHING we deliver prior to development gets delivered in UXPin
AaDESIGNS
and
![Page 24: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/24.jpg)
WHY?
![Page 25: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/25.jpg)
Clarity …
![Page 26: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/26.jpg)
Acceptance criteriaand
![Page 27: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/27.jpg)
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.
and
![Page 28: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/28.jpg)
and
How do we incorporate these prototypes into our process?
![Page 29: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/29.jpg)
Why am I here talking to you?
What have we learned?
What has been successful?
and
![Page 30: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/30.jpg)
Best Practice #1
Prototype in Chunks: Depth vs. Breadth
vs.
and
![Page 31: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/31.jpg)
… EVERYTHING FOR ME STARTS ON PAPER
and
![Page 32: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/32.jpg)
… THEY AREN’T PRETTY… THEY’RE BARELY LEGIBLE
and
![Page 33: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/33.jpg)
… BUT THEY WORK
and
![Page 35: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/35.jpg)
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.
and
![Page 36: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/36.jpg)
and
![Page 37: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/37.jpg)
Option 1 Option 2 Option 3 Option 4
For dropdown example, see navigation at www.theopen.com
www.theopen.com
and
Link to references online to save time.
![Page 38: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/38.jpg)
Best Practice #2
Prioritize your use cases for prototyping
and
![Page 39: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/39.jpg)
When deciding what to prototype first focus on targets that will
ease approvals and create clarity
and
![Page 40: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/40.jpg)
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!
and
![Page 41: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/41.jpg)
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
beforethis
and
![Page 42: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/42.jpg)
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
![Page 43: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/43.jpg)
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.
and
![Page 44: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/44.jpg)
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. ?
and
![Page 45: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/45.jpg)
Best Practice #3
Pace Your Fidelity
and
![Page 46: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/46.jpg)
Two types of fidelity:
INTERACTIVE (FUNCTIONAL) FIDELITYHow complete are the links, interactions, of the prototype?
DESIGN (VISUAL) FIDELITYHow complete is the design with regards to colors, shapes, hierarchy, layout, content etc.?
and
![Page 47: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/47.jpg)
Fidelity over time
A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, Boxes & Arrows)(View large version)
and
![Page 48: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/48.jpg)
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
and
![Page 49: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/49.jpg)
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.
and
*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.
![Page 50: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/50.jpg)
and
The more realistic the content, the better both designers and devs can
understand the full scope of the system
![Page 51: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/51.jpg)
Visual fidelity over time
A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, Boxes & Arrows)(View large version)
and
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
![Page 52: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/52.jpg)
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.
![Page 53: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/53.jpg)
Learn more: free Guide to Prototyping Process
![Page 54: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/54.jpg)
Best Practice #4
Annotate Your User Flows
and
![Page 55: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/55.jpg)
Your prototype becomes the documentationDevelopers follow on screen annotations to understand what the app DOES, and not just follow the documentation and acceptance criteria.
Your documentation
here
and
![Page 56: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/56.jpg)
Highlight functionality on a user journeyE.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.
and
![Page 57: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/57.jpg)
Reduce confusion by including statesEnsure you have all the different states the page could be in and ensure developers can find them easily instead of having to click around.
and
![Page 58: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/58.jpg)
Reuse elements(links, triggers, toggles, etc.)
Copy the elements acting as triggers in the prototype and use them right in the annotations.
When they need to update, you can swap them out.
and
![Page 59: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/59.jpg)
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.
and
![Page 60: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/60.jpg)
Best Practice #5
Validate Small Builds Often
and
![Page 61: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/61.jpg)
Early validation increases agility
• Finds small mistakes before they’re big ones.• Finds holes in the product.• Prevents over-architecting.
![Page 62: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/62.jpg)
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.
![Page 63: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/63.jpg)
Learn more: free e-book bundle
![Page 64: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/64.jpg)
WHAT HAVE THE RESULTS BEEN LIKE?
and
![Page 65: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/65.jpg)
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)
and
![Page 66: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/66.jpg)
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
![Page 67: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/67.jpg)
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 designs.
and
![Page 68: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/68.jpg)
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.
and
![Page 69: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/69.jpg)
Overall, life is just easier with prototyping
CLIENT
IA
DEV
DESIGN
and
![Page 70: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/70.jpg)
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. Validate Small Builds Often
![Page 71: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/71.jpg)
THANK YOU!
Questions?
and
![Page 72: Agile Prototyping Best Practices](https://reader031.fdocuments.in/reader031/viewer/2022021814/58f9a9d7760da3da068b72a8/html5/thumbnails/72.jpg)
Try these best practices yourself
Collaborative Design Platform
● Wireframe, prototype, user test, & more.
● Get feedback & co-design in real time.
● Import and scale your design system.
● Generate visual specs for developer handoff.
and