Native App UX Project Ironhack

Enjoy your lifestyle anywhere

Now I’m at my week number 5 at the UI/UX Bootcamp in IronHack!. This time I was asked to come up with an idea to develop an application. After giving it some thought, I decided to create an application to help active adventurers to keep their hobbies and lifestyle while they are traveling. For the completion of this project, absolutely from scratch, we were given a week.

Here below I will describe the whole process of how I started form zero and ended up with a high fidelity prototype.

Overview

In the very beginning I wanted to create an application focused on Hobbies/Interests near the user. So I started doing a little bit of research and found out the difference between hobbies and interests. Hobbies are activities done in the leisure time for pleasure and can even be developed as careers while interests are activities that spark curiosity but may not be pursued actively.

There are different types of hobbies, passive, like reading, listening to music and doing crafts but there are also active, like going to the gym, hiking, mountain climbing, swimming and skiing

Traveling Hobby

Research

In order to get some specific information I did a Lean survey canvas. Based on these questions and some others, that popped up during the interviews, I got some really interesting and new information from what I was expecting.

Lean Survey canvas — Native App

First, from the 7 interviews I made, all of the people enjoyed more doing active hobbies than passive hobbies. Also traveling was not seen as an inconvenience to practice their hobbies, as I assumed, on the other hand it was considered an important hobby for all the interviewees.

Second, people really enjoy either doing their hobbies by themselves or with close friends. They were not really thrilled by the idea of sharing their leisure time with strangers, and distracting themselves with small talk rather than focusing on enjoying their hobbies.

Active people were really interested in knowing new places where they could practice their hobbies while traveling. They even booked their hotels according to the location of the places where they could go to do their activities. For the users which swimming was a hobby, hotels with swimming pools were a must, even if they were traveling for work.

Some interesting quotes I got:

“Traveling is not an inconvenience for my hobbies it’s actually one!”

”I do research before traveling so I can enjoy my hobbies”

”I would like to have more information about the places where I can practice my hobbies while traveling”

“Even though I searched online I had not so good experiences on the recommended places”

Affinity Diagram:

Affinity diagram — Hobbies App

After getting a lot of information from the users interviews I decided to organize it to look for similar facts more easily. In the end I divided it in 3 categories:

· Interesting quotes the users said

· What I understood from their behavior and reactions to questions

· The pain points the user mentioned

From this research I got that people practiced both active hobbies such as swimming, hiking, camping and passive hobbies such as reading, cooking and crafting. The users were more interested about being able to practice their active hobbies while they were traveling rather than focusing on passive hobbies which they felt could do anywhere.

After the interviews and the affinity diagram I proceeded to create a pain points map in order to identify more clearly the user pains and what could they gain with the help of an application. This map was based on the answers, thoughts, feelings and actions from the users.

Pain Points — Map

These pain points were summarized in:

· Hard to find places to practice their hobbies while traveling. Need help improving on their hobbies

· There is not enough information about their hobbies. Location where they can practice them or where they can buy the necessary elements. Even though there is a lot of information on the internet, it takes some time to gather everything they need in order to have a pleasurable experience with their hobbies. And even so, sometimes the information is not complete or updated

· Users want to discover new places where they can practice their hobbies

· Users don’t want to waste their free time

Main Pain Point:

Users need more information about the places where they can practice their hobbies

User Persona:

With all the information from the surveys and interviews I created a user persona named Adventurer Daniel, he’s a 30 years old front end developer free lancer. He is in a relationship and he was born in Barcelona but can be found in different places of the world because he enjoys traveling so much.

Adventurer Daniel

After having a face for my user persona I started working on my problem statement. This time I did struggle for a while defining it, I couldn’t find the right words to express it. But in the end it ended up like this:

Problem Statement:

Physically active people need a way to have more information about new places where they can practice their hobbies so they can keep enjoying their lifestyle

To start designing the application a drew a basic user flow to follow through all the main screens and navigation.

User flow

I decided to go with a login screen since I wanted the user to have a profile where they would be able to save places they found interesting for practicing their hobbies.

After logging in the user would be presented with a dashboard where they could pick the hobby they were interested in the most. Then they would be able to browse for places to practice their selected hobby on their hometown or plan ahead for a trip.

Once the user decided they wanted to plan for a trip they would be presented with a screen asking for information of where they were traveling and when in order to show them the places they could explore to practice their hobby. Once they picked the place that interested them the most they would have all the information they needed to know about the place and about what they needed in order to have a pleasant experience.

To start creating paper prototypes for testing, I did some crazy 8 for brainstorming and sketching. The crazy 8 is a fast sketching exercise where the goal is to sketch eight distinct ideas in eight minutes (one idea per minute).

Crazy 8:

Crazy 8 — Main navigation flow

I did a couple of iterations of the crazy 8 as well as some paper prototyping in order to identify the most understandable layouts for the users.

During the crazy 8 I tried to work through all the application flow creating different screens, after that I took screen by screen and create a couple of different layouts to test each screen individually. Some of the examples of this process are:

I really wanted to give the users the freedom to select what type of hobby were they interested in practicing as well as adding more hobbies to their dashboard. I explored different ways of presenting the users with the hobbies options until finally deciding on what worked the best for them.

One of the main blockers I experienced while doing this project was that I was not able to let go of an idea. Since I was focusing the app for people that were traveling I wanted the user to input their destination on a map, like this:

Map — Traveling

Which was not only completely unnecessary but also very confusing for the users, they felt they were booking a trip on an airline application. After trying a couple of ways to implement the map both in low fidelity and even on mid fidelity, I decided to go with something simpler.

Information screens

In the information screens I wanted the users to have all the information regarding the place where they were going to practice their hobbies along with rating and reviews from previous users that had already been there, also a list with all the elements needed to practice the hobby safely and successfully.

Since I was trying to rate the expertise needed to go through certain hiking route the users got confused with that part of the prototype and thought it meant the amount of money they were supposed to pay to be able to enter the place to do their preferred activity

Sketch Mid-fi prototype:

After making changes to the paper prototypes I was ready to upload the design on Sketch and do some more user testing. This is the resulting mid fidelity prototype on sketch:

Native App- Mid fidelity

Sketch High-fi prototype:

Moving onto the high fidelity prototyping I first started with my color palette, since this application is dedicated for active hobbies mostly done outdoors I wanted to go with some colors that resembled nature, this is the color palette I ended up with after testing with a couple of different colors:

I used little variations of those colors thorough the application.

You can see the complete high fidelity prototype for android here:

Since I want to practice designing for both operation systems (IOS and Android) I created some screens on IOS to distinguish the main differences between the two.

IOS — Hobbies App

As you can see on these screens, the main difference is basically the navigation inside the app. Unlike the android prototype, the navigation for IOS is located at the bottom of the screen, with access to the user profile from there. On Android the user profile will be located on a burger menu. Also the IOS app is based on hierarchical navigation. Which means the user can make one choice per screen until they reach their destination.

Conclusions

In order to improve the application I believe this sections must be taken into consideration:

•Add ability to share bookmarked places with friends

  • Be able to write reviews
  • Show directions to place according to current position

Also for myself:

•LET GO OF SOME IDEAS, THEY ARE JUST NOT GOOD

•Listen more to what the users say

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nataly Camacho

Electronics engineer and UI/UX Student, passionate about programming, currently learning front end development and loving every single minute of it