(Home) 
In my previous blog, I talked about the importance of UX Design and some approaches to doing it. The journey of creating a product with good UX Design involves various steps to empathise, understand and visualise, bringing it to the stage where it can be pushed into actual production for your target audience. Through the process of generating ideas for your new product, you begin to think about if the users really like the product. Does it fulfil the intended goals of a user? How does it look like?
To answer these uncertainties in our minds, we create prototypes.
What is a prototype?
A prototype is a visualisation of a solution you wish to create. Take for instance, say a mobile software you wish to build, you can create the design, flow of the pages and the interactions to fully mimic the actual product without first engaging a developer. It helps you and your users to determine specific needs such as information architecture, navigation, usability, accessibility, colours and design.
Now, I am going to show you how you can create prototypes using SAP Build Apps.
Create prototype with SAP Build Apps
1. Sketch Wireframes
I am going to build a simple translator app that allows users to translate text from one language to another. Users can translate texts from text inputs as well as text on images. Take a look at the user flow I have created:
With that, sketch some wireframes on paper to put together some ideas and create the skeleton of the translator app. Paper wireframes are quick and easy to use – they are easy to understand and do not require any coding or design skills. These are the wireframes I have created:
2. Upload wireframes onto SAP Build App
Next, upload the paper wireframes you have created onto SAP Build Apps to create page flows using hotspot links. This way, you can see how the skeleton of the app looks like on a mobile device, as well as test them with your users to see if the flow makes sense to them. You can later iterate on paper and re-upload as you receive feedback from your users.
I will show you how you can create interactive wireframes on SAP Build Apps.
Step 1: Crop wireframes and upload them as images onto SAP Build Apps. These images are placed in a container.
Step 2: Using another container component, create hotspots in the areas you want users to tap on. In this case, I am choosing 2 areas - “Text Input” and “Photo”.
Here I have set the size and position to match the area in my wireframe. Values as follows:
Step 3: Using SAP Build Apps’ logic flow, create a navigation that opens a new page upon tap.
Repeat the above steps for all the wireframes you have created to link the pages together. And there you have it, an interactive wireframe. With this, you can explore layout concepts and detect any usability issues in the early stages without having to fully develop a product first. This saves up lots of costs as it uses fewer resources and takes less time, therefore allowing you to iterate and test often.
3. Design prototype on SAP Build Apps
Now that you and your users are happy with the page flow and your wireframe has been finalised, you are going to create the high-fidelity prototype on SAP Build Apps. Following the wireframes, I am going to add colours and content to make it look more like an actual working product. Take a look at the final prototype:
(Translated Image)
In Conclusion
SAP Build Apps is a powerful tool for everyone to not only develop software apps, but also allow designers and non-designers to build wireframes and prototypes that allows us to explore ideas, gather feedback, identify issues and therefore saving time in development. The best part about creating a prototype on SAP Build Apps during a development phase is that we can easily pass it on to the development team, and they can start the development process immediately with our working copy and reduce the time having to re-design the layout.
Try it out now!
- SAP Managed Tags:
3 Comments
