Design Rationale - App
The steps taken for the final design
The app can be seen as the connecting element between the hubs, AR stickers and users. Within the app the story of the tour will be told. Furthermore, it will be possible to activate hubs and stickers.
The process of the app started with making a so-called ‘’interface-canvas’’. Here the user and product are described, within the middle of the page the app. The app should help the user to perform tasks with the product. Two interface-canvasses can be seen below.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
After this we made our first version of the app. We drew it digitally and printed it out on paper to be able to perform some usability testing. The usability tests were done by four non-students who did not know what our product service system was about. This, to ensure an unbiased result. The test itself consisted of two parts. First, the participants needed to perform certain tasks while time and amount of taps was recorded. Secondly, the participants got some questions about the tasks they had done and questions about the app in general. A picture and a video of the paper mock-up can be seen below.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
From the tests it became clear that the structure of the app needed to be worked out better. A clear home page was missing and the used icons were not always logical. The full research document can be found here.
As a result from the usability testing we came up with a list of things the app should include. We wanted to make three different pages: Welcome, Home and User Profile. By making these items separate it would be easier to understand for users. We also made a collage of other app interfaces. This was a starting point for further designing the app. We looked for inspiration in already existing apps which could be useful for us. Below, both the list and collage can be seen.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
From here on we ideated on ways to easily navigate through the app (image below). We tried several different options of which some were more minimalistic than others. Eventually we decided to go with a quite minimalistic design. Every page should have a return-arrow and a home button. All other functions can be found on the 'hamburger menu' at the top of the screen. By keeping the interface calm the user would not struggle with a lot of buttons from which the function may not be needed on the current page.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
After quite some iterations (keeping feedback from User Interface Design & Simulation and Instruction Design in mind) we came up with the final app design. We halfway decided to integrate instructions into the app, because then users would more easily understand the app and its functionality. The colours inside the app were kept calm to make sure that the user is not easily distracted. Also, when colours have a high contrast (for instance black text with a white background) the interface can be seen well in strong sunlight. This is favourable, because our app will be used in an outside environment. The reddish colour is chosen as an accent colour for our product service system, because it is a bright colour which comes back in a lot of city coat of arms.
To make sure that a tour can be followed by multiple people at the same time the app generates a code which can be filled in on three other devices. Later on, the user with the app can activate hubs for all devices. Next to this, children will have their own special tour, so in their version of the app games are integrated to make the information more interesting for them. Beneath, an explanation video of the app can be seen and if you want to try the app mock-up yourself you may click over here.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
As explained in the instruction design tool, before using the app and before starting the tour, an instruction is provided. Very first users are provided with instructions, but can also skip on the bottom if that is needed. Furthermore, at the end of the explanation, the instructions can be deactivated in the next user, for more frequent users.
The design process started with looking at already existing street furniture which could maybe serve our purpose.
