ShootProof

Application Redesign
View prototype
Project Overview
ShootProof is a SaaS company that provides stunning client galleries and sales tools that empower photographers to run successful and sustainable businesses. They offer online photo proofing, customizable password-protected galleries and mobile applications, invoicing, contracts, and printing. It is a beloved product, but many users often struggle when landing on the dashboard and navigating to other parts of the application.
My Contributions
I originally joined ShootProof as a front-end engineer. I eventually transitioned to the product design team and started creating user interface mocks for upcoming projects. Having both technical and creative perspectives of the application, there were some features that I identified as dated and in need of a refresh. Every quarter or so, the team sets aside time to do a hackathon, and I took the opportunity to dive into Figma and explore an app facelift.
1. Login
In 2017, the studio login page received 1.8 million page views. Although this page behaves as expected and serves its function, the marketing team has made repeated requests to update this page and to take advantage of the attention this screen receives. Most users have to visit this page to access their account, and marketing would like to use that opportunity to share product updates and perhaps a recent blog post entry.

Taking queues from other sites (Leadpages and Mailchimp to name a few), I decided to anchor the login container to the left-hand side of the screen, and I reserved the remaining area to the right of the login for all of our future marketing needs.
Figure 1.0 - Current login page
Figure 1.1 - Login page redesign with marketing panel (illustration by Amanda Coffelt)
2. Dashboard
Upon logging in, most users are greeted with a quick synopsis of their recent gallery activity, sales history, lab orders, links to tips or blog posts, and an action to create a new gallery. This information is helpful, but the presentation is too similar across the board and most users often miss it.

Most of our users are visually-minded, and the dashboard should give our photographers a sense of what is happening within the system at a quick glance. I decided that the recent gallery activity should utilize the gallery cover imagery instead of just plain text. This visual treatment will help a user discern from one gallery to the next.

The three most recent lab orders are displayed in a tabular format. A user can click on each table row to quickly access their orders.

The sales history is displayed similarly to the trends found on a stock investment or cryptocurrency website. I also added a segmented control to allow a user to toggle the sales activity between one day, one week, one month, three months, one year, and five years. Of course, these toggles may vary based on how long a user has had an active account.

Lastly, I moved the notifications and tips into a sidebar on the right-hand side of the page. I wanted to de-emphasize this information but still keep it front-and-center, while primarily highlighting the gallery activity, lab orders, and sales history.
Figure 2.0 - Current dashboard page
Figure 2.1 - Dashboard page redesign with collapsed sidebar menu
3. Search & Navigation
The top level navigation bar is divided into five sections: dashboard, studio, photos, commerce, and reports. Application features such as contacts, contracts, galleries, invoices, and watermarks are nested somewhere within these sections. To find these features, a user most hover over each option to reveal a flyout menu and perform a "discovery exercise". Additionally, the groupings of these features may or may not make sense or be readily apparent to the user.

In my redesign, I relocated the navigation items from the top of the screen to a collapsable sidebar menu on the left-hand side of the page. When this menu is expanded, all the navigation items are revealed and this expanded state persists throughout the experience until the user decides to toggle the menu to hide it from view. Additional indicators are used on the navigation items to highlight new features or to communicate recent activity related to a specific feature.

Furthermore, I introduced a global search component to allow a user to perform a find by typing in a keyword or phrase. This feature could prove to be extremely beneficial for studios that take full advantage of the application's contact list.
Figure 3.0 - Current navigation menu hover state
Figure 3.1 - Dashboard page redesign with expanded sidebar menu
Figure 3.2 - Global search results
4. Contact List
The current contact list page displays all the studio's contacts within a table. This list treatment is also found across the application in contracts, invoices, emails, orders, and even in the galleries. Although we can display these different types of information in a tabular format, things tend to feel monotonous when navigating around the app, and it becomes difficult for a user to distinguish one feature from another when everything follows the same generic template.

Instead of relying on tables, I decided to move the contacts into a card component. This card component allows for the user to upload images of their clients to use in place of the default avatars. Having this kind of visual representation helps a user identify a contact easily when revisiting this page. Most social media applications offer a similar visual experience, and this representation generally jives with a standard user's mental model.
Figure 4.0 - Current contact list page
Figure 4.1 - Contact list page redesign
5. Contract View
When viewing a contract, a user is provided with multiple data points: recent contract activity, contact (and a "second signer" if one exists), contract due date, any linked documents (typically an accompanying invoice), contract status, and the contract itself. Most of the contract's attributes are displayed above the contract; the user has to scroll a little bit past this information to get to the contract.

Needless to say, the pre-existing hierarchy is slightly jarring. To remedy that, I moved all the supporting data to the right of the contract, thus bringing the contract to the forefront. I also removed the status banner because most users thought it was a button, found it to be redundant, or completely missed it (banner blindness).
Figure 5.0 - Current contract view page
Figure 5.1 - Contract view page redesign
6. Brand & Account Settings
Users have the ability to divide their "studio" into multiple brands. For example, a photographer might specialize in both weddings and portraiture, and they might want to use different brands when marketing themselves to their clients.

A user can switch brands or access the account settings menu via the global navigation bar. In the current implementation, the brand switcher is available by hovering over the star icon. Generally speaking, most people typically associate the star iconography with "favorites" or "likes". In my redesign, I chose to combine both the brand switcher and the account settings within the same menu.
Figure 6.0 - Current brand selector menu
Figure 6.1 - Current account settings menu
Figure 6.2 - Brand selector / account settings menu redesign
7. Next Steps
There are multiple areas throughout the application that need to be re-explored. Features like invoices and watermarks are not intuitive to your everyday user. There are also reporting features that have not been ported over to the latest front-end frameworks and are in need of some love.
8. Credits
Photography - Roy Handy
Photography - Death to Stock
Iconography - iconmonstr
Login Page Illustration - Amanda Coffelt