iOverlander
iOverlander is a traveling app for travelers (and is a nonprofit project operated by volunteers). 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.
TIMEFRAME
March 2019 - May 2021
March 2019 - May 2021
TOOLS
Sketch, InVision, Maze
Sketch, InVision, Maze
SKILLS UTILIZED
User Research, Customer Journey Map, Wire-framing, Prototyping, A/B Testing
User Research, Customer Journey Map, Wire-framing, Prototyping, A/B Testing
TEAM
Michael Tewasart (UI Designer & UX Researcher)
Michael Tewasart (UI Designer & UX Researcher)
Challenge
A clunky app, and a challenge to navigate
PROBLEM
The app utilized a Google Material Library UI. User's have trouble navigating through it, resulting in a lot of confusion.
SOLUTION
Redesign the current existing app with feedback that addresses the user's pain points and make their experience using the app more pleasant.
The app utilized a Google Material Library UI. User's have trouble navigating through it, resulting in a lot of confusion.
SOLUTION
Redesign the current existing app with feedback that addresses the user's pain points and make their experience using the app more pleasant.
Final Design & Thoughts
Iterative app on Figma
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.
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.
Design Process
Quantitative & qualitative data on users & competitors
WEEKLY 4-STEP DESIGN PROCESS
I used the above research methods as I feel this process is the best way to accumulate quantitative & qualitative data on users and competitors. In turn this will guide my designs with research & evidence.
I used the above research methods as I feel this process is the best way to accumulate quantitative & qualitative data on users and competitors. In turn this will guide my designs with research & evidence.
- 1) Research: User Research, Appstore Reviews, Competitive Analysis
- 2) Analysis: User Personas, Sitemaps
- 3) Design: Low-Fidelity Designs, Visual Design System
- 4) Prototype: High-Fidelity Designs
- 5) Test: User Testing, Iterations, Final Design & Thoughts
User Research
Google forms was utilized to research user demographics
SURVEY
In the beginning, I conducted a survey with numerous friends, colleagues, and Reddit-users (11 total participants). Such a survey allowed my to forge a rough path for redesigning the app and gave me a better understanding of people who use these apps - what are they trying to do, who are they, and what devices are they using? Findings include:
In the beginning, I conducted a survey with numerous friends, colleagues, and Reddit-users (11 total participants). Such a survey allowed my to forge a rough path for redesigning the app and gave me a better understanding of people who use these apps - what are they trying to do, who are they, and what devices are they using? Findings include:
- Some are outdoors entheusists while others are not. Neither know about the existance of this app.
- Age, sex range, and demeanor greatly varies.
Appstore Reviews
Many navigational features were requested
MOBILE PAIN POINTS
Conducting numerous user interviews prompted me to do an analysis of the app store reviews (both positive & negative ones). This was instrumental in solidifying what were the primary issues that users faced when using the app. Multiple pain points included:
Conducting numerous user interviews prompted me to do an analysis of the app store reviews (both positive & negative ones). This was instrumental in solidifying what were the primary issues that users faced when using the app. Multiple pain points included:
- Intuitive UI (users were fumbling through multiple steps to get to a certain page).
- Lack of Search Bar functionality.
- No option to add Favorites, display 2 icons at the same location.
- Confusion between iOverlander & Google's pre-existing icons.
- No ability to add GPS coordinates via touching.
- No ability to separate markers that identify different camping spots.
- Inconsistent / redundant copy.
Competitive Analysis
Many share the same features: search bar or interactive map
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.
FEATURE PRIORIZATION
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 park
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.
FEATURE PRIORIZATION
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 park
User Personas
Someone to think of when I redesign this app for
PERSONAS
Creating a user persona was essential in grounding my design goals that would meet the needs and expectations of the people I surveyed.
Creating a user persona was essential in grounding my design goals that would meet the needs and expectations of the people I surveyed.
Sitemap
Revamped workflow displaying the map at the beginning
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.
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 Design System
For both Android & iOS system
BRANDING
The color orange is used 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.
The icon colors are carried over from what's currently on the app.
The color orange is used 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.
The icon colors are carried over from what's currently on the app.
High-Fi Design
Designed on Figma
BRANDING
The color orange is used 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.
The color orange is used 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.
User Testing
Interviews via Zoom
USABILITY TEST
It was time to validate my new designs with real users by conducting a Usability Test. Objectives are:
It was time to validate my new designs with real users by conducting a Usability Test. Objectives are:
- Obtain valuable real-time data regarding user interaction with the design.
- Capture user reaction and collect constructive feedback for further improvement.
Iterations
Simplifying check-in steps & moving ui elements
SHORTER STEPS FOR ADDING NEW PLACE
The steps for adding a new place (that follows the criteria) have been reduced from 9 to 5, as there was a request to have all the Site Info be inputted in 1 page.
CRITERIA WARNING -> POPUP
In the beginning, the first step was a criteria warning that showed up every time a user wanted to add a new site. Users found this cumbersome as it was mandatory and couldn't be skipped. The redesign makes it into a pop-up, with the option to not have it display it again.
UI ELEMENTS REPOSITIONED
Most of the users wanted immediate access to their GPS location (and the ability to change it on the fly), so I moved it from the settings page to the explore page. I also moved the filter button down to the lower right so the right thumb button can reach it even more.
The steps for adding a new place (that follows the criteria) have been reduced from 9 to 5, as there was a request to have all the Site Info be inputted in 1 page.
CRITERIA WARNING -> POPUP
In the beginning, the first step was a criteria warning that showed up every time a user wanted to add a new site. Users found this cumbersome as it was mandatory and couldn't be skipped. The redesign makes it into a pop-up, with the option to not have it display it again.
UI ELEMENTS REPOSITIONED
Most of the users wanted immediate access to their GPS location (and the ability to change it on the fly), so I moved it from the settings page to the explore page. I also moved the filter button down to the lower right so the right thumb button can reach it even more.