Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Once you’ve narrowed down your solutions, it’s time to put them in front of users. We’ll go over some ways to create prototypes of your design and get them ready for user testing.
Design Project: Turn Sketch file mock-ups into prototypes with animation, transitions, etc.
Create a user test to test your prototype with users. Then, based on the results of your user test, refine your design solution. This process of testing and refining your design may take a couple rounds.
- Is the solution working?
- What parts of the solution are working?
- What needs to be changed based on users’ feedback?
Design Project: Refine your Sketch file and begin finalizing your app design.
Further Reading:
Tools:
Prototyping Tools
Once you're satisfied with your mock-ups,
0:00
it's time to put them in front
of users and get some feedback.
0:02
We'll be learning how to create
a prototype from your sketch file and
0:05
get them ready for user testing.
0:09
Prototyping is a making of
a representation of a solution to a design
0:11
problem, in a way that a user
is able to experience it.
0:15
Prototypes are not meant to be functional,
but
0:19
rather to let users interact with them so
that they can provide feedback.
0:22
You can turn your mock-ups into
prototypes by creating simple click
0:27
through prototypes and
adding animation or transitions.
0:30
There are many prototyping tools, such
as Invision, Principle, Figma or Atomic.
0:34
Many of these tools have a free trial
option that you can sign up for and
0:38
you can refer to the teacher's notes for
more information about these tools.
0:42
Figma is a free online tool that
easily imports your sketch files.
0:46
We'll be using Figma to create
a simple prototype of our mobile app.
0:50
Go to Figma's website and
go to through the installation steps.
0:54
Import your sketch file by clicking
the import icon in the top bar.
0:58
Open the file you imported, click on
the top left where it says Assets,
1:04
then select Mockup 2,
click on the Prototype tab.
1:10
You can start mapping your screens
by selecting the element or
1:15
part of the screen that you
want to be interactive and
1:18
connecting the dot to the screen
that you want it to go to
1:20
Then click the Play button in
the top bar to play your prototype.
1:40
After you finish creating the prototype,
1:59
it's time to put it in
front of some users.
2:01
Consult your researcher, if you have one,
and create a user test script that will
2:03
you test the usability
of the product thus far.
2:08
There are different user
testing methods and
2:11
tools you can use to test
your prototypes with users.
2:13
One way is to do an in-person interview,
where you can observe how users interact
2:17
with your prototype and also asks some
questions as they walk through it.
2:21
If you can't interview people in person,
you can also use online user testing
2:26
tools, or you can create a test with your
prototype, and gather insights by watching
2:30
or listening to users as they
walk through the prototype.
2:35
Refer to the teacher's notes for
more information.
2:38
[SOUND] Test your prototype with users
by doing an interview with people.
2:41
[SOUND] Create a script with or
2:44
a list of questions that you will ask
them as they look through your prototype.
2:46
Once you've gathered your insights,
quickly identify any pain points,
2:50
confusion that people may have had, and
2:55
take note of opportunities where you
can make changes to your design, and
2:57
continue to iterate on your design
until you're ready to ship.
3:01
When you're testing your
prototype with users,
3:04
observe how they're interacting with it.
3:06
Are they doing what you intended for
users to do with your design?
3:09
Is your design clear or are your
users having difficulties with it?
3:12
Is the experience what users expected?
3:16
What opportunities for
improvement or changes do you see?
3:19
After you've gathered the results of your
user test, you will most likely need to
3:23
make some changes or
refinements to your design solution.
3:27
These tests will give you valuable
feedback as to whether your solution is
3:30
working, if there are any problem areas,
as well as new ideas for your solution.
3:35
This process of testing and refining
your design may take a couple of rounds.
3:39
You need to sign up for Treehouse in order to download course files.
Sign up