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,  contracts, invoicing, and printing. Many users love the product, but most struggle when landing on the application dashboard and navigating to other parts of the product.
My Contributions
I originally joined ShootProof as a front-end engineer. I eventually transitioned to the product design team as a user interface designer. Having both technical and creative perspectives of the application, there were some features that I identified as in dire need of a refresh. Every quarter or so, the product team sets aside time to do a hackathon, and I took the opportunity to do a deep dive into Figma and explore an application facelift.
1. Login
In 2017, the studio login panel received 1.8 million page views. There has been an outstanding task on the product backlog to add a marketing component to the login panel. Although the login behaves appropriately and functions as expected, the marketing team wanted to take advantage of the high-volume traffic this page received and use the login as an opportunity to share recent blog posts and product updates.

Taking queues from other successful applications (Leadpages and Mailchimp to name a few), I anchored the login widget to the left-hand side of the screen, and I reserved the remaining area to the right of the widget for all of ShootProof's future marketing needs. In the example below, I am using this space to highlight the annual Black Friday sale.
Figure 1.0 - Current login page
Figure 1.1 - Login page redesign with marketing panel (illustration by Amanda Coffelt)
2. Dashboard
After logging in, a user is taken to a personalized dashboard and greeted with an overview of their recent gallery activity, sales history, lab orders, an action to create a new gallery, and links to various tips or blog posts. Although this information is insightful, this page suffers from hierarchy issues. The presentation of the content is weighted too similarly across the page, and most users are unsure of what they are looking at and what actions require their immediate attention.

Photographers tend to be visually-minded people. The dashboard should provide a quick glance to the user of what is happening within the ShootProof system as it relates to their business. The recent gallery activity should utilize the gallery cover image rather than plain text; this type of visual treatment will help a user easily distinguish one gallery from the next.

Grouping the lab orders within different status bubbles seems to be sub-optimal. Instead, I opted to display the lab orders in a tablular format to provide more data points and context. In the example below, the three most recent lab orders are visible and a user can click on each table row to access an individual lab order.

The sales history is displayed similar to what you might find on a cryptocurrency or financial services website. The segmented tabs allows the user to toggle the sales activity between one day, one week, one month, three months, one year, and five years. These tabs might vary based on actual user activity.

Lastly, the notifications and tips now live in a sidebar along the right-hand side of the page. This information is still visible but de-emphasized. This makes the gallery activity, lab orders, and sales history appear more front-and-center and establishes a stronger visual hierarchy throughout the application dashboard.
Figure 2.0 - Current dashboard page
Figure 2.1 - Dashboard page redesign with collapsed sidebar menu
3. Search & Navigation
ShootProof has a vast library of features that includes galleries, contracts, invoices, price sheets, orders, and watermarks to name a few. These features fall into one of four major categories: studio, photos, commerce, or reports. On the global navigation bar, a user can discover a feature by hovering over each category to reveal a flyout menu of links. The grouping of these links may or may not be readily apparent or make sense to an untrained user.

As part of my redesign, I relocated the navigation items from a global navigation bar to a collapsible sidebar menu. When this menu is expanded, all the navigation items are revealed. This expanded state persists as the user explores the app until the menu is toggled back to a collapsed state. An indicator on a navigation item might be used to highlight a new feature or to signify recent activity related to that part of the application.

A global search component was also added to allow a user to search the entire feature set by a keyword or phrase. This search feature could be extremely powerful for users that take advantage of ShootProof's linked documents and contacts.
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 contact list page displays all the studio's contacts inside a table. This tabular list treatment can also found across the application in contracts, invoices, emails, orders, and even in the galleries. The user experience tends to feel monotonous and repetitive when navigating around the application. It can be difficult for a user to distinguish one feature from another when everything follows the same generic template.

Instead of relying on tables, I converted the contacts into a card component. This card component allows for the user to upload an image of their contact to use in place of the default avatars. Having this kind of visual representation helps a user quickly identify a contact when viewing and scanning the contact list. Most social media applications offer a similar visual experience, and this representation generally jives with a user's standard 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 various pieces of data: recent contract activity, the primary contact (and a "second signer" if one exists), the contract due date, linked documents (typically an accompanying invoice), the contract status, and the contract itself. These data points are displayed above the contract. A user has to scroll the page down past this information to actually view the contract itself.

Needless to say, the preexisting page hierarchy is a bit jarring. To remedy that, all the supporting data points have been moved to the right of the contract. This brings the contract back to the user's forefront. Additionally, the contract status banner was removed. Many users thought the banner was a button or found it redundant or completely missed it altogether (banner blindness).
Figure 5.0 - Current contract view page
Figure 5.1 - Contract view page redesign
6. Brand & Account Settings
A ShootProof user can divide their "studio" into multiple brands. For example, a photographer could specialize in both portraiture and wedding photography, and they might want to use different branding when marketing themselves toward a variety of clientele.

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 users associate the star iconography with "favorites" or "likes". In the redesign, both the brand switcher and the account settings are now combined within the same menu for simplification.
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. As stated before, the grouping of application features needs to be reevaluated. Tools like invoices and watermarks are not intuitive to your average user. There are also reporting features that have yet to be converted over to the latest front-end frameworks that could use some redesign.
8. Credits
Photography - Roy Handy
Photography - Death to Stock
Iconography - iconmonstr
Login Page Illustration - Amanda Coffelt