↓ 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.
The Problem
At this point in time in 2018, Unbounce was a landing page platform that enabled marketers to build, publish and test landing pages without IT. When we conducted a contextual inquiry we realized that a large percentage of our participants was using Unsplash & Unbounce everyday. The workflow however was cumbersome and required plenty of manual labour, effort and time from the user.
Team
Denis Suhopoljac (design director)
Sarah Gillis (product designer)
Cole Deroiche (product owner)
Mark Wainwright (software developer)
Alex Chan (product quality analyst)
Activities
Usability Heuristics Analysis
Usability Testing
User Research
User Interface Design
The Approach
Once we analyzed our insights from our contextual inquiry we quickly found that our Creator archetypes focus on achieving their vision with pixel perfection. They care about optimizing their workflows to maximize effectiveness and quality of brand representation. The creator cares about visual quality rendering, web performance and production speed.
“We use Unsplash for our landing pages. It is super useful. This can be tedious as I’m constantly searching Unsplash, downloading the images, storing them on my hard-drive and uploading them to Unbounce.”
Our meta-data scans revealed that 47.5% of Unbounce landing pages had at least one Unsplash image published. [“Where from:”+ names containing “-unsplash.jpg.”]. All of these insights closely aligned with our Experience Principles of Save Me Time and Give Me Control. Based on these insights our goal was to expedite, automate and simplify the process of adding Unsplash images to your landing page.
Design Analysis
Numbers correspond to analysis.
- The dropdown contained all the image libraries. We wanted to make sure people were aware of the image libraries available to them.
- 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.
- Search visually not emphasized enough or in a consistent place.
- Sort and filter did not use conventions we used across our entire product.
- 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.
Loading My Images
A consistent loading screen with user feedback.
My Images
All the images a user can or has uploaded to the Unbounce landing page builder.
My Images Sort Dropdown
Sort by Name, Size and Upload Date.
Loading Unbounce Public Library
A consistent loading screen with user feedback.
Unbounce Public Library
Images included in Unbounce templates and available to all users.
Loading Unsplash Image Library
A consistent loading screen with user feedback.
Unsplash Image Library
The default state would present most popular images from Unsplash.
Search Unsplash Library
A user would be able to search by any category, topic or phrase.
Choose Unsplash Image
Choose to import the unsplash image to my images and place it on your landing page.
Import Unsplash Image
Automatically import the selected unsplash image into your landing page.
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.
Outcomes
- Feature was launched within two sprints utilizing external API.
- Launched feature on website, in product and with community while collecting feedback.
- Unsplash announced the integration to increase awareness and adoption.
- Adoption of feature was at 55% of Unbounce user base within 30 days and climbing.
How We Worked Together
- Based on qualitative feedback and meta data scans UX/PM identified a product improvement.
PM engaged Unsplash for a partnership. Engineering did a spike on the API and embedding feature into UB. UX did a design analysis and review on current feature.
Unsplash agreed to a combined launch and promotion with PM. Engineering defined API capability and effort required. UX mapped all the user flows.
UX designer and two developers worked together to implement the designs that UX team defined. Fine tuning was done during implementation.
UX designers brought the working demo to a design review and collected feedback.
Front end developer implemented all our notes and revisions. Implemented usage tracking.