Project Type
Academic / Individual
Role
Researcher, UX / UI Designer
Tools
Figma, Canva, Marvel, Loom
Duration
10 Weeks
Overview
Design Challenge
As a Movie and TV buff, I'm constantly captivated by the stunning visuals and diverse locations showcased on screen. Having always wanted to visit these cinematic landscapes, it got me wondering on where I could find these locations, and if others movie enthusiasts felt the same? Is it possible to find these exact filming locations and what is the easiest way to find such information?
The Problem
Movie & TV show fans tend to have a hard time finding relevant information regarding to where they could travel to for film tourism due to specific location information not being easy to find.
Although some sites do provide some information, it tends to not be structured or verified to particular scenes, making it much harder and time consuming for user’s to find where they want to travel to.
The Solution
To create an app aimed to assist people in finding the locations of their favourite Movie & TV shows easily and efficiently.
It will be designed to provide an interactive and immersive experience for the users in order to feel like they are a part of the scenes through AR features.
Integrated community feature to allow them to share and connect with others who have similar interests so they can build a community of like minded individuals.
Proposed Solution Ideas
Immersive Cinematic Experience
Interactive AR features allows users to engage and be immersed within the environments
Effortlessly recreate and re-enact your favourite scenes, along with playable video overlays of scenes filmed within the locations
Share your experiences seamlessly with your connections and inspire others for unforgettable movie-themed adventures
Verified Filming Locations
Explore an intuitive map packed with easy-to-find filming locations for your favourite media.
Providing reliable and verified filmed scene information and locations
Conveniently navigate to your chosen locations with the user-friendly navigation tools
Explore various exciting media-themed events happening around you!
A Connected Community
Connect with fellow media enthusiasts and build lasting friendships! Share your passion for movies and discover new favorites together
Debate plot twists, analyze characters, and share your unique perspectives through the in-app messaging service
Design Process
Discover
Secondary Research
What does the Research show?
I started this project by looking into some of the reasons of why people are interested in Film Tourism, and ways of which they tend to go about finding the locations they want to visit. I looked into quantitative research articles that highlighted some of the issues people were experiencing to better understand the problem.
People travelled to destinations due to Movie or TV influence.
of Millennials have said that they travelled because they were influenced by a Movie or TV show
Said their main goal was to have an immersive experience when visiting locations.
Said a Movie or TV location was the main reason for selecting a holiday destination.
User Interviews
Exploring Current Experiences
To gain user insights, I conducted in-person and online interviews with 5 participants that had an interest in both media and travelling. These sessions explored their current information-seeking process, including the pain points they experience and opportunities for improvement.
Participant Criteria
Interview Style:
Age:
Occupation:
Interests:
In-person & Online
Millennials (25-35)
Various, ideally within digital Tech industries
Participants will need to have an interest in Media & Travelling
Affinity Mapping
Analyzing the Results
To make sense of the informative qualitative data gathered from the interviews, I decided to create an affinity map of the responses. This mapping process provided a visual and structured way to analyze the interview data, transforming a collection of individual voices into a clear understanding of user needs. These insights will be instrumental in shaping the development of a more user-centric information discovery experience.
I sorted their responses into 3 categories: Pain Points, Motivations & Behaviors.
Paint Points
“I had to search across multiple sites as certain location information was not specific enough, making it a very time consuming process.”
“I often had to rely on other user’s posting the specific locations I needed rather than the sites I was using having proper listings.”
“The information was hard to verify if they were correct, due to majority being user inputs”
Motivations
“I want to know the feeling of being immersed within that environment in order to better connect with the characters I portray.”
“As a fan of cosplaying, I want to visit various locations where my favourite characters have been in.”
“I would like to travel to places I’ve seen in documentaries. Its very interesting learning about the history of the environments”
Behaviors
“Its always nice to watch films with family or friends so that we can have discussions and express our opinions afterwards.”
“I often enjoy watching movies and tv shows as its a very calming and relaxing pastime.”
“I like to share my experiences and travels with friends, so that we can discuss our thoughts on it”
Key Learnings and Insights
Transforming the Results into Actionable Insights
Analyzing the affinity map results yielded valuable insights into user pain points. These insights illuminated key areas within the current experience that required improvements. By focusing on these crucial aspects, I can develop targeted solutions that directly address user frustrations and ultimately enhance their overall experience.
Online Travel
Information
A key finding from the results was the difficulty participants faced in verifying information and its accessibility. Many reported frustration with needing to consult multiple sources, leading to a time-consuming and inefficient process.
Scene
Engagement
Many participants expressed a desire to go beyond simply visiting a location and truly feel transported into the world they saw on screen. This immersive engagement was particularly important when traveling with others, as it fostered a sense of shared adventure and
created lasting memories.
Social
Interaction
The participants revealed a strong desire to digitally share their experiences with like-minded individuals and friends. This suggests a deep interest in fostering a sense of community
and connection around shared passions.
“How might we help millennial Film & TV fan’s get better information and location preferences about their favourite Movies & TV shows in order for them to explore, recreate and immerse themselves their favourite scenes?”
Define
User Persona
Who is this Product for?
To ensure the app resonates with real users, I developed a detailed user persona. This persona, Daisy, embodies the target audience and their key characteristics. By empathizing with Daisy's needs, wants, and movie-loving personality, I can design an experience that truly caters to her interests and keeps her engaged.
Experience Map
Analyzing Daisy’s Current Experience
To truly understand the journey of a film tourism enthusiast, I decided to create an experience map. This visual tool helped me identify key touchpoints, potential frustrations, and opportunities for improvement throughout the personas experience.
The experience map serves as a roadmap for crafting a film tourism solution that addresses users needs and fosters a truly enriching journey for movie and travel enthusiasts. This allowed me to design a solution that goes beyond simply providing locations, but creates a comprehensive and engaging user experience.
Competitor Analysis
What are Daisy’s current options?
To identify potential solutions for the created persona, I explored the existing options for finding filming locations. While the specific niche of my product initially presented a challenge in locating direct competitors, I did find some apps and websites that shared the core goal of providing information about filming locations for movies and TV shows.
The analysis revealed several key shortcomings. Firstly, a significant portion of location information lacked verification, often relying heavily on user-generated content. Secondly, a surprising number of competitors lacked direct integration with map applications, hindering users' ability to seamlessly navigate to their desired filming locations.
IMDB is the go-to website/app about finding information about movies/shows. Includes various information such as ratings, cast, locations and much more.
Pros:
Available in app and website format with an extensive library of film/show listings.
Easily navigate between film locations, cast & crew information, user reviews and more.
Cons:
inconsistencies or errors in the information provided, as IMDb relies partially on user-generated content meaning its not verified.
Does not provide map links to the location listings shown due to being user-generated input.
The Virgin Media Movie Mapper is a website with an interactive map showcasing the locations of various filming locations in the UK.
Pros:
Provides an interactive map showcasing where certain movies were filmed at.
Location information is accurate, and provides various scene locations.
Cons:
Film listing database is very limited and are only shown in the UK.
Hard to know if listings are verified
No official app. UI is inconsistent across mobile and web viewing format.
User Stories
What do Users want?
By combining the user journey insights from the experience map with the competitor analysis, it was now possible to define the persona’s needs with an improved focus. I created up to more than 30+ user stories to get a better insight into what the needs and wants of the user’s for the app. Below are some of the examples of user stories created and what benefits/features they would like to have during their experiences:
Develop
Task Flows
How would Daisy use the App?
Understanding the target user is just the first step in creating an engaging product. With Daisy, the movie-loving persona, firmly in mind, I translated her needs and desires into user flows that seamlessly guides her through the app. These flows are built upon the foundation of user stories, which capture the specific actions and functionalities Daisy expects to find within the app. This consists of 3 stages including of creating a personalized account (preliminary), searching for a movie location they want to travel to (primary), and engaging with the environment when they arrive to the chosen location (secondary).
Preliminary Task Flow
Creating a personalized account
Primary Task Flow
Searching and traveling to a filmed location
Secondary Task Flow
Engaging with the environment
Ideate
Sketching my Thoughts & Ideas
Now it was time to begin the concept sketches, but to ensure these ideas take flight in the right direction, a user-centric approach is essential. In this case, Daisy (persona), served as my guide during the ideation phase. By keeping Daisy's needs and desires at the forefront, I translated the user stories and her current experience journey into a visual language through concept sketches. These sketches explored the main design solutions that were addressed from previous research and insights into 3 key components:
A product that is intuitive and easy to navigate
Create a way to immerse the user within the location they visit
The information is verified, accurate, and able to navigate the user to the location
Wireframes
Turning Ideas into Reality
Once the main chosen sketches were selected, it was now possible to start producing the digital wireframes to get a better idea of how the app will actually function as well as the visual aspect. This will give the opportunity to test the features during the usability testing stage. I used a range of sources, such as Mobbin and Dribble, to get inspiration for various screen layouts in order to stay updated with the latest design trends to avoid any confusion for the users throughout the flow of the product.
User Testing
Optimizing the User Experience
The user testing process is implemented to find key areas within the app where improvements can to be made and which features within the app that the user’s want. For this I conducted several usability tests with my target audience using the Mid and Hi-fidelity designs.
The user’s were given up to 5 tasks for the usability testing. Through the tasks it will enable them to fully explore the app and its features, from which it will determine which areas needed to be focused on for improvements.
What was learnt?
From the feedback it was clear that majority of user’s were able to understand the flow of the app well, although certain areas did create confusion. After each round of usability testing, I used a Design Prioritization Matrix in order to prioritize which sections needed the most focus to be improved upon. A few of the main changes throughout the usability testing included improved layout designs, changes in heading font styles, and an updated colour palette in order to pass the accessibility and contrast checks. Below are some of the main design changes that were improved upon from the usability tests:
Version 1
Usability Issues: 17
Prioritized Solutions: 14
What do Users want to see on the Homepage?
Evolving the Map Screen
Sketch
Mid-Fi
The homepage went though several changes with each usability test. Initially the idea I had for the homepage was to include some images of past locations the users visited in order to entice them to travel to more locations, but some users found this to be a bit confusing to have on the homepage so this design was changed to include a map screen that will show the users which locations they can visit nearby, which engaged the users much more.
Another change included the redesign of the recommendations for the users. The original designs proved to be either too basic, or included too much unnecessary information for the users. To get around this, I took inspiration from media apps such as Netflix, to create a horizontal scrolling design with a dedicated media page that would list all the locations the users can visit. This proved to be very lucrative as the users not only would have all the information they needed about the movie/show, but also all the locations from it without needing to scroll through the map.
I also wanted to encourage users to socially engage with their friends by including local events and locations that their friends have recently visited. This allowed for more options for the users but also engage them socially with other users.
Final Design
Hi-Fi
Sketch
Final Design
Mid-Fi
The map screen was another primary focus of the app as this is how the users would be guided to the locations they wanted to visit. The original design consisted of a list of locations split between 2 types of location, one local and the other being global for filming locations outside of the country that the user is in. But this design proved to be a bit confusing for users since majority were used to the style that Google Maps had. It was then redesigned to make it more similar to that style, as this would make it more consistent and intuitive for the users.
Other improvements to the map screen consisted of adding various forms of travel, such as bike or public transport in order to give users a variety of different travel methods. The original layout design of this also proved a bit inconsistent as the icons were not to a suitable size, but also there was too many colours for the users which caused some colour contrast issues. This was amended to a simpler colour scheme and more consistent iconography.
Another key addition to the map screen consisted of including a way of users to see if the locations are verified, as majority of competitors did not have a verified locations listed due to user inputs. This issue was resolved by adding a verification icon to the locations so that they users knew that it was a legitimate location. To make sure that the locations are verified, it required to have at least 5 users within the app to approve that the filming location is real.
Making Connections & Building a Community
Version 3
Usability Issues: 10
Prioritized Solutions: 8
Sketch
Version 2
Usability Issues: 13
Prioritized Solutions: 9
Final Design
Hi-Fi
Hi-Fi
Mid-Fi
Another primary focus of the app was to build connections with other users in order to build a community of like-minded individuals who can socialize and share common interest. The initial design consisted of a card style tile showcasing the media that the users are interested in, but this design was too basic and didn’t engage the users enough. This was then redesigned to a more simplistic style of showcasing the users image and genre interests, since the users can see the specific media interests on the users profile instead. I also decided to rename the section from ‘Community’ to ‘Connect’ as this had a clearer meaning to the section, as well as better icon alignment within the navigation bar.
The section also originally features having both users and local events, but this was a bit inconsistent with the page so the local events feature was moved to the homepage, since they were locations that users can visit and suited more being in that particular section.
Another initial feature was being able to message users, but this proved to be a bit of a safety concern as some users pointed out that they might be getting random messages from other users that they didn’t know. To get around this issues, I removed the messaging feature until the users accepted the friend request. This approach was much more beneficial and safely allowed users to communicate.
Design Systems
Unified Design Systems
To establish a clear and consistent visual style throughout the product, I opted to utilize Google's Material Design icon library. This library offers a comprehensive set of icons that adhere to established design principles, promoting user familiarity and ease of understanding. By employing Material Design icons, I ensured consistency across all user interfaces, fostering a seamless and intuitive user experience.
Typography
Maintaining a consistent and clear text format was crucial for the app's usability. However, I also wanted the typography to reflect the product's edgy and entertaining nature. To achieve this balance, I implemented a well-defined type hierarchy with a font selection that embodies the app's personality. This ensures users can navigate the app with ease while immersing themselves in its fun and engaging atmosphere.
Spacing & Guidelines
In UX design, space is more than just empty pixels. It's a powerful tool that can significantly impact the user experience. Effective spacing creates visual hierarchy, improves readability, and enhances overall usability. By strategically placing elements on the page, it makes content more accessible, and evoke specific emotions. Whether it's the breathing room between lines of text, the distance between elements, or the white space around a call to action, careful consideration of spacing is crucial for creating a visually pleasing and intuitive interface.
Brand Identity
Bringing the Brand to Life
My goal was to establish a playful and engaging brand aesthetic that aligns with the user experience. To achieve this, a comprehensive design exploration was undertaken. This involved creating a moodboard and researching a wide range of UX/UI designs for inspiration.
I carefully selected a colour palette that evokes the desired emotional tone of the product. However, ensuring inclusivity was very important aspect. I meticulously tested the chosen colours for contrast accessibility to guarantee a seamless experience for users with colour blindness.
Creating the Icon
I aimed to create a visual metaphor that captures the essence of the user experience: immersing yourself in familiar locations through media. This concept is reflected in the icon design, which cleverly combines a film shutter with a location pin. Additionally, the icon utilizes the app's primary color palette to ensure brand consistency across all touchpoints.
Brand Name
I embarked on a comprehensive naming exploration, seeking a title that resonated with the user journey. Ideally, the name would evoke a sense of recognition, drawing inspiration from familiar locations users might have encountered in media. This led me to pick "Scene-It", a name that sparks curiosity and subtly hints at the app's focus on re-engaging within familiar places.
With a clear direction established, I could then delve into exploring design styles that would complement the chosen name. I decided to chose the font style ‘Lady Ice 3D’, as the 3D effect reflected the cinematic visuals. The expanded length style of the lettering also reminisced of a navigation line to a destination on map screens.
Deliver
Prototype
Unveiling the Digital Innovation
Multi-Platform
Adding Market Value to the Product
Combining high-quality visuals, interactive elements, and clear explanations, a marketing website offered potential user’s an immersive experience that demonstrated the app's capabilities in a real-world context.
The website went beyond simply presenting features. It leveraged captivating imagery and storytelling to paint a picture of how the app can enhance the travel experience, fostering a desire to explore and connect with a community of like-minded adventurers.
Conclusion
Showcasing Scene-It
I was thrilled to be able to showcase my product during a Demo Day. Many users actively engaged with the app, experiencing its features firsthand. Their enthusiastic response was truly gratifying. Many commented on the app's unique approach, something they hadn't encountered before.
This positive feedback, along with explaining my design process to potential stakeholders, cemented the app's potential to revolutionize how people experience Film Tourism.
Next Steps
Considerations for Further Exploration
For now the process of the app is smooth flowing and consists of the features that the user’s wanted through the previous usability tests, although there are still further improvements to be made upon further iterations. After the features are implemented, they will be given more usability testing to see if the changes will be more beneficial to the user’s and if it will enhance the user experience. Some of the key areas to focus on in future versions will consist of:
Improved AR: Enhancing the AR experience for users while exploring the areas with more features that they could explore.
Layout Update: Improve the layout of the app screens and content information provided to be easier to find and follow.
Easier Connectivity: Improve upon the community section for users to connect with in order to enhance the social aspect of the app.
Progression: To include a gamification progression tracker where users can get rewards based on the amount of locations they have visited to keep them motivated to explore more locations.
Learning Progress
What did I Learn from this Project?
Every project presents a unique learning opportunity, and this one was no exception. Throughout the process, I encountered a variety of challenges and triumphs, each contributing to my overall growth. While there were certainly moments where missteps provided valuable lessons, the successes were equally instrumental in shaping my skills and knowledge. Ultimately, this project served as a rewarding journey that equipped me with a well-rounded set of experiences that will benefit me in future endeavors.
Empathizing & Understanding the Users
Upon first starting this project, I mainly wanted to create an interesting new product that wasn’t done before, but what I discovered was that it was not about me and what I wanted. Instead the focus should be on what is best for the user’s I am creating the product for and how it can be beneficial to them.
Learning from the Feedback
Throughout the project, I got various feedback at different stages of the project. Majority of it was useful, but there was certain times where it was a bit confusing, particularly at the usability stages, in which I had trouble understanding the feedback from my mentors since most of the user’s found it easy to understand the flow of the product. But after some consideration and further explanation, I understood the point of their feedback in order to produce a more consistent product flow.
“Done is better than Perfect”
Another key learning that I got from this project, was the concept of “Done is better than perfect”. As a perfectionist I always wanted to make sure that my product included as many possible useful features that I thought was needed for the project, but due to the time constraints and deadlines it was hard to make sure the were implemented. This is particularly helpful advice, especially with stakeholders, in which a product is never really finished, and can always be further improved and developed at later stages.