UI design for offline maps app with crowdsourced data for 4WD enthusiasts
Newtracs is a start-up providing 4WDrivers with offline maps and crowdsourced information on track conditions. The founder had been working on a data collection and aggregation system, and wanted to design the MVP for a mobile app that allowed users to log data and access the most up-to-date information available for any track while they were on the road.
- Ran client workshop to elicit product goals
- Worked collaborately with developers to create wireframes
- Briefed and reviewed work from visual designer completing the UI design
Design process and key challenges
The client briefed us with a series of decks, with high-level market and competition analyses as well as lists of features to be included, some rough wireframes, and technologies he wanted to use. Even though the brief had dived straight down to the point of example wireframes, I felt it would be best to take a few steps back in our process to establish some overall goals for the app.
In a workshop with the client, I asked him to describe the user journeys for a few key use cases for the app. We ended up mapping out three journeys – where the user was using the app to research a future trip, where a user was out on a drive, and where a user was using it to review previous trips – along with pain points and design opportunities for various steps within the journeys.
At this point, we were reminded that the client had a fairly limited budget, and it seemed like it wouldn’t be possible to fit all the features he had listed in his initial brief. We looked at the key pain points and opportunities we had listed, and decided that it would be best to focus on improving the experience for a user who is just setting out on a trip.
With the original feature set and the pain points and opportunities in mind, I sketched some low-fidelity wireframes. From previous discussions, I knew one of the challenges of this app was going to be working within technical limitations due to the amount of data that needs to be displayed, so I requested a review of these early sketches. It became apparently that some ways of organising the interfaces would be much better for performance than others, so I reworked the layouts and flows before moving on to high-fidelity wireframes.
Over the course of refining the interfaces, there were frequent discussions with the developer (as well as the client who was working on the data collection and aggregation engine himself) about the different technical implications of various interactions – how segments of a track should be represented and what should be selectable, how to deal with various actions if user was out of reception range, how to overlay different types of data.
I prepared the brief for the visual designer who completed the UI design along with branding and style guidelines for the app, and reviewed their work. Once completed, I wrote the specifications for the interfaces.
We provided an estimate for the MVP build, but the project did not proceed.
If you’d like more details about this project or any others in my folio, please contact me.