Design process
Having the strategy part done the design process started from a UX perspective:
The user of this app is a really specific and non-conventional target. To understand how the users uses the physical products of the brand and what what they want to perform using the app required a deep research on their behavior. This is why different research methodologies were used:
User interviews: to understand the real users of the appliances the client allowed us to interview some of the product designers from ASKO and some of their clients who accepted to respond some questions for us.
With this, there was a clear understanding of the profile of the clients, when they use the appliances and how they do it.
Personas: using the information of the user interviews some different personas with different appliances and backgrounds were created. Afterwards these allowed to take user-centered decisions in all the other parts of the process.
User journey: some of the information in the user interviews where focused on how they could use a new app that allows them to control their appliances remotely. With this information a complete user journey was designed for each persona and at least one for each appliance.
Besides the research needed from a user experience perspective, another visual research was needed to understand how the brand used colors, shapes, icons and other graphic resources.
When the research was complete and having a clear view on how to proceed with the wireframes a user flow based on the navigation and features of the app including the differences inside this ones and how to use them was created.
Following the user flow a first round of low fidelity wireframes were designed allowing to have the first feedback session with the client and with the UX-UI Team.
After some rounds of feedback the wireframes were clear enough to create a couple of high fidelity wireframe prototypes that allowed to perform some usability testing.
Knowing that the target of the app was really specific and how the brand connected with their appliances, the best option to continue was to perform some A/B testing.
The A/B testing in this case allowed to have a clearer view on which components, positions and behaviors were clearer for the user.
The testing sessions were performed online with users from ASKO and ATAG appliances, recorded and analyzed afterwards. With this data a last round of high fidelity wireframes were created.
Using as a base the last wireframes, the application of the visual part including the corporative image of the brand defined and analyzed in the research phase started.
The implementation of colors, iconography and other graphical assets ended with the creation of
mock-ups presented to the client in InVision prototypes where some feedback was gathered.
After redesigning small details of the UI a final mock-ups version was presented to the client.
To have a proper validation of the mock-ups there was a first session with the complete UX-UI Team using an InVision prototype. After the team feedback a last feedback session in our innovation lab with the client with a high-fidelity front-end prototype was taken.
With this feedback session the only part missing was the assets and measurements delivery to the developers.
Once the design was approved from all the involved parts it was the moment to connect with the development side.
Using the InVision prototype created for the feedback the measurements where already defined so all the assets only needed to be marked as exportable.
After this process there were standard iterations including some design approvals to assure that the design and the app look exactly the same.
.svg){kind=small}