Location-Based Recommendations Web App Eolo
Introduction
Because the usage of location-based recommendations apps is so important and widespread nowadays, I choose this topic for my personal UX and UI case study.
Being an expat myself, I consider these types of application essentials to discover a new location or see what’s going on nearby easily and quickly. They are also useful when living in your hometown or when planning to travel somewhere.
My Role
As the UX / UI designer for this project, I managed the entire process starting from competitive analysis, user research, information architecture, user testing and visual design.
The Eolo App
Eolo is a location based-recommendations app that helps users to find a specific place or shop. It provides alternative routes, tailored recommendations and notifications to let users better know the surroundings based on their interests and preferences.
The app can be used when moving somewhere walking, driving or by public transportation. It is for users who want a more accurate and reliable guide when going to a specific place and for those who need a more stimulating experience, having the possibility to explore the areas around, since the app will notify about events or new opened shops nearby.
The Problem
Many location-based recommendations apps often provide unclear, non updated information regarding a specific shop/position, or suggest longer routes, which force users to switch to a second application to complete their tasks. Users need a more personalized experience, suggestions, support and content customization from the app itself.
Competitive Analysis
Foursquare City Guide
Foursquare is a big company that released several products including Foursquare City Guide and other native apps. They build independent platforms to understand how people move around the world and they seem to have a strong presence in the market in the location technology, data, analytics and engineering industry.
User Interview
I interviewed three people that often use these types of applications in different circumstances on their daily basis, they all have different backgrounds including their nationality.
User Personas
I gathered useful insights from the user research that helped me in defining three user personas.
Creating these personas gave me a clear view regarding user contexts, attitudes and behaviors. It’s a valuable resource I relied on during the rest of the process.
User Flow
I created my user flow using Lucidchart.
Prototype
Low Fidelity Wireframes
The sketches were made using rapid prototyping process. After four iterations I could refine the structure that paved the way to high-fidelity wireframes.
First Iteration
Last Iteration
User Testing
Goals
The goal of my user testing was to assess the product usability on mobile and it was tested on three users. I was able to observe if they could understand the information architecture easily, navigating and performing specific tasks.
Mid Fidelity Wireframes
High Fidelity Wireframes
Branding
Logotype
Typography
Raleway and League Spartan are the fonts family used in this project. Both are sans-serif Google fonts.
Headlines, buttons and navigation bar texts use Raleway, whilst fill up forms, filters and body texts use League Spartan.
Style Guide
UI Screens
Eolo web app can be used in several different languages.
Add your interests straight after signing up to immediately start personalizing your account.
VUI feauture available at a first glance in the homepage to ease your search when walking or driving.
When entering the page related to a shop or location, users are able to find important information at the top of the page, including a notification stating the latest info update.
Reviews, good quality pictures, tags, address and contact details are clearly displayed.
