Skip to Content
Previous

Create a low-fidelity SAP Build prototype

By Meredith Hassett

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

Details

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 SAP Build.

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

New project in SAP Build

You can start projects from different templates or samples in SAP 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
Please log in to access this content.
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.

Please log in to access this content.
Step 3: Upload the files to SAP 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
Please log in to access this content.
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
Please log in to access this content.
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
Please log in to access this content.

Updated 03/21/2018

Time to Complete

15 Min

Beginner

Tags

Next
Back to top