Ext. Street
Personal project
2023
Quick link to ExtStreet.com
A one minute video demonstration of Ext. Street in action
I’m in Philadelphia and I want to run up the Rocky steps… I’m in San Francisco and I want to follow in Jimmy Stewart’s footsteps in Vertigo, and then maybe visit The Rock… I’m in Chicago and I want a day off, just like Ferris Bueller…
Real life movie and TV locations inspire our travel as much as any holiday brochure. Once a fairly ordinary diner on Broadway in Manhattan attracted little attention - nowadays, hipster doofuses come from far and wide to sup a coffee or maybe have a bowl of cereal there, just like Jerry Seinfeld and his chums. But how do we find these places? How do we forge our own pop-culture pilgrimages to locations both awe-inspiring and rather ordinary?
There are a few websites out there that will give you the details, but you still need to cross-reference with a map app to find the exact spot.
Ext.Street is the website/app that integrates the two for easy searching, allowing users to mark their favourite films, TV shows and movie locations, or simply to find out what might be nearby. It also offers convenient time-stamps and stills of the film itself so tracking down that obscure location is easily done.
Overview
Subtitled “The Movie Location Search Engine”, Ext. Street is just that. Users search for their favourite films and obtain a list of locations seen in that film, shown on a map with pins for easy navigation. Users can also search the map directly, either by looking at their current location or searching farther afield. The data architecture is such that users can ‘go down the rabbit hole’ searching from locations to films to locations for a seemingly endless route through the world and the world of movies.
Key features
- Text search gives film titles and places.
- ‘Around me’ search centres the map and shows all locations nearby.
- Maps can be filtered to reduce clutter and disregard films the user is not interested in.
- Users can ‘like’ the films and locations of their choice and later call on that list for easy access.
- Film locations are detailed with a brief scene description, a real-world address, a time-stamp of when the location is seen in the film, and a still from the film (if permissible).
Opposition research
imdb.com
The web’s most visited movie website. It’s focus is not on locations but attached to many films is a list of locations that can be cross-referenced. No commentary or other features. Some films have map functionality, but most do not.
movie-locations.com
Dedicated to locations, this well-researched and engagingly-written website is good, but lacks any map functionality.
themoviemap.com
Superficially a lot closer to Ext.Street, but the map errors show that it is not a going concern. The layout is overly busy and a bit clunky. Not usable on smartphone.
reelstreets.com
A UK-based site that focusses on older films and where to find the locations. A great resource without maps or locations but a lot of original photography.
While there are a number of web destinations that can aid the keen film fan, none of them combine all the features of Ext.Street.
Site map
Branding
The branding of the site should be ‘cinematic’. As it will be full of maps and movie stills, the design itself needs to be by contrast fairly simple and clean. As the desired use is for people out and about and on the move, it should be very clear and easy to read, so a high contrast style should be employed.
Although a few names were considered, Ext.Street was settled on. Ext. Street is short for “Exterior, Street”, and is a common scene heading on screenplays. It is both cinematic and alludes to the map nature of the site. The subsequent branding takes its cues from the look and feel of screenplays, using simple black (actually slightly off-black) on white and employing Courier New - screenplays are almost always mono-spaced. To add some colour, light shades, just stronger than pastel are used - screenplays are often bound in these light colours.
Within this framework, simple icons and logos were drawn up.
Prototype
Moving from the sitemap to wireframe and into prototyping was fairly straightforward. An outline of the Figma file can be seen here:
User testing
The prototype was tested with a small group of potential users. After pitching the idea, which was met with enthusiasm, I asked the users to use the website, giving them specific tasks as well as allowing unguided exploration.
All users were able to navigate quickly to desired points. One flag was raised - the need for a 'close' button on the individual scene/locations to return to the map. Although previously, users could click anywhere in the frame to close it, without a clear signifier they did not know what to do. Adding the 'x' in the top right corner solved this.
I requested feedback and ideas for improvements. One request was for a social element, where users could share their favourites with friends. Generally, the users were quickly able to grasp the aims of the website, see the utility of it and understand its appeal.
Development
I developed Ext. Street from prototype to fully-functional, mobile-optimized website using HTML, CSS, JavaScript, and PHP. This project presented its own unique set of challenges:
- Integration with the Google Maps API.
- Formulation of sound data structures to handle my core databases.
- Data security was a priority; therefore, server-side scripts were developed using PHP.
- Image library anonymization was implemented using hash functions.
- Cookie functionality is utilized to remember users’ favorites, eliminating the need for user accounts.
- A number of Python scripts were written to automate behind-the-scenes tasks such as capturing and processing the still images, updating the core databases and generating HTML.
Individual pages:
As I progressed through the development process, several refinements and new features were incorporated:
- Graphic design was refined, opting for a monochromatic palette. To avoid visual overload, the surrounding design was minimized since much visual interest is generated by the movie posters, stills, and maps.
- Dark mode functionality was added.
- Share scene functionality was implemented, allowing a hyperlink to each specific scene to be copied to the clipboard and shared by the user.
- To ensure the scene of the day appears apparently random yet consistent across all users, a hash function of the current date was employed.
Conclusion
ExtStreet.com is now up and running and ready for you to discover your favourite movie locations.
Here is a one minute video demonstration of Ext. Street in action