Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Product Design

Well done!

You have completed Introduction to Product Design!

Sign up for Treehouse Back to Library

Test

3:44 with May Kim

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 of 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:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up