Date: 2019
Role: Principal Product Designer
Role: Principal Product Designer
tl;dr
I redesigned one of S4BB Limited’s most popular BlackBerry 10 applications for Android and iOS users: Fuel Usage Tracker. This app allows users to track the fuel consumption of their car or fleet. To preserve the continuity between the old and the new app, I redesigned the UX and “upcycled” the UI.
Brief
Migrating this app from BlackBerry to Android & iOS wasn't a straight forward "lift & shift", due to the differences between smartphone OS. Redevelopment of the app meant choosing a new SDK, in this case Flutter. This also meant that I had to design a single UX/UI for both platforms. Further user research was not required, as the client was only interested in porting the app from BlackBerry to Android & iOS.
Deliverables
1. UX/UI designs for an Android & iOS smartphone app.
2. Provide appropriate UX writing.
3. Handoff documentation.
User Experience
Tracking fuel consumption is the core task of the Fuel Usage Tracker app, and as such, I designed the UX around that feature. The home screen displays fuel consumption details for the most recent selected vehicle. A floating action button in the right bottom corner allows the user to record fuel top ups for the vehicle.
Other pages and tasks like managing vehicle profiles, data import/export, user preferences and in-app purchases can be accessed via the navigation drawer.
Other pages and tasks like managing vehicle profiles, data import/export, user preferences and in-app purchases can be accessed via the navigation drawer.
User Interface
In line with the client’s instructions, I kept the color palette as is, adapting it to Material Design principles. To break up the even green backdrop and to add a visual cue directing the user’s eye to the floating action button, I added a subtle circular background pattern.
Since the color palette was rather bold, I decided to use a strong header typeface to match: Teko. I used Open Sans as a typeface for body text. To clarify the UI I decided to use FontAwesome Pro Light icons in addition to labels. Since selecting unique icons for each and every data display was neither possible or desirable, I decided to choose single icons for data points with shared characteristics. For example, financial data points all have a wallet icons, whereas distance related items all have a highway icon.
The end-result is an app that feels fresh, yet familiar to both new and returning Fuel Usage Tracker users.
Since the color palette was rather bold, I decided to use a strong header typeface to match: Teko. I used Open Sans as a typeface for body text. To clarify the UI I decided to use FontAwesome Pro Light icons in addition to labels. Since selecting unique icons for each and every data display was neither possible or desirable, I decided to choose single icons for data points with shared characteristics. For example, financial data points all have a wallet icons, whereas distance related items all have a highway icon.
The end-result is an app that feels fresh, yet familiar to both new and returning Fuel Usage Tracker users.
Retrospective
I started my product design career working for S4BB Limited, and doing this project felt like coming full circle. Fuel Usage Tracker was the last app I designed for them before leaving. At the time, it was also one of the first apps I designed that wasn’t using skeuomorphic design principles.
Being confronted with your old designs is humbling, and somewhat embarrassing for sure.
Credit
Jonas Hartmann, Lead Developer