Location, location, location… Film location website gets an MVP rebrand & redesign 🏘️
The eCommerce website project, my second Ironhack challenge.
TLDR; Brand and website redesign for a film location agency, check it out here.
Empathise — The brief
The goal of this project was to research, design and prototype a responsive eCommerce store for an existing business. We worked with a location and production company that supports film and TV crews, matching them with the perfect locations for their dramas.
For the first leg of our journey, some deep mind mapping, secondary research and interview goals planning were the first steps….
From the chaos of four people working furiously together to talking and sharing research and deductions, we put together a list of goals for our stakeholder interview which follows…
Define — Things we want to learn;
These points translated well into a flow of questions we asked the business stakeholder later the same afternoon. Useful insights were gained about the business's current pain points, who their current Vs ideal clients are and how they like to do business with people. I have left the specifics of their answers out in respect of their business privacy, however, the key themes were growing competition and clients going cold — challenges I am sure many businesses can relate to. The website is a facet of their business that they’ve been meaning to update, they were aware of the opportunities there and excited to see what we came back with. The main problems they faced
For our user interviews, we were focused on learning about the background of their role, their needs and trying to understand the emotional position they are in when making bookings.
We interviewed people whose experiences ranged from ten years working in events and launches to former producers working in film and TV and business owners looking for locations for an on-brand photo shoot. We were slightly limited by time pressure. Ideally, we’d have been ideal to find more interviewees with a film and TV background as this is the niche our company caters to.
Interview reflection
This day was a challenge! In one day we completed an affinity diagram, empathy map, user persona, user journey, problem statement, three key how might we statements, a Moscow matrix, one lean UX canvas and, finally, an MVP — plus we had lessons throughout the day. Tight on time, and high on ideas we made great progress as a team.
The main frustrations identified through the affinity diagram were;
- Old, tired branding
- Hard to use/navigate/complete search function
- Unclear property details
- Unclear next step for contact
Empathy map
The key insights into our user from the empathy map were that;
- She is under a lot of time pressure.
- She knows exactly what property she is looking for in her mind and just needs to be able to find it as fast as possible (as opposed to browsing through many options).
- She sees a lot of location scout websites on her search, making snap decisions about which to use based on their UI.
- Her pains include not knowing who to contact when she finds a property and not being able to trust that they will get back to her in time if she has to email.
- Her goal is to secure a location as fast as possible and she wants a website that supports that intensity of search.
User persona
From this, we delved deeper and generated our user persona…
Meet Pressured Penelope 👋
In summary; She is a junior producer. In our stakeholder interview, we learned our location agency works mainly with film and TV contacts, less with photographers and events companies so it was important this was reflected in the user persona.
User journey
Her user journey is defined by five key moments;
- Briefing → from her boss
- Searching → Through agency websites
- Contact → Reaching out to agencies about locations
- Booking → Replies, confirmation, support and booking through the agency
Mapping her journey we found her highs are excitement at finding a company that suits her needs and joy at being able to quickly being able to enter her search criteria. However unclear location images cause her frustration.
Final problem statement & how might we questions
Aside from the time challenges of the day we came across a few areas that we had to drill into, talk over and ensure we were doing right by our users and client — with a mind to our time constraints.
Defining our problem statement took us into a conversation comparing the different needs along the user journey and where we could best focus our attention. Comparing their desire for clear communication indicators, search functionality, website navigation and location profile contents.
Reviewing back to our interviews, and empathy map, we realised a key difference in our business's clients → They know exactly what they are looking for. Putting aside assumptions about users who want to browse options, we focused our problem to answer the needs of a user who knows what they want.
From this, we distilled our final problem statement;
The time-pressured junior producer needs to find a way to effectively navigate through vast databases of locations on one website because searching multiple, inefficient online systems is slow and confusing.
Our How Might We Statements were mainly concerned with supporting users with searching and navigation. The main feedback from user interviews was focused on these functionalities of the site. Bearing in mind our User archetype of Pressured Penelope, clarity, speed and ease were clear areas to support.
Our top-voted HMW statements were;
- Create the most time-efficient location search system for time-pressured users who have a clear idea of what they want.
- Design a website that is clear and easy to navigate through so users can follow the user journey to quickly complete their desired task.
Ideate
By this point I was really facing my biggest challenge, a reoccurring one — Thinking of solutions during the empathise and design phases of our journey and having to put them off (rightfully) in favour of user insights. Finally, it was time to start thinking of solutions!
A brainstorming of solutions yielded many great solutions across a variety of themes. With our scope, limitations and desire for a minimum viable product in place, we created a MoSCoW Matrix;
We used this as a base for our MVP statement. We had a variety of solutions but operating with the MVP in mind we prioritised our solutions to our final deliverable features;
- More granular search system, including property style
- A favourites feature, allowing users to save and order their saved locations
- Very clear contact details across the site
These were summarised into a Minimum Viable Product (MVP Statement):
The goal of the website, at the bare minimum, is to provide users a categorised database of location profiles through a filter/search functionality.
Users can search for location profiles based on their predefined needs by refining their search options (location, category, feature, etc.) however way they want having access to more targeted search results.
By having this feature, users will be able to browse location profiles with high quality images and key information quicker making it easier for them to decide and get in touch with the company.
Site mapping and happy paths
We mapped out the current site as a starting point for thinking about how it could be improved based on insights from our users. Listing our key features, which pages they fell into and their priority on the page helped up create an updated site map for our MVP. Then, came the ideation of the happy path through the site…
These translated to more ‘finessed’ digital designs of user flows through the site, all designed with speed, simplicity and clarity for the end user in mind. Two different user flows, one for searching and saving properties to a favourites feature and one to log in / view the favourites collections.
Multiple iterations of brought concept sketches formed the basis for the lo-fi prototype.
The search function, being the most important moment in the user journey and user flow, is positioned above the fold on the home page, making it as easy as possible for swift searching.
User testing of our lo-fi prototype was undertaken with five users, and the majority of feedback was positive. The main action we took following the feedback was to update the navigation by removing the hamburger menu on the desktop as users understandably said it was confusing.
The lo-fi design was image-heavy, based on user feedback that lots of good-quality images of locations were invaluable in their decision-making processes.
Users were also positive about the collections features we had added, whereby users can ‘heart’ properties they like, saving them into collections for future reference and to help in the shortlisting process.
Next, we developed our mid-fi prototype, complete with edits from user testing.
Following the construction of our mid-fi prototype, we commenced user testing. The main feedback was positive, areas for improvement prompted us to make the favourites area easier to navigate and increase the amount of white space on the home screen, leaving the above-fold search feature the star of the show on the home page.
Branding, look and feel
From this we worked on our brand look and feel, the starting point → brand keywords;
- Approachable → Users need to feel they can pick up the phone
- Reliable → A key user pain point was having agencies not replying to them or flaking at the last minute
- Bespoke /tailor-made → The agency pride itself on being able to suggest suitable locations after hearing the user briefs
- Intuitive → The stakeholder shared that it takes a certain amount of intuition and deep understanding to support their users in matching briefs with locations.
- Down-to-earth → A key quality communicated by the stakeholder and appreciated by users.
We worked individually then came together and chose from each other's board, discussed and edited until we had a cohesive aesthetic.
Time to test this out with our ideal users. 30 people chose three descriptive words for our mood board. The top five words, representing a total of 28 votes, are shown below.
As a team, we agreed these top-voted words complemented our final look and feel for the site and continued to select colours and fonts.
For colours, we settled on a neutral, easy-on-the-eye palette with a rich cream as the primary colour, dark sage green as the secondary and a limited collection of neutrals. We wanted to meet Pressured Penelope, working her way full speed through all the links on google trying to find the right agency to work with and help her feel calm with the knowledge she has arrived at the reliable, clear and helpful business she is looking for.
The font we selected is Halant, a solid serif — professional but not overly crisp and intimidating. This font is paired with Open Sans, a very easy-to-read sans serif with complementary letter shapes to Halant (notice the ‘g’ and ‘a’ in the word Handglove).
Hi-fidelity Prototype & Responsive design
After building out our home page to the highest fidelity we conducted desirability testing with reaction cards for three users. When asked to choose top five adjectives from a pack of 30 positive and negative reaction cards the users selected the following;
- Clean x 3
- Calm x 2
- Modern x 2
- Sophisticated x 2
- Other words; Useable, intuitive, inviting, stylish
As a team, we discussed the layout for the presentation of the different search refine filters After building two different options we also shared these with our three hi-fi test users.
Between a dropdown and a slide-in overlay, the overlay was preferred for being simpler and not requiring a scroll-down below the fold to interact with.
The drawings on the home page search tiles were in answer to our client's request for drawn elements in the design. I invite you to explore our finished fi-fidelity prototype, the active pages are listed below;
- Home
- Search results
- Nacho boat location profile
- Favourites/collections overview
- Collection details
- Contact
Our client had expressed their disappointment in the responsivity of their current site, especially on mobile. We addressed this by designing tablet and mobile responsive screens for the home page. Responsive designs were also important when considering the pressured nature of our users who may be browsing on-the-go and the growing move towards mobile browsing in general.
High-fidelity prototype
Explore the high-fidelity prototype, plus the responsive designs, here 🖥️
Key features of the prototype
The key features include
Home page
- An advanced search filter
For Penelope to search by the aesthetic/property type she has in mind. - Quick filter by key property categories (Modern houses, family homes, commercial spaces)
- Clear introduction to the business
Adds a face to the company and a feeling of presence and accountability, reducing the user’s fear of no responses to inquiries and wasted time. - Featured properties carousel and search CTA
All routes lead to the search location search
Search results
- Featured properties in the search results
- Add to favourites
For users to quickly compile in-site shortlists to share and reference in conversations with the agency.
Property location page
- Large click-through image carousel
- Quick share (Social media, quick link, email) options
- Direct quick call
- Add to favourites
- Recommended properties as end-of-page CTA
Favourites area
- Collections of favourites properties — editable and shareable
Contact page
- Clear contact options and a simple contact form
Limitations & Next steps
The limitation of this project was definitely time pressure however, it was a great motivator for our team.
For this project, the stakeholder (business owner) was only involved at the beginning of the project for the stakeholder interviews. Given more time we would have loved to share our work with the client and actioned their feedback — especially around the search functionality and the likely hood from their end of keeping it up to date and populated with the appropriate search words. We would also have liked to build out more properties and test the search functionality with key users.
Team credit
For this project, I had the pleasure of working with fellow Ironhack classmates Adriane Danel, Danish Chaudhary and Charles Bicknell.
Many thanks for taking the time to read about this project, was a great challenge. Hope you appreciated the project, do leave your comments below!
