User Interface Prototyping

Advanced Challenges

Learning Outcomes

  1. Get an understanding of what prototyping is.

  2. Importance of Prototyping.

  3. Different types of prototyping.

  4. Learn how real prototyping is done in industry.


A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

When it comes to user interface prototyping it means testing designs for user interactions by add and removing components from an application in which a user flow is completed. This could mean anything from getting a notification to making a online banking payment.

To this end an applications are divided into user flows which help to reduce the complexity involved in creating user interfaces. A user flow is the path taken by a prototypical(imaginary) user on a website or app to complete a task.

So why is user prototyping important here are some of the stats:


  • Infinite scrolling can lower your bounce rate.’s bounce rate dropped 15 percentage points after they adopted continuous scroll.

  • In 10 years, a $10,000 investment in design-centric companies would have yielded returns 228% greater than the same investment in the S&P.

  • revenues jumped 35% after they listened to their community and incorporated suggestions into their homepage redesign.

  • Choosing a specific blue over some other hues amounted to an additional $80 million in annual revenue for Bing.

  • 88% of online consumers are less likely to return to a site after a bad experience.

  • Slow-loading websites cost retailers £1.73 billion ($2.6 billion) in lost sales each year.

  • Judgments on website credibility are 75% based on a website’s overall aesthetics.

What about from a developer standpoint:

  • Define, refine and evolve ideas

  • Figure out what works and what doesn’t work

  • Test the design

  • Allows the spreading of ideas.

In this exercise you must create a small paper prototype of a bookstore mobile app where the user flows the following user flow.
* Starts from home page.

  1. From home page selects rent a book option from a user intractable component (eg: menu bar, button).

  2. User selects a book from either a scroll-able list or search bar.

  3. User selects rent option from the books details.

  4. User confirms renting of the book.(By eg: notification, toast or confirmation screen.)

The upload a scanned or photo of this to step 2. The following templates can be used

Learning Resources

To Complete, follow these steps :

Go through the learning resources given above, 

Step 1 :

Upload the files below

Click Here

Step 2 :

Answer the questions 

Click Here

Step 3 :