Fundermax mock-up ipad
Fundermax
As one of the lead companies in construction panels Fundermax wants to innovate their digital projects to become a referent.
With this app and the help of SAP the Fundermax specialist can sell their panels showing in AR directly to the possible clients.
Client
Fundermax
Year
2017
Roles
UX-UI Designer | AR Specialist | 3D Specialist
About Fundermax
Fundermax is a referent inside the construction industry as their furniture, facades and interior fittings are always at the interface between ideas and materials.
To help their specialists an app was needed in order to be able to showcase in realtime their ideas to the clients.
About iOS SAP Fiori
SAP created a design language that unifies a deep understanding of business, user needs and the rigorous requirements of the modern enterprise with the principles of good iOS design. With the design language, they are empowering partners and customers to make beautiful, native mobile apps.
The decision of using SAP Fiori in this project was taken after evaluating the easy possibility to implement an Augmented Reality module inside their product.
The challenge
Fundermax wanted to be the most innovative company in the market on how they present their product to the clients. The main goal was to develop a tablet app for the Fundermax specialists with an Augmented Reality functionality to show the designs in real time. Also, part of the challenge was the collaboration between Worldline and SAP to achieve to include a well designed AR/VR module inside the SAP Fiori language.
The team
For this project Worldline designate a team of people who has worked with SAP, 3D or Augmented Reality before. In the design team the splitting of roles was between two persons, an UX Designer (Fabio de Pascale) and an UX-UI Designer (Marc Alcobé).
My role
Inside the design process I took the responsibility to design the product from first low fidelity wireframes created by the UX Designer.
Thanks to my University Degree I was also taking the role of modeling some basic 3D to make tests and help the developers to use this 3D’s in their code using Unity and Vuforia becoming the specialist in AR, 3D modeling and rendering.
Design and research tools
Sketch
Axure RP
InVision
Photoshop
PTC Creo
Rhino
Keyshot
Unity
Vuforia
User Interviews
User Journey
Remote Testing
Design process
With one first round of research in iOS SAP Fiori native approach and components the first low-fidelity wireframes were created. With this the next steps were clear:
Research
As the process of research in regards of the native implementation approach from SAP was already completed it was the moment to see how to use this with the Fundermax specialists. For that different research methods were used:
User interviews: user interviews were taken to understand the workers, mainly sales people, that will use the app to showcase Fundermax possibilities to the final clients. Twenty specialists from the company where chosen to be interviewed.
With this, the different approaches of how each of the workers could use the app showed a clear pattern and insights on how to design the app.
Personas: using the information of the user interviews four personas where crated, unifying the most similar workers in groups of five. These personas where used afterwards to define which are the common points between them which helped to start with the user journeys.
User journey: a user journey timeline was designed for each of the four personas created. With this information and seeing what features the workers might need, including the AR showcase, and comparing the low fidelity wireframes the process of creating final wireframes and a user flow started.
Besides the UX research and understanding of the corporative image including brand, geometries, physical products and other graphic resources was needed. For this an exhaustive UI research was done.
User flow
Before starting with the high fidelity wireframes and with the information of the research a user flow with the features and the low-fidelity wireframes was created to organize and structure the flow and the screens.
Wireframing
Using this user flow and all the information gathered it was the moment to start wireframing without losing the native iOS SAP Fiori perspective and the needs of the workers of Fundermax. This wireframes had the objective of having the possibility to create a complete product prototype to user test and show to the client.
Usability testing
With the prototype of wireframes we decided to start three rounds of A/B testing with the Fundermax workers. For that we prepared multiple options of testing based on the components that iOS SAP Fiori and the AR functionalities from SAP where available.
The decision of testing this only with internal Fundermax users was taken because the product was really technical and for doing an open testing a technical training was needed.
 After analyzing the results of the A/B Testing the user interface design started with the components and approaches selected.
User Interface
With the components and approaches clear and with the reference of the Design System of iOS SAP Fiori the user interface design was done using the branding of Fundermax.
AR and 3D
For the first version of the Fundermax app the team provided the AR interface and the basic 3D models with which the workers used to show the new features to their clients. Afterwards a phase of creating the specific 3D models of the client buildings started.
For the creation of 3D models and renders Creo Parametric and Keyshot was used. For the implementation of the 3D on the Augmented Reality module in the app Unity and its Vuforia add-on were selected as tools.
Delivery
With all the mockups approved and the 3D and AR tested and already working on the modules of the app an InVision prototype was created for the development feedback the measurements and the assets.
After this process there were standard iterations including design approvals to assure that the design and the app look exactly the same.