Squarespace Studio

The project was entered into competition organized by Dream Projects and won.

Take a look at a more detailed Case Study here.

Squarespace Studio project

Challenge

Problem

Squarespace Studio is a stand-alone app that enables users to discover and book a professional photographer for showcasing their products photography on their personal Squarespace site.

Insight

Through research I learned that people are often overwhelmed with a number of photographers to select from. The most important criteria for them is work examples, price and reviews. Also, business owners prefer to have a more detailed discussion with a photographer before making a decision to book a service.

Solution

A native mobile app that allows business owners to post a job and get qualified proposals. Users can compare them to pick the perfect match, communicate directly with the photographer, and manage the job from booking to receiving finished assets and making a payment, all in a single location.

design process

Process

To get the project started and to inform my process, I did research: studied websites and apps for booking product photographers, read articles on how to hire a product photographer to understand the nuances of the industry, distributed the survey among multiple groups of entrepreneurs and interviewed people who had experience booking a photographer. I learnt that they prefer to search for pros on their own, but often feel overwhelmed with a selection. It is important for them to be able to ask questions and be in control of the process.

I identified 2 user groups with significantly different motivations for using the product: Product Owners and Photographers, but for this project focused on the former only. To gain a better understanding of the entire process, I mapped out the customer’s journey and made a list of tasks the customer needs to be able to complete to use our product successfully. This allowed me to think about different flows and identify interactions our product needs to support. Creating a sitemap helped visually denote how different screens and content relate to one another.

design system

Design System

After sketching ideas on paper and moving to mid-fidelity, I created hi-fi prototypes in the style of other Squarespace apps. The brief has a lot of questions, and to make it less overwhelming I broke it down into multiple shorter and more manageable steps and introduced a progress bar to help users feel like they are making progress towards an end goal and keep their motivation high. The tab bar contains the main pieces of core functionality available with one tap, allowing rapid switching between screens.

The card with an offer has all relevant information telling the user if this pro is a good match. Images are in the very center to grab users’ attention. In the detail view we present more work examples loud and clear. The quote and actions are fixed at the bottom of the screen. There are multiple ways for users to contact a photographer for more details before they decide to commit. Users can track the progress of the order, evaluate finished images and pay for the services. To improve on my design I would conduct usability testing sessions and iterate on the solutions.

project grid