Smart Helmet App.
2020
Research
Architecture & Navigation
Wireframes
UI & Prototyping
Unit 1 Gear is an argentine start-up with presence in the USA and Europe. They seek to create sporting equipment with the highest safety standards, combined with awareness oriented solutions. First, they created a ski helmet with headphones and glove-proof buttons, and now they are developing their second product, a smart helmet for urban riders (bicycles and scooters) with a companion app that we designed at the agency.
As in every project, we always dedicate 1 sprint for research and benchmark. In this case, we needed to think of a new product so we made a full investigation taking into consideration the idea of the client, the potential users and their real needs, and any similar product we consider could bring us valuable insights. First, we analysed different companion apps from other products such as smart watches or bands, and also running and cycling apps so as to understand which variables are the most important to measure and how they are shown. Also, we decided to go for a dark mode style app as the clients brand already uses dark colours with green and blue accents and because we thought that this would contribute to a "premium" experience. We explored different apps that have this style, giving special importance to usability and accessibility.
We took the following insights from all this research:
With all this data on mind, we then defined a user persona and its journey so as to understand what they would feel, the possible pain points and opportunities to solve them.
We also defined three stages in which users will use the app.
For this MVP, we thought of creating a simple yet scalable architecture, dividing the app in 4 main sections. Before thinking in the app flow, we defined which of all these ideas and features we had in mind will be on the MVP and which will be nice to have for future updates.
After this exercise of prioritisation, we made the architecture map for the MVP. The following graph displays the main content of each section.
After defining the architecture, we generated some user flows so as to understand the whole path users will need to go along in order to successfully complete an action. This instance is very important so as to create all the necessary screens for the future app.
Here, we moved directly to hi-fi wireframes, not only because of the time we had, but because we wanted the client to visualize all the ideas we had on mind quickly (sometimes clients can't picture how a product would look like or function with a lo-fi wireframe). We created these wireframes with a grid, some UI definitions and some icons and images we knew could be in the final designs. The purpose of this was to show the client some prototypes on how the "Customize Helmet" section worked, how the flow to discover challenges looked like, and so on. We managed to make the entire app in wireframes hi-fi so as to validate and iterate everything before applying UI.
After having done the wireframes, we moved onto UI phase. First, we converted each screen into dark mode. Here, the client asked us to explore the possibility to include some screens with a light / dark variation but we thought it wasn't the best decision, so we reccomended them to go for a full dark mode. Then, we searched for a street urban style typography so as to give the app this visual identity we were looking for. And finally, the details: icons, colours, tracking variables and imagery. Aerolab also hired an illustration agency for the making of more specific icons and the badges.
For validating our product, we had the opportunity to test 5 'beta-testers' that our client had chosen for this exercise. All these people were potential customers and they were aware of the helmet but didn't know there was a companion app that came with it, making them the perfect users to test.
We created the full app prototype and conducted it via Zoom, and elaborated some hypothesis supposing that users will be able to understand and successfully do each task. We tested how they navigated through all the main flows of the app, from signing up to starting a challenge and customizing the helmet lights.
We used the SUS (system usability scale) so as to measure the efficiency and effectivity of each task and also to add every observation and possible iteration. Our result were greatly positive, all the users completed each task correctly and they gave very positive feedback about the UI and the usability. In the scale of SUS, we reached a score of 87 out of 100 (industry average is of 67/100 according to MeasuringU). This is a very good result for a first MVP and this product has the potential to grow to become a great sport social network.
