☉ User Experience

↓ Unbounce + Unsplash
Save Me Time


Enable our 15,000+ customers to use the 600,000 free (do-whatever-you-want) high-resolution photos from Unsplash inside the Unbounce landing page builder.

unbounce-unsplash-featured-image

Unbounce + Unsplash

Unbounce is a conversion intelligence platform that enables marketers to quickly create and optimize campaigns.

Based on existing data and user research we identified that the Creator that greatly cared about achieving their vision with pixel perfection was in fact spending hours in their workflow downloading images from Unsplash and uploading them into the Unbounce library.

Considering the Creators focus on: optimizing workflow to maximize effectiveness, improve visual quality rendering, web performance and production speed, and maintain quality of brand representation and their craft we would be directly addressing pain points the Creators face everyday using the Unbounce landing page builder.

We also recognized that the Unbounce Experience Principles of save me time, give me control and work well with others aligned how the creator evaluated our system and we could greatly improve the Creators experience by integrating with Unsplash and remove the unneccesary manual labour.

Based on the evidence we set the objective to enable our 15,000+ customers to use the 600,000 free (do-whatever-you-want) high-resolution photos from Unsplash inside the Unbounce landing page builder, leveraging their existing patterns of behaviour and streamlining their workflow.

Team
Denis Suhopoljac (design director)
Sarah Gillis (product designer)
Cole Deroiche (product owner)
Mark Wainwright (software developer)
Alex Chan (product quality analyst)


Deliverables
Usability Heuristics Analysis
Usability Testing
User Research
User Interface Design

unbounce-original-library-analysis

Analysis

Numbers correspond to analysis.

  1. The dropdown contained all the image libraries. We wanted to make sure people were aware of the image libraries available to them.
  2. The trash can was the first action you could do in your library. Deleting things in your library as a primary action felt counter productive. You should grow your library.
  3. Search visually not emphasized enough or in a consistent place.
  4. Sort and filter did not use conventions we used across our entire product.
  5. The Image count could be more contextual rather than tacked on as a title and label.

"The best thing that you can do for the end user is offer them a consistent and familiar experience. Avoid additional cognitive load, unless you have a very good reason for it."

Improvements

  • Introduce tabs to make all libraries visible to the end user, while making tabs consistent across the product.
  • Add image counts to tabs and make them contextual.
  • Place sort where it is most intuitive to the end user similar to operating systems.
  • Emphasize search in the top right corner very similar to spotlight search or OS search results
  • Making delete selected a clear label for the end user and make it active when action can be completed.
  • Insert clear and consistent loading screens.
  • Create a download file image dialogue consistent with image library.
  • Make all components consistent across our landing page builder.
  • Reduce visual noise by applying grid pattern only inside image containers.
unbounce-my-images-loading

Loading My Images
A consistent loading screen with user feedback.

unbounce-my-images

My Images
All the images a user can or has uploaded to the Unbounce landing page builder.

unbounce-my-images-sort

My Images Sort Dropdown
Sort by Name, Size and Upload Date.

unbounce-public-images-loading

Loading Unbounce Public Library
A consistent loading screen with user feedback.

unbounce-public-images

Unbounce Public Library
Images included in Unbounce templates and available to all users.

unbounce-unsplash-images-loading

Loading Unsplash Image Library
A consistent loading screen with user feedback.

unbounce-unsplash-images

Unsplash Image Library
The default state would present most popular images from Unsplash.

unbounce-unsplash-search-guitar

Search Unsplash Library
A user would be able to search by any category, topic or phrase.

unbounce-unsplash-choose-guitar

Choose Unsplash Image
Choose to import the unsplash image to my images and place it on your landing page.

unbounce-importing-unsplash-images

Import Unsplash Image
Automatically import the selected unsplash image into your landing page.

unbounce-download-file

Download File Library
To ensure consistency across the system we updated the download file library user interaction and interface patterns to match the image library.