A mobile app to plan a trip to parks in Canada.
Explorio is a mobile app that will help users to find parks based on their preferences. And users will able to plan a trip to the park with doing any research or planning. Users can add the places along the way they want to see and create their own custom trip.
Team: Chris , Angelina
Roles: UX Designer and Researcher | Product Designer
Duration: 4 Months (Jan 2018 - April 2018)
Explorio
OVERVIEW
THE PROBLEM
When I came to Canada I wanted to explore parks around Ontario. But just to find a right park I had to go through a lot of research and planning and I couldn't find one app or website that can help me plan a trip to park.​
I thought that I'm having this problem because I'm new to Canada but during my research, I found out that even the people who are born and raised here in Canada also have faced this problem and they would love to have an app that can solve this problem.
So I decided to design an app that can solve this problem. So here is my process...
RESEARCH AND ANALYSIS
Initial Research
I started my research by asking the following questions to guide my design process:
-
Who will use this app?
-
Why will people use this app?
-
What are their goals and motivation?
-
How people use mobile apps for travelling?
-
What is already exist in the current market?
-
And what are the features these products missing?
Comparative Analysis
I have done detailed research about a similar product in the market to get a better understanding of their features and how I can differentiate my app from theirs and provide better services and experience to users.
Here is the snapshot of comparative analysis table:
User Personas
To get a better understanding of my users I interviewed some travel enthusiastic people. And based on the insights I got from those interviews I have created two personas representing goals, frustration and motivation of my users.
Journey Map
The journey map helps you understand user's behaviour and moods throughout the experience with your product/service. Journey maps help designers to locate the pain points and untapped opportunities.
I mapped out the user journey on existing travel app and identified a number of pain points and also opportunities that could potentially mitigate the pain point faced by the user.
​
Here is a snapshot of Journey Map, Click on it to get a PDF of full Journey Map.
CREATE / DESIGN
Ideation
Now I know my users and their expectations from this mobile app, so this is a time to jump into the ideation phase. This is the phase where I let my mind wander and come up with a bunch of unique ideas for the interface.​ It is an iterative process where you try, test and make improvements.
During this phase, I like to sketch ideas on paper and test them as much as possible via paper prototyping. Because it is fast and cheap, and most importantly it prevents me from getting attached to one idea.
Wireframing and User Testing
After testing several paper prototypes with users, I decided to create wireframe/lo-fi prototype of the app. And tested it with users and based on their input made some changes before I start working on final UI or Hi-Fi prototype.
All users required to complete following tasks:
1. Finding park based on their preferences
2. Creating a trip to that park
3. Adding places on the route and create their custom trip
4. Load the custom trip on the map
REFINE
Iteration
Here is the couple of changes that I have incorporated into my final design based on user testing results.
Search Option on the right corner:
In my first prototype, there is no option to search park because I thought a user has no idea where they want to go. But when I tested the prototype with users some of them said,"What if I already know the place and I just want to create a trip through this app?"
​
And this question shifted my perspective. So in my second prototype, I added park search option on the right top corner. So the user can just search and find the park and start planning the trip.
Prototype 1 Prototype 2
List View / Map View:
In the first prototype, after users input their preferences they will get the list of parks that match their preferences. But then during user testing one of the testers said what if he wants to see where these parks are located in relation to each other. And it made me think about the layout of this page.
​
So I decided to provide two different views on same screen one is list view and another one is map view. So a user can change the view just by tapping on different options available on the top of the screen.
​
Prototype 1 Prototype 2
UI Inspiration and Design
For design inspiration, I usually go to Behance and Pinterest to see how other designers are using colour and graphics in their UI design work. I did some research on the travel and park-related application to come up with a colour scheme and create a look&feel of the app.
DELIVER
Interactive Prototype
Once I decided the colours and iconography for the app, I build the final design and prototype in Adobe XD. Here are few screens...
REFLECTION
Learning about UX design and going through that process by yourself both are a completely different thing. I have learned that by working on my own idea from inception to completion. And that is the best way to learn UX design.