Shutter Fox: Mobile App Design

Project Background

ShutterFox Photography is a startup real estate photography company that wants to disrupt the real estate photography industry in the time of restricted travel and social distancing that comes with COVID. The owners originally asked for a mobile application to feature, promote, and sell their photography services, but that was before the coronavirus. I designed the application to serve as a reference and checklist for realtors and home sellers and to highlight the work Shutterfox as advertisement. Take a look below to see my process.

Research

User Interviews

After studying the business goals the Shutter Fox owners wanted in the design, I set up interviews with realtors in the Nashville market to find their common problems and see what services would be most helpful. Below are the questions that were initially most important to the Shutterfox owners:

Discover who is the most common decision-maker when it comes to hiring a real estate photographer?
What are the most important aspects and features in photos?
What services do realtors find most helpful from real estate photographers?
With travel being tougher due to Covid, are virtual walkthroughs becoming more valuable?
What are the things you look for in “high quality” real estate photography?

Market Research

With the information from the interviews fresh, I began looking into how the bigger photography companies designed their sites and compared and contrasted several. Many of them focus on different things and there are very few consistencies in design, but they all feature some of the same information. Below is a competitive analysis chart for easy comparisons.

Shutter Fox Competitive Analysis for por

User Interviews

I scheduled and conducted 7 interviews with realtors and found they were most interested in products to aide in efficiency and consistency while also providing ample visual information to their out of town buyers that may have trouble traveling due to COVID. It was at this point that I talked to Shutter Fox owners about focusing on those things most valued by realtors and changing the direction of the project somewhat.

Define

Empathy Map

Taking the information gathered from the interviews above, I created an empathy map to better understand the most common problems in the market and what realtors want and need to help fix those problems. This also served as a visual reference when working on the information architecture within the site by helping focus my efforts on the info most important to them.

User Personas

Using the results from the empathy map with other information from the user interviews, I created several personas to make the future user more real. The personas in this particular graphic are specific to realtors and property sellers that would like photos or videos taken of their property.

Shutter Fox Personas for portfolio 8.28.

Site Map

Taking all of the information gathered from the research and persona creation, I began thinking about the layout and information architecture of the site I was designing. Focusing on both user and business goals, the sitemap came together in a way that gives the user a simple way to obtain information and allows them to easily contact Shutter Fox or book a shoot.

User Flows

I created a user flow chart to prioritize and show the different paths a user may want to take while using the app. Doing this helped to logically organize how the information is presented and helps to make it as easy as possible to get all desired information. As you can see, this chart encompasses many different task flows from start to finish and gives an overview of the overall flows.

Define

Low-Fi Wireframes

Starting the design process, I created wireframes for each of the pages for the Shutter Fox app keeping in mind the company business goals and all information gathered up to this point. My focus was to give the user the information in a way that was easy to find and use while also helping Shutter Fox to provide detailed examples of their past photos. The pages below represent home, interior checklist, best practices, and booking pages.

Usability Tests

After creating wireframes for each of the pages I used Adobe XD to make a low-fi prototype to allow potential users to test the app. I had 7 realtors participate in the study to see what aspects they liked and what areas could be revised or less confusing. Below are the Findings of the test.

Users felt the checklist buttons were spaced too close together
Users wanted a way to learn the reasoning behind each of the list items
Users wanted clear and visible categories when selecting areas in the house
Users want an easier way to move from page to page
Users didn’t understand the photos on the best practices page was actionable

Low Fi Wireframes

Based on the feedback from the initial user testing, I made the desired changes to give better indicators and make navigation easier and more enjoyable. These iterations are below:

Style Guide and UI

Taking into consideration the overall feel and culture of Shutter Fox, I created a simple logo and wordmark to help them stand out in a competitive Nashville market. I also combined some clean and easy to read fonts with their preferred colors and other components that are similar to other companies in this arena to create a comfortable feel for the user.

Shutter Fox Style Guide for portfolio 8.

Hi Fi Wireframes

Once I added the elements from the UI kit and all branding to the wireframes, I selected some of the photos Shutter Fox photographers had taken and a few other elements of visual design were added to create a series of hi fidelity wireframes.

Reflection

Designing the Shutter Fox app and branding gave me an opportunity to operate with less constraints than usual due to the fact that they started with just an objective and not a true project brief. Collaborating with the owners every step along the way allowed us to try many more approaches than some of the more detailed and brand mature companies. Click on the link below to view the working prototype.