Tools and Tactics for Designers and Developers

1. Tools and Tactics for Designers and Developers
Prototyping & User Testing

2. 2
Improving Your Process

3. DISCOVERY & UNDERSTANDING
Prototyping and user testing during the discovery phase adds to our
understanding of a problem. We're able to validate the problem space
and identify any false assumptions. Early testing may also uncover
alternative, more pressing issues.

4. TESTING & IMPROVEMENTS
Whether exploring two separate ideas or testing the placement of a
button, prototyping allows you to test multiple solutions. Test early
and often while continuing to iterate and explore multiple variations
of a concept.

5. VALIDATE DESIGN DECISIONS
We gain insights into our ideas and users through prototyping and user
testing. Our findings allow us to advocate for our users’ needs as well
as support and validate the design decisions we have made.

6. COMMUNICATE IDEAS
Prototypes are a tool for communicating your concept to team members,
stakeholders, and end users. A physical or digital representation of your
idea reduces the chance of misunderstandings, leading to focused
discussion and clear feedback.

7. 7
Prototyping

8. 8
PROCESS & CONSIDERATIONS

9. PROJECT PHASE
Prototyping may be integrated into your ideation and testing process
at any point of a project. Considering where you are in a project
timeline will help you determine which tool or prototyping method
will be most useful.

10. AUDIENCE
When deciding on a prototyping method it is important to consider who
will be viewing and interacting with your prototype. Sketches and low
fidelity wireframes are easy for team members to interpret, but viewers
that are less familiar with your project may need to see more of the
experience to fully understand your solution.

11. TIME ALLOTTED FOR BUILD
The time you have to build your prototype will determine which
methods are available to you. For fast turnarounds, consider using
a prototyping tool that allows you to quickly build an experience.
If you have more time, prototyping in code may advantageous.

12. FIDELITY
Different prototyping methods offer varying degrees of fidelity.
Whether looking to build a simple click-through prototype or add
custom animated transitions, there are tools available to help you reach
your desired level of fidelity. The highest fidelity is achieved by building
your prototype in code.

13. PLATFORM
Not all prototyping tools support all platforms. Creating prototypes
for web, desktop, and mobile software will require the use of different
prototyping tools. Research the tool you wish to use to make sure
it supports the platform you are designing for.

14. 14
PROTOTYPING TOOLS

15. Start sketching early to quickly get
your ideas on paper and start testing.
SKETCHES & PAPER MOCK UPS
Early Testing & IdeationProject Phase
Team MembersAudience
QuickTime
Very LowFidelity
AllPlatform

16. Create clickable, interactive
prototypes by adding hotspots to
static screens.
INVISION
Early Testing & Ideation,
User Testing, Final Build
Project Phase
Team Members,
Stakeholders, & Users
Audience
Fast Build, Easy to LearnTime
Low to MediumFidelity
Web, Templates for iOS &
Android Devices
Platform

17. Team Members,
Stakeholders, & Users
Audience
Recommended for creating high
fidelity, custom prototypes during
the final stages of a project.
FLINTO & PRINCIPLE
Final BuildProject Phase
Longer Build Time,
Requires Learning
Time
HighFidelity
Flinto Supports Mobile,
Principle Supports All
Platform

18. For those looking for the most
control. Experience writing code
is recommended.
FRAMER
Team Members,
Stakeholders, & Users
Audience
Final BuildProject Phase
Longer Build Time,
Requires Learning
Time
HighestFidelity
AllPlatform

19. 19
EXAMPLES

20. 20
INVISION

21. FLINTO

22. 22
PROTOTYPING IN CODE

23. OPPORTUNITY COST
Optimize your time by focusing on things that will best convey your app’s
experience. Know which components users will interact with the most,
and prioritize these.
Make concessions on the fidelity of unimportant items. Hours spent
programming background components could be spent on core features.

24. SOLUTIONS DON’T HAVE TO BE PERFECT
Your time is too valuable to waste down a rabbit hole — be open to
“hacks” if fixing an issue is going to take a while. In prototypes, it’s okay
to use the occasional magic number or inline some CSS.

25. LIBRARIES ARE YOUR FRIEND
Common components or features have often been solved already. You
can save a lot of time by pulling in someone else’s solution.
Controls: Bootstrap, Material, DateTimePicker
Networking: Alamofire, SwiftyJSON, Fast Android Networking Library
Animations: Material, Spring, Rebound

26. As the most popular Javascript
component library, Bootstrap has
a huge community and ample support
for beginners. Customizable through
CSS or pre-built themes.
BOOTSTRAP
ComponentsType
WebPlatform

27. Alamofire, a networking library, can
cut down on boilerplate and save you
some serious headaches. Very well
documented and configurable.
ALAMOFIRE
NetworkingType
iOSPlatform

28. A quick, easy tool to add spring
animations to your Android app.
Animations like these can make your
app feel more natural and polished.
REBOUND
AnimationType
AndroidPlatform

29. MOCKING CONTENT
Use fake content to close gaps in data or backend services. Content can
be either made up from scratch or taken from historical data.
Storing data in code or local JSON is fast, but requires a redeploy when
changing. With a web backend, you can change content quickly, but it’s
at the cost of setup and having to write network code.

30. Generate realistic JSON data in your
browser with a template and a bit of
javascript. Includes support for fake
companies, first and last names, and
email addresses.
JSON GENERATOR

31. Provides a toolset to quickly model
and mock an API. Doesn’t require
much web know-how, and can be
hosted on a personal computer.
STOPLIGHT

32. Host a web backend to serve content.
Provides templates for basic services.
Highly scaleable with a huge
ecosystem. Out-of-box support for
fancy content types, such as images.
AMAZON S3

33. 33
User Testing

34. 34
CONSIDERATIONS

35. PREPARE & DEFINE GOALS
Define goals and prepare any questions or other testing material before
starting. Your efforts will result in useful and actionable feedback.

36. BE OPEN TO FEEDBACK
Asking for feedback means being vulnerable. Showing unfinished work
can be uncomfortable. Being open and willing to accept feedback makes
your work more successful.

37. ALLOW TIME FOR ANALYSIS
After completing a user test, it can be temping to forge ahead with your
work. Allow yourself time to digest the information you’ve just received.
Analyze the results of your test before continuing.

38. 38
METHODS

39. Speaking directly with users is one
of the best ways to gain insights into
their needs and test your designs.
Whether asking questions as part
of user research or gathering feedback
on proposed solutions, always prepare
questions beforehand and outline
a clear objective.
INTERVIEWS & QUESTIONNAIRES

40. Set aside time for design reviews
during the project. Reviews should
include all members of the team.
Prepare for the review by identifying
any areas you have questions about
or any issues the team should discuss.
PEER FEEDBACK &
DESIGN REVIEWS

41. Allow potential users and peers
to interact with your prototypes.
Establish a set of questions to ask
or tasks to preform while you observe.
Some prototyping software allows you
to observe users remotely while they
interact with your prototype.
PROTOTYPE WALK-THROUGHS

42. Highly popular page-based event
system. Track page views, audience
demographics, behavior, and drop-offs.
Extremely easy to implement with just
a little bit of code to copy and paste.
GOOGLE ANALYTICS

43. A mobile toolkit that includes
a unique event-driven analytics system.
Offers higher fidelity than Google
Analytics, though it takes some time
to set up effectively.
FIREBASE

44. 44
Feedback

45. IMPLEMENTING FEEDBACK
• Look for patterns and identify reoccurring comments
• Don’t be too quick to discount opinions or suggestions
• Use a critical lens and prioritize feedback
• Trust your foundational knowledge

46. AM I DOING THIS RIGHT?
When testing and conducting user research, designers ask themselves
this question a lot. Remember that any amount of prototyping and user
testing is better than none at all. If you are thoughtful in your process,
you will be successful.

47. Thank You!

48. 48
Contact Us
LAURA LEVISAY, DESIGNER
laura.levisay@thirteen23.com
MAX WADE, DEVELOPER
max.wade@thirteen23.com

49. 506 CONGRESS AVENUE, SUITE 200 • AUSTIN, TX 78701 • 512.672.8780 • BUSINESS@THIRTEEN23.COM