The Project
iOverlander is a free website and app that helps overlanders find their next destination such as camping, hotels, restaurants, water points, and more. It is a database where everyone can add new places. It’s a non-profit project run mostly by volunteers. Each place has its details listed, including GPS coordinates, photos, date of last visit, and amenities. You can easily search the listings or browse through them on a map.
The iOverlander app is not visually appealing and often does not meet UI standards. As a result, it is difficult to use. The goal of this project is to redesign the UI and improve the usability of the app. I conducted a heuristic evaluation of the current app to identify pain points while navigating it.
Heuristic Evaluation
Ok
Every screen has a tittle.
The users can go back to the menu.
Does have good real-world icons (not all).
Re-design
Logo
As a graphic designer, my first step was to improve the brand design, and then proceed with the UI re-design. I simplified the logo icon and chose a clear typography that could be used on all screens. To make the app look more vibrant and create consistent contrast on both white and black backgrounds throughout the app, I changed the brown-orange color in the current logo to a brighter shade of orange. I also created a design tile that would help to have a consistent look.
Design tile
To ensure consistency throughout the app, I created a design template. I chose a color palette and typography that would be suitable for the entire app. Additionally, I designed buttons and improved the icons, which will be used in the design later.
Consistency
I made sure to maintain the same typography, white spaces, and icons throughout the entire app while also keeping the necessary hierarchies. This not only makes the app easier to use and read, but it also improves its visual appeal and accessibility
Navigation bar
Ensuring that users can navigate the app with ease and freedom is crucial. Every screen should display the user's current location while also providing clear options for navigating to other features or returning to previous menu levels. This means that the selected icon or screen should be highlighted. In the event that the user is in a sublevel where the navigation is not visible, a title with the screen name will appear.
Aesthetic and Minimalist Design
The beauty and emotional appeal of a digital product can help users interact with it more easily. With this in mind, I designed a more attractive interface that encourages users to navigate it. I kept the design minimalist and did not add any unnecessary decorations. Additionally, the use of contrasts, a navigation bar with text and icons, and overall consistency all contribute to making the product more accessible.
Take aways
A UI Re-design will not work without improving the UX: during this project, I missed doing more usability tests from the beginning to conclude which screens and features are a must and which ones have less priority.
Having a design system would have helped to design a more consistent product.
If I had more time, I could have worked on improving all the screens. For ecample, at the "add your place" screen. I would have rethought its design and functionality, such re-thinking on implementing a dropdown menu, checkboxes or other kind of forms.
In general, it would have been nice to receive more feedback during the process, including both professional and user feedback. This would allow more iteration and a better final product.