Ext. Street

Personal project


  • UI/UX Design
  • Tools: Illustrator, Photoshop, Figma, HTML, CSS, JavaScript, PHP, Python, ChatGPT

  • 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.


    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

    Opposition research



    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.



    Dedicated to locations, this well-researched and engagingly-written website is good, but lacks any map functionality.



    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.



    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



    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.



    Moving from the sitemap to wireframe and into prototyping was fairly straightforward. An outline of the Figma file can be seen here:


    User testing

    imdb imdb

    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.


    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:

    Individual pages:

    imdb imdb imdb imdb

    As I progressed through the development process, several refinements and new features were incorporated:


    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