iOVERLANDER APP

OVERVIEW
iOverlander is a traveling app for travelers. Users can create new locations on the map as well as add details for each place, including amenities, photos, date last visited and GPS coordinates.

This app is a nonprofit project operated by volunteers.
‍
TYPE
Personal project
‍
TOOLS
Figma, Photoshop
‍
TEAM
Michael Tewasart (UI Designer)
user research
USER PERSONAS
2 personas were created from the multiple reviews on Google Play Store. These personas gave me a direction for whom I would be designing for. Most common reviews wanted the following:
- intuitive UI
- search bar functionality
- dark mode option
- add favorites
- display 2 icons at the same location
- ability to add GPS coordinates by touching on the map itself, and not manually type
- ability to separate markers that identify different camping spots

MOBILE PAIN POINTS
Multiple pain points include, but are not limited to:
- users fumbling through multiple steps and clicks to get to a certain page
- lack of navigation bar, resulting in users being lost & confused
- confusion between iOverlander and Google's pre-existing icons
- icons/copy that is inconsistent, redundant, or confusing
- numerous complaints about location permission

COMPETITIVE & COMPARATIVE ANALYSIS

CAMPSPOT
While this app does possess a search function as well as a map view, the map view is only available after a search is completed. Also, the app is mostly geared towards setting up camping trips towards resorts, trailer parks; etc. It does not search for simply amenities in which campers can simply go. As a result, it lacks the option for users to add in their own experience.

THE DYRT
This app also has a search function as well as a map view, but the map view is only viewable underneath a hamburger menu or if you choose the option "Near Me" on the dropdown. Users can also plan their routes towards their destination and earn points for prizes. However, certain features are locked behind a membership fee.

HIPCAMP
Features a UI interface that's incredibly similar towards Campspot such as using cards to display camping spots. Only a few minor differences such the ability to conveniently switch between map view and list view.

Low fidelity wireframes & wireflow

ADDRESSING THE ISSUE
The most significant change was the main menu. The previous, old design had the user choose between 6 options. Not only was this not visually engaging, but the 2 sections "List" and "Check-in" led the user to the same page, but only offered a continuous workflow if they arrived from "Check In".

The new design addresses by having "List", "Check In", and "Map" displayed on the same screen. As most user reviews were sampled from Google Play, the Explore Tab for the new workflow would match Google Maps, as I didn't want to break a standard design that I assume nearly all iOverlander users are accustom to.

Not only does this give users a sense of direction and position on where they are in both real time and on the app, but it clearly communicates which action the user should take with new branding and hierarchy.

visual elements & color scheme

BRANDING
The color orange is used more across the entire interface as to provide a cohesive visual identity.

The font Cabin (bearing a similar visual design to Comic Sans) has been selected as it possesses both the fun, spontaneous spark of adventure/camping and formality with its lacking in serifs.

FINAL DESIGN & THOUGHTS

TAKE AWAY
The goal of this design was to create a more intuitive and easier user experience, integrating common UI elements from its competitors as well as address user feedback and reviews. I certainly learned a lot from user reviews and user testing.

As this app continuously gets updated, more fine-tuning and updated will be required.
View Prototype