During the second phase, Design, you came up with your prototype, and incorporated feedback. Now, it’s time to start the actual front-end to back-end development. Bring your software to life by following the three steps implement, test and deploy.
A prioritized user story map can be a good basis for the developer who implements the design. So, bring all your artifacts and your team once again to your creative workshop room and put your heads together. User story mapping is an agile method to better understand the big picture of your product and user priorities. It is a visually organized top down-approach.
You could start with drawing a graph on a board and get your sticky notes ready: On the vertical axis, list your persona(s). On the horizontal axis, create the narrative flow of the map: Describe the main steps a user will perform with the product. Then, split them up into activities for each persona and then again into tasks. Now, the entire application is mapped out and you can detect high priority user stories by positioning the highest ones on top.
Now, you have the backlog, a list of features that are necessary to successfully complete your app. Additionally, you can easily identify the minimum viable product (MVP). The MVP is a product with just enough features to satisfy early customers and helps to provide feedback for future product development. Validate your user story map with users and stakeholders if possible. With the MVP, the development team can focus on the most essential functions first.
This blog focuses on the front-end development for SAP Fiori. Of course, implementing means much more than it can be covered here.
If you have been working with BUILD to create your prototype, you can consider exporting to the SAP Web IDE, the SAP Cloud Platform development environment. The SAP Web IDE can be used as a tool to start developing the UX layer of your app and connect the app to back-end services. You can also begin developing a new SAP Fiori app from a template or customize a sample application.
Within all of your development activities, consider using agile software engineering practices (for example, test driven development, test automation, continuous integration, test isolation, pair programming, and so on).
If you haven’t done so during the design phase, think about whether your SAP Fiori app can be implemented using SAP Fiori elements. With SAP Fiori elements, the user interface is generated based on metadata annotations and predefined templates for the most used application patterns (e.g. list report and object page). This reduces the amount of frontend code you need to write for your app. Plus, you get a lot of functionality without additional effort. The SAP Fiori design guidelines can help you to find out about features. It’s also possible to use pre-defined extension points to extend the functionality of the generated app.
Consider showing development stages of the app in the system as soon as possible to your customer and users, even while the design is still being implemented. To organize testing, you could prepare a document including the tasks the user should perform and the expected results. Making notes during the test, especially discrepancies, or recording the screen can help you to analyze the results afterwards.
Usability tests focus on the efficiency and delightfulness of the design. Functional tests concentrate on certain functions, for example creating an order. For this, realistic master data in the system is required, such as customers or material. Integration tests go one step further by testing the whole sequence of a process. In procurement, for example, this would cover requesting material, ordering it, receiving a delivery note and the material, then storing it and finally auditing. Integration tests are ideally run by key users.
When doing the tests, consider questions such as: Does the application fulfill the requirements which were identified in the previous phases? Are the final design and the implementation perfectly synchronized? Does the design correspond to the SAP Fiori design guidelines?
Deployment means getting your program to a running state by installing the code where it can be used. Once you have released your solution, engage early adopters and begin gathering feedback for final production. Then, it is time to go live.
Now that you have delivered your app, you might want to find out how your app and your users work together. Surprise your app with a site visit, or ask your users for interviews or structured usability tests. Maybe support for other mobile devices, additional platforms, or enhanced features are on their wish list.
Prepare for implementation of your design
A prioritized user story map can be a good basis for the developer who implements the design. So, bring all your artifacts and your team once again to your creative workshop room and put your heads together. User story mapping is an agile method to better understand the big picture of your product and user priorities. It is a visually organized top down-approach.
You could start with drawing a graph on a board and get your sticky notes ready: On the vertical axis, list your persona(s). On the horizontal axis, create the narrative flow of the map: Describe the main steps a user will perform with the product. Then, split them up into activities for each persona and then again into tasks. Now, the entire application is mapped out and you can detect high priority user stories by positioning the highest ones on top.
Now, you have the backlog, a list of features that are necessary to successfully complete your app. Additionally, you can easily identify the minimum viable product (MVP). The MVP is a product with just enough features to satisfy early customers and helps to provide feedback for future product development. Validate your user story map with users and stakeholders if possible. With the MVP, the development team can focus on the most essential functions first.
Implement
This blog focuses on the front-end development for SAP Fiori. Of course, implementing means much more than it can be covered here.
If you have been working with BUILD to create your prototype, you can consider exporting to the SAP Web IDE, the SAP Cloud Platform development environment. The SAP Web IDE can be used as a tool to start developing the UX layer of your app and connect the app to back-end services. You can also begin developing a new SAP Fiori app from a template or customize a sample application.
Within all of your development activities, consider using agile software engineering practices (for example, test driven development, test automation, continuous integration, test isolation, pair programming, and so on).
Using SAP Fiori elements for your implementation
If you haven’t done so during the design phase, think about whether your SAP Fiori app can be implemented using SAP Fiori elements. With SAP Fiori elements, the user interface is generated based on metadata annotations and predefined templates for the most used application patterns (e.g. list report and object page). This reduces the amount of frontend code you need to write for your app. Plus, you get a lot of functionality without additional effort. The SAP Fiori design guidelines can help you to find out about features. It’s also possible to use pre-defined extension points to extend the functionality of the generated app.
Test it out
Consider showing development stages of the app in the system as soon as possible to your customer and users, even while the design is still being implemented. To organize testing, you could prepare a document including the tasks the user should perform and the expected results. Making notes during the test, especially discrepancies, or recording the screen can help you to analyze the results afterwards.
Usability tests focus on the efficiency and delightfulness of the design. Functional tests concentrate on certain functions, for example creating an order. For this, realistic master data in the system is required, such as customers or material. Integration tests go one step further by testing the whole sequence of a process. In procurement, for example, this would cover requesting material, ordering it, receiving a delivery note and the material, then storing it and finally auditing. Integration tests are ideally run by key users.
When doing the tests, consider questions such as: Does the application fulfill the requirements which were identified in the previous phases? Are the final design and the implementation perfectly synchronized? Does the design correspond to the SAP Fiori design guidelines?
The final countdown – deploy it
Deployment means getting your program to a running state by installing the code where it can be used. Once you have released your solution, engage early adopters and begin gathering feedback for final production. Then, it is time to go live.
Now that you have delivered your app, you might want to find out how your app and your users work together. Surprise your app with a site visit, or ask your users for interviews or structured usability tests. Maybe support for other mobile devices, additional platforms, or enhanced features are on their wish list.
- SAP Managed Tags:
