Skip to Content

Create a Low-Fidelity Prototype

0 %
Create a Low-Fidelity Prototype
// Explore More Tutorials

Create a Low-Fidelity Prototype

15 min.
Use SAP Build to turn your app idea sketches into a low-fidelity prototype.

You will learn

SAP Build enables you to take your sketches from a piece of paper to a functioning prototype. Learn how to upload your sketches, add navigation and hot zones, and share your low fidelity prototype.

Step 1: Create a project

Log in to BUILD.

Under Projects, click the New Project button to start creating a new project.

new project in build

You can start projects from different templates or samples in BUILD, but for this tutorial, you will want to choose Start from Scratch. Select Create New Project button.

create new project button

Enter a Name and Description on the New Project page.

new project page with details

Click Create Project when all the fields have been filled out.

create project button on new project page
Log on to answer question
Step 2: Download or create the files

Sketch up your application. Use pen and paper or a computer tool. You want to create 3 screens.
1. Product List
2. Product Details
3. Order details

They can look like screenshots below.

product list sketchproduct details sketchorder details sketch

Don’t have time to make your own sketches? You can use the above samples. Right click and Save As to download these files.

Log on to answer question
Step 3: Upload the files to BUILD

In your BUID project, select the Upload Files tile under the What do you want to do section.

upload files button

Either click the upload link or drag your files into the space to start the upload.

upload files link

Once the upload is complete, you will see a listing of your files.

upload files done
Log on to answer question
Step 4: Use uploaded files

Switch over to Prototype mode by clicking on the File drop down in the menu bar. Select Prototype from the list of options.

switch to prototype view

You can use the File Tool to use the files you just uploaded to create your prototype. Click the link.

use files tool

Hold Shift and click the files to multi-select all the files. Once you have all 3 files selected, click Select.

select files to use
Log on to answer question
Step 5: Create hotspots

To create a hotspot, hover over the Product List image. You will see a tooltip that states how you add a hotspot.

hotspot creator tool

Drag and create a hotspot over Flying Car. After creating the hotspot, you need to set where it navigates to. Point the arrow to the Product Details screen to complete the hotspot navigation. You prototype should look like the screenshot below.

hotspot on Flying Car product

Add additional hotspots on the nav-back arrows and Create Order button. Have the nav-back arrows return to the previous page and the create order button navigate to the Order Details screen. The final configuration should look like the screenshot below.

final hotspot configurations
How many hotspots are in your prototype?
Step 6: Preview the prototype

To preview the prototypes and test the hotspots, click the Eye icon in the top-right corner of the screen. This will toggle Preview mode.

preview mode icon location

Click around on your application to try out the navigation on your low fidelity prototype.

final hotspot configurations

If you need help locating your hotspots, you can check the Show Hotspots box in the top tool bar. If you need to make changes to the app or are done testing, you can click Return to Page Map to exit the preview mode.

final hotspot configurations
Log on to answer question

Next Steps

Back to top