Image of a hand holding a phone outside in a city.

 

 

Story Street

A mobile app to help you navigate through a city by connecting you to the stories you love.


UX Design, User Research, User Testing

 What if you could know where your stories lived?

 

Introduction

 
 

Story Street is a mobile application that helps you explore the city by connecting to the stories you love. It was my capstone for my final year at Harbour.Space University. I spent a year working on it and refining it with different mentors, namely UX designers Irene Pereyra from Anton&Irene, Rachel Inman (Design Lead for Google Maps), and Munish Dabas (UX Engineer at Google).

During the first leg of the project, I worked with talented designer Michel Lopez. I conducted the research and managed the UX design processes for Story Street:

  • Desk research (articles, competitive analysis, travel trends, ecosystem analysis)

  • Field research (3 phases of semi-structured user interviews, creating user personas)

  • UX Processes (user flows, card sort, sketches)

  • Wireframing (block, low fidelity & high fidelity wireframes, annotated wireframes)

  • Prototyping (prototyped certain user flows)

  • User Testing (used the prototypes to test some user flows and iterated based on the feedback)

Understanding Habits of Millennial Travellers

  • 2017 as the Year of the Solo Traveller

    As the world is getting more accessible, there is a sharp increase in solo travel.

  • Travel for cultural experiences

    People travel to grow their identity through rich cultural experiences and exploring the unknown.

  • Smartphone Generation

    The smartphone is a hybrid platform used most frequently during travel to plan a trip, navigate and communicate.

 

Explore the world through stories

 
 

Why do we tell stories? To educate, entertain, preserve culture and instil values. Stories are an untapped vault of cultural knowledge. If we could connect travellers with stories about the city, it could connect them to the city through those stories. It could also provide in-depth insight into the rich cultural heritage of a site within the city, such as history, art or architecture.

Story Street contextualises cities and their places of interest to travellers as they explore through stories. During the user interviews, the one key pain point I discovered is that people struggle to connect to places they don't call home. However, people easily form a sense of connection to the stories they watch or read.

What if we could provide solo travellers with relevant stories they can relate to as they explore a new city?

  • Phone with a page of Story Street

    1.

    Browse the explore page to see all the ways to experience stories.

  • Phone with an image of a map.

    2.

    Explore the story collections categorised by different genres.

  • Phone with a map showing story locations

    3

    See the locations where the different scenes play out on the story map.

 

Browse our story collection and save your favourites

 
 

The 'Explore' page (homepage) is where the user can see a collection of different stories linked to the same genre, a set of locations where several story moments take place, and our library of the stories we have collected. The viewer can browse through all the different stories, but save their favourites for offline use when they travel.

  • Mobile with a screen entitled 'Amelie'.

    1.

    Visit your favourite story cards and see the scenes that take place.

  • Mobile with a screen entitled 'Amelie' and a heart filled in..

    2.

    Save your all-time favourite stories for offline use later.

  • A collection of stories.

    3

    Collect your own library of stories.

 

Get geotagged notifications for your story moments

 
 

The idea of Story Street is for the app to help you connect as you explore a city without distracting you. Users can do this by activating the notifications in the app's settings. They can choose between only getting notifications for the stories they have saved or all the Story Street media.

As they explore the city and pass by a story location, they will get a notification about the scene that played out in that spot, for example:

  • Hand holding a phone that has received a notification.

    Imagine you are exploring a city and walking through its streets, then you get a geotagged notification of a story moment that happened in this exact location.

  • Hand holding phone up with a picture of a man at a window.

    You open up the notification to see the story moment that took place here: a screenshot from a movie, or a passage from a book.

 

Building a story map: prototyping and user testing

 
 

Based on the previous research, user journey, storyboard exercise and the focus of my first feature, I decided to focus on how I could aid travellers in exploring different parts of the city while still accessing rich cultural value and experiences.

In the card sorting phase, people associated maps with exploring, so I decided to use a map as the discovery tool. I designed the wireframes in Sketch and took it to Principle to prototype the story map.

 

User testing and feedback

 
 

I conducted user testing using 5 different people. I gave them each two tasks to complete and observed their actions and listened to their feedback:

  • Google Maps, not Story Map

    People struggled to use the map as a story map with locations, instead they regarded it as a map that needed directions, guidance and tourist information

  • Confusing story carousel

    The carousel was too limiting and confusing when the map jumped from place to place, so I decided to dislocate the carousel from the map in the second prototype.

  • Unclear story hotspots

    Initially, the circled areas were to avoid overwhelming users with too many pins, as many of the other travelling apps have. But this seemed to confuse users.

 

Iterated Prototype V.2

 
 

When I built the first map prototype, user testing indicated that once you show a user a map, they expect to get directions, the ability to search locations and use it like Google Maps.

Taking this feedback, I went back to the drawing board to redesign the map so it looks more like a story map, where the story moments and the map is so intertwined that users cannot confuse it.

 

Next steps for Story Street

 
 

The next steps for story street include finishing the Minimal Viable Product (MVP) and creating prototypes of all the steps to run user tests.

  • Work with a visual designer to create the user interface.

  • Begin collecting content by gathering different stories.

Story Street Launched

Story Street lets you navigate through the stories you love. Visit the Story Street website to see book locations and follow in the footsteps of your favourite literary characters.

https://www.storystreet.app/

Previous
Previous

Nettleton Collection

Next
Next

My TMB Mobile App