Navii

The challenge.

Can I create a product that takes the hassle out of planning activities when exploring a new city?

Background.

Navii was developed as part of my CareerFoundry UX Design course studies. The brief was to create a social scavenger hunt app that enables people to explore locations across different cities. 

I started to think about how I can focus on a particular audience and solve a problem that falls within the brief. My thoughts turned to those experiences I’ve had exploring cities and this led me to choose tourists as an audience. 

I then needed to explore the problem space, I always enjoy planning trips and finding activities, however this is often time consuming. Could this be an experience I could improve for tourists visiting a new city?

Interviews.

Each interview was transcribed and then analysed. Using affinity mapping I was able to analysis what people were saying to better understand behaviours, needs, motivations and challenges. This insight allowed me to create two distinct personas.

With this information I was able empathise more with user, allowing me to focus on the user’s needs. The next step was to take look at the goals they want to achieve and map how they might set out accomplishing these.

Journey mapping.

I created user journey maps to visualise the process Alli and Sara would go through to achieve their goals. This process helped me understand what they would be doing, thinking and feeling and in turn allowed me to identify possible functionality and features for my app. 

As an example Alli wanted to take photos of the architecture on route to a restaurant she’d already booked. As she was already in the city, only had a couple of hours until her booking and was excited to get going, I felt there was an opportunity for Navii to use her phones location data to define a route for her based only on a couple of inputs; destination and interests.

User flows.

From the research, personas and journey maps I was able to start creating the typical user stories and in turn the user flows that would be the basis for the app. The user flows let me look at the key tasks identified previously, look at how they can be applied within a user flow and then consider the dependencies each one has on each other. 

The user flows were then used to create the sitemap. As I started this process I wanted to test the terminology to ensure users would be able to navigate the app, providing minimal friction and making the experience as easy as possible.

 I used Optimal Workshop to undertake a a closed card sorting exercise. I had 30 participants group content into pre-defined categories. This provided invaluable insight into expected terminology and association.

Key Learning 

If I were to do this slightly differently again I would have further validated this insight using tree testing to ensure the user flows act as expected and the navigation is as clear as possible. The users had a limited understanding of the app and therefore they made assumptions in relation to the content.

Sitemap.

Following on from the card sorting exercise I was able to produce the initial sitemap, providing an overview of the apps screens and interactions. This is something I revisited several times as I iterated on the design. You can see the changes made between the two versions of the sitemaps below, the first being the initial draft and the second the final iteration. These changes came as a result of usability testing and improvements in my own design ability. One significant change made was to simplify the options available from the home screen, providing a clear call to action for the user and reducing any possible confusion.

Key Learning

Ideally I would’ve spent time sharing these ideas with colleagues, working through this sketching process with both them and if possible other stakeholders to get a more rounded picture of functionality and expectations

I created a low-fidelity prototype (click the button below to check it out) using my initial sketches, tested this with users and then subsequently decided on a different design direction. Feedback indicated that it was too difficult to understand the process of creating a bespoke set of activities (route). This was due to the lack on feedback on screen and the usability. I had included cards which could be swiped left and right to add or remove destinations, however this was over complicated for users. As I got more familiar with using Sketch design software and learnt more about Gestalt principles I was able to improve my design iterations (see below).

 I further validate some the changes with preference testing. Using Usability Hub I had 37 participants choose between two design options (see below), with results split 49% / 51%. Although there was no clear design preference the comments posted by testers allowed me to make amendments to the design to include both preferences.

The simple white background was ‘boring’ and ‘didn’t tell you what the app is about’ but the information was clear. The second design was ‘difficult to read’ but users understood that this is a ‘travel’ app. I combined the designs to create the next iteration (right).

As my knowledge and understanding of design principles improved I made further changes. As I learnt more about design accessibility I wanted to ensure my app reflected these principles. The clear white box made reading the text easier. I also simplified the screen to include only key information. I made further changes after re-testing. The text inside the boxes meant that it wasn’t clear what information was needed once a user had started to type, I therefore move this above each box.

Key Learning

At this stage my designs started to show a lack of consistency and familiarity, the sign up screen had a different ‘feel’ to it, using a more playful font and more transparency compared to the rest of the screens. I felt this was in part due to the fact I was still learning the functionality of Sketch but also not ensuring I had the user in mind. I changed this approach, revisiting the personas and eventually developing a consistent UI design. I created a style guide and design language documentation to ensure I stayed consistent.

Design iterations.

As I received feedback from this round of usability testing I continued to make improvements. As an example testing suggested the the ‘Explore’ page (middle) I create felt more like the home page as this was the primary goal of the app and the starting point for the user. I therefore removed the initial home page (left) and updated the Explore screen to create the a new home screen (right). This now has a clear call to action and starts the user on the primary goal of creating a trip with Navii.

Navii is an activity planning app aimed at those who enjoy visiting new places but neither have the time or inclination to spend hours planning.

Here’s how Navii can help you decide on how to make the most of your free time:

• Get an itinerary of activities based on your preferences within a few clicks

• Choose what you like, how long you want to spend exploring and let Navii do the rest

• Have somewhere to be? Enter your final destination and Navii will plot a route to get you there, adding some of your favourite activities along the way

• Share and get inspiration from other community users by viewing their trips and photos

• Get rewarded for doing the things you enjoy, automatically see discounts and offers from local businesses