Animating the prototype · Medical Students Making an App - Episode 5

2017-08-06 · Vlog or day in the life · Ben · recording, 3:24 · watch on YouTube

Topic: Business and entrepreneurship · mode: Explanation and tutorial · tags: His own products discussed, Aimed at students

In episode 5 of the app series, Ben turns the Cut and Paste design into a clickable prototype in InVision, linking the screens with hotspots in about 15 minutes, and says linking a prototype can be done in an afternoon; coding comes next.

What is said

The parts of the video and what is said in each (★ — how much it matters to the video).

00:00:00 — What the prototype is for, and the last step: animations

• ★★ Ben says the Cut and Paste prototype lets them design the app quickly and then get quick feedback from people on what works well and whether the flow transitions well. — 00:00:00 · Cut and Paste

00:00:29 — Linking the add-an-operation screens in InVision with hotspots

• ★★ Ben: For the final step of the Cut and Paste prototype, Ben uploaded the app's design sketch to InVision, a free app, to link its pages through hotspots. — 00:00:29 · InVision, Cut and Paste
• ★ Ben: The Cut and Paste app design has five main tabs at the bottom. — 00:00:29 · Cut and Paste
• ★★ Ben: In InVision, Ben clicks and drags a hotspot, picks the page it links to, then picks the animation, such as slide up from the bottom. — 00:00:58 · InVision
• ★ Ben: In the Cut and Paste design, adding an operation, the main part of the app, runs over four screens and ends with a save-and-exit button that brings up a report. — 00:01:27 · Cut and Paste

00:01:57 — The two steps of making a prototype; testing it on an iPhone

• ★★ Ben: Using InVision for the first time, Ben took about 15 minutes to make a basic run-through of the Cut and Paste designs and found it surprisingly easy. — 00:01:57 · InVision
• ★★★ Ben says making an app prototype has two major steps: design what you think the app will look like, even in PowerPoint or Microsoft Paint, then create links between the screens. — 00:01:57 · Microsoft PowerPoint
• ★★ Ben: An InVision prototype can be downloaded to an iPhone, so it can be tested on the device the app is meant for. — 00:02:26 · InVision
• ★★ Ben says designing an app prototype takes more time, but linking and animating it is very easy and can be done in an afternoon once you have an account and know the software's basics. — 00:02:26

00:02:55 — Next step: coding the app; sign-off

• ★★ Ben: The next step for Cut and Paste is coding the app, which Ben expects to take much longer and to need coding he will be learning for the first time. (hedged) — 00:02:55 · Cut and Paste
• ★★ Ben says the next episode of the app series will hopefully go through the first building blocks of coding the Cut and Paste app. (hedged) — 00:02:55 · Cut and Paste, Ben

Threads in this video

• milestone · Cut and Paste, Ali and Ben's surgical logbook app for medical students (2017) — Ben links the Cut and Paste design screens into a clickable prototype in InVision, the final step of the prototype. (00:00:29)
• first on record · How do you test a business idea before building it? — Ben says the Cut and Paste prototype lets them design the app quickly and then get quick feedback from people on what works well and whether the flow transitions well. (00:00:00)
• promised · Ali and Ben promise an episode on starting to code the Cut and Paste app (2017) — Ben says the next episode of the app series will hopefully go through the first building blocks of coding the Cut and Paste app. (00:02:55)
• kept · Ali and Ben promise a video on prototyping the Cut and Paste app (2017) — Ben shows how they turned the Cut and Paste design into a clickable prototype in InVision, the video promised in the previous episode. (00:00:29)
• restate · How do you design an app? — Ben says making an app prototype has two major steps: design what you think the app will look like, even in PowerPoint or Microsoft Paint, then create links between the screens. (00:01:57)

Where the stories that moved here went next

• Ali and Ben promise an episode on starting to code the Cut and Paste app (2017) — open (no report in 2017–2024); last: promised, 2017-08-06
• Ali and Ben promise a video on prototyping the Cut and Paste app (2017) — kept
• Cut and Paste, Ali and Ben's surgical logbook app for medical students (2017) — last documented in 2018; last: milestone, 2018-01-03

Mentioned

Central: Ben · Cut and Paste · InVision

Also: Microsoft Paint · Microsoft PowerPoint

Only in the description or credits: Medical Students Making an App

Replies to

• continues · How to design an app · Medical Students Making an App - Episode 4

← Previous: Coffee & Sushi (Cambodia) - Cambridge Medical Elective #05 · Next → Sunset over Phnom Penh (Cambodia) - Cambridge Medical Elective #06