May 13, 2015Comments are off for this post.

Client Proofing Tool

The Client Proofing Tool invites photographers, clients and collaborators to seamlessly share and select favorite photographs together. The tool's modern layout beautifully displays any photographer's work and is easy for even the least tech-savvy client to use.

The Art of Listening...and Acting

In my day-to-day as Lead Designer at PhotoShelter, I hear many users stories that could easily launch further ethnographic research, data analysis, A/B testing, product improvements, and feature requests. I keep a running 'brain dump' list to capture user stories, proposed product improvements, and industry-specific design solutions to come back to at a later time. I find this allows me to actively listen to users and consider all information valuable, while at the same time refrain from straying too far from the objective.

Although infrequent, occasionally I have down-time between product and feature build. This can often serve as valuable time for prototyping. Having a list of pre-specified areas of improvement encourages me to be thinking about and actively advocating for the user at all times, even outside of formal product cycles.

One story that popped up regularly in user research was the lengthy process of a photographer's client(s) sending selects to the photographer. In most cases, the client(s) sends a list of selected photographs' filenames to the photographer. Following the lead of this persistent user story, I worked alongside a front-end developer to prototype a solution.

Process

PhotoShelter has long worked within a psuedo-waterfall approach to product development. The Client Proofing Tool design and build process was unique in that it tested an agile, iterative approach. Our initial sprint team consisted of myself and a front-end developer. Together, we quickly highlighted the user stories, project goals, and intended scope of each sprint phase. We sought to invite a product development process in favor of user intent, as opposed to a long scope detailing product requirements. By focusing more on higher level user needs, the exploratory nature of the project minimized design constraints and thus allowed for a wider range of initial solutions to be presented. Prototyping acts as a process to help answer some questions, and in doing so, ask many more.

Guiding Stories

Some of the user stories that guided the project include:

  • The proofing process for most photographers is described as an arduous process:
    • Words & phrases used: “back-and-forth,” “time-consuming,” “complicated,” “confusing”
  • The proofing process for most photographers is idiosyncratic
  • The proofing process for most clients involves emailing the filename of selects, which can result in several emails
ClientProofingTool_GuidingStories

Objective & Parameters

From a UX perspective, my main objectives were to:

  • Simplify the photography selection process
  • Reduce costly back-and-forth
  • Allow teams to contribute feedback and to see selects in common
  • Create an end-to-end, mobile to desktop experience that is enjoyable to use

From a UI perspective, my main objectives were to:

  • Support all types (specialities, colors, orientations) of photography
  • Reduce visual clutter of filter navigation
  • Allow for multi-select filtering
  • Communicate a three step select, review and send process

Unlike the typical tech-savvy PhotoShelter user, our user's clients can be less accustomed to interacting with the latest technologies. Take for instance the example of a wedding photographer sending photos to a couple. This couple, in turn, may solicit feedback from their parents or grandparents. I wanted to build an application that would be easy for anyone to quickly understand and use. Because we imagined the tool would be used mostly in one-off scenarios, such as the wedding example, I wanted to require minimal commitment to understanding the tool.

Sketching the UX

Some of the most important factors in reimagining the proofing process were:

  • Context-of-use: Where are individuals selecting their images. Are they on the go (mobile) or are they sitting in front of the TV with a tablet or laptop? How might this affect the overall user experience?
  • Collaboration: How might users share galleries with their friends, family and colleagues? Are they more likely to forward an email or send a link? Is there another way sharing might also happen? How can a system support multiple collaborators?
  • Review Process: As part of the goal was to eliminate back-and-forth and confusion, how can I minimize selection error? How might I focus the user's attention to encourage one to carefully review one's selects before sending the final decision to the photographer?

Color Palette

Say what you will about Marissa Mayer, her 5-point rule left me intrigued. While in the end I didn't fully stick to five points (that is just brutal), the creative limitations required me to justify each addition color added to the style sheet. It also pushed me to consolidate styles when possible.

The style guide includes hex codes as well as percentages. Percentages are useful as they allow for design colors to be inverted, to create a dark theme (0% becomes 100%, 29% becomes 71%, and so on).

ClientProofingTool_Colors2

Typography

ClientProofingTool_Typography

Give it a Go!

Want to test it out? Take it for a spin (you will be prompted to sign up for a free PhotoShelter account).

May 17, 2014Comments are off for this post.

Image Browser Right Pane Redesign

At PhotoShelter, small product improvements and bugs often get bundled together into one large release. One product improvement that came across my plate as a "fix it" item was a rather widely-defined objective to clean up the UI in the right pane of the Image Browser.

For those that aren't familiar with the Image Browser, let me give you a brief overview. The Image Browser is essentially where a photographer (or organizational members, for our Libris clients) organizes and manages their photo library. The Image Browser has a familiar three section layout, mimicking the structure of many photo editing tools such as Lightroom and Photoshop. Here's an overly reductive breakdown of the system:

RightPaneRedesign2

 

The right pane was in dire need of a clean-up as the entire area lacked hierarchy and intended flow. Here's what I'm talking about:

RightPaneRedesign_Needs2

 

Rather than seeing this as solely a UI redesign, I took the opportunity to improve overall usability, inviting specific user behaviors that were important to the .

Objective #1: Highlight the Gallery & Collection Description

One major usability concern that surfaced through our Client Services team was the lack of discoverability of the gallery and collection description. For photographers that choose to display their images on a PhotoShelter portfolio, the gallery and collection descriptions are incredibly important as some website templates show this information. Thus, the discoverability of this edit action was a top priority in the redesign.

I designed several solutions in attempting to highlight this action. One sketch placed the gallery description directly under the gallery name, achieving the intended objective. Yet for people with longer gallery descriptions, the design failed in that it pushed the sub navigational items below the fold, not meeting Objective #4 (below).

Screen Shot 2015-10-19 at 10.22.52 PM

Sketch 1

It was back to the drawing board. I then thought about collapsing the gallery description. Like so:

gallerydescription_expandcollapse

Sketch 2

This design was not as easy to implement as I originally thought and added unwanted scope to the project, so I needed to come up with another solution. In the end, I placed the description in a tab below Visibility and Access. This meant that the whole description could be visible when editing, but wouldn't take up unnecessary real estate when the tab is closed.

Screen Shot 2015-10-19 at 10.44.25 PM

Final design - long description, on hover

Screen Shot 2015-10-19 at 10.44.53 PM

Final design - short description

Objective #2: Encourage People to Add a Gallery or Collection Cover Image

The first sketch was a full-width design:

RightPaneRedesign_CoverImage1

Because photographers use various photographic orientations (portrait, landscape, panoramic) as their cover images, I knew I would need to allow photographers to adjust their cover image to crop correctly. Like so:

RightPaneRedesign_CoverImage2

This forced the photographer to do too much work to simply set a cover image. It also implied that the cover image cropping carried into other products, such as the site builder, where we have a separate tool for choosing an image's focal point. Nonetheless, I wanted to continue to pursue the full-width cover image as it gave a location-specific visual cue to the user when quickly browsing across galleries and collections.

Here's the solution I came up with:

RightPaneRedesign_CoverImage3

 

Objective #3: Collapse and Consolidate for Greater Overall Clarity

The previous design assumed that the user needed to see everything in order to get a sense of what the system offered. In the redesign, I consolidated sections, which remained collapsed by default. That way, the user can get a broad overview of the information and actions provided in each view. Furthermore, the user can open a section and switch from gallery to gallery. The section will remain open. This is an incredibly important usability concern as photographers need to quickly skim gallery and collection permissions, as well as image IPTC.

Objective #4: Keep Vital Information Above-the-Fold

For the reasons detailed above, the design needed to allow for all vital information to remain above-the-fold when sections were expanded. I shaved height off the header tabs and removed some space between the gallery title and action buttons to accomplish this goal.

 

Overall, the design was incredibly successful. We saw nearly a 100% increase in gallery and collection shares.

 

 

February 2, 2014Comments are off for this post.

New Member Homepage – Analytics

Building off the pre-established member homepage card designs, meant to work across a multitude of device sizes, the analytics area was the launch point for a wider set of initiatives intended to educate users about the impact of their images within our system and externally.

The project's loose guidelines provided ample room for me to consider what information we could display, and how to construct a flexible card system that could adapt to a wide range of analytics.

Top Traffic Sources

The 'Top Traffic Sources' card was intended to show how people are arriving at a photographer's website.  Here are some early sketches I presented to the product team to help the team consider what information might be valuable to present, and how we might deliver this content:

Traffic Sources card sketches

Below is the design we went with in the end. The design accommodated a large amount of content - top traffic sources, raw numbers and percentages, by source, browser and device - in minimal real estate.

Member-Homepage_Traffic

Traffic Sources card final design

Recent Work

The "Recent Work"card was meant to encourage quick interaction with recently uploaded images. Although not entirely sketched out below, the idea behind this card was that additional quick actions (proof, send/share, view, price) could be added within this card on gallery or image hover.

Unique Visits

Many times design parameters are set via technical limitations. I explored many possibilities for an enriched Unique Visits interaction, including showing users a more detailed breakdown of unique visits on any particular day, when a day on the chart is clicked. Unfortunately, we were unable to pull this information from our system's database. Nonetheless, the presentation of the data below was a huge win for our users.

MemberHomepageAnalytics_UniqueVisits

Final Unique Visits interactivity