Backdrop is an e-commerce platform curating photography that can easily be designed on.
Constraints
Budget
CMS (Shopify Basic)
October 2018 - February 2019
My Role
Design Lead
Collaborators
Robert Sutton - Developer
Yassir Zakaria - Developer
Ellie Cox - Product Owner
Andres Matos - Developer
Background
Customer Problem
"Background" is a vague search category, which makes the search for background photos long and tedious.
Our User
Freelance designers and small business owners.
User Goal
Create a product search that is easy to navigate by our users.
Business Goal
Create a minimum viable product to help Backdrop find product-market fit for background stock photography.
Research
Contextual Inquiry Interviews
Filters are limited
The designer knew what they wanted to find, but didn’t have the ability to narrow their search because their keyword was not an existing filter.
Contextual hierarchy
The term "background" is vague, so they needed a sub-search within the term background (i.e. texture, landscape, etc.).
Users are getting lost
The designer would find themselves deep in a specific library and have to press the back button multiple times to navigate to where they wanted.
To further understand the users' needs we observed eight designers complete the task of finding and purchasing a background stock image for a specific landing page on a competitor’s site. We observed and summarized 3 key findings.
Personas
We interviewed designers & small business owners who regularly use stock photography. Drawing on our conversations with them we developed the following user personas.
Ty
Ty is a freelance designer in his late 20s living in Austin, TX. He works mostly by himself on small business web design projects. He is quick and practical, which serves him well in working with small businesses. His clients always come back to him for additional work.
For Ty, using stock is a regular part of his design process.
Research Summary
Anna
Anna is a small business owner in her early 30s from SLC, UT. She runs a clothing store on Instagram and dabbles in design. She is new to running a business and is constantly looking for resources to stand out on her customer’s feeds.
For Anna, using stock is new and she is actively exploring how using it sets her apart from other businesses.
Katrina
Katrina is a designer in her mid-30s who runs a small brand studio in Seattle, WA. She works with a close-knit team of designers and developers. She is conceptual and loves to explore visual territories through imagery. Her clients love her attention to detail.
For Katrina, using stock is imperative to how she presents work to a client.
The user wants an interface they can contextually search and navigate within quickly. They want to cut down the amount of time they spend searching for stock so they can get back to their designs. Before we started the designs we established 3 principles gathered from our research that would guide our decisions.
Design
Fast
User needs to be able to find what they need quickly.
Searchable
Search should be readily available to avoid endless filtering.
Contextual
The backgrounds should be organized in a way that is easily digestible.
Exploration
We focused our exploration on contextual search, figuring out how we could solve both the user and business problem through our designs.
Iterations
We ideated and narrowed down our explorations to three concepts. We then showed them to users to get feedback on which version best suited their needs.
The users favored the product gallery with a search bar from concept #3 and the category page from concept #1. They liked the idea of having a stock product page without a large number of filters since they were already searching within one large category “background photos.” The category page was appealing for returning users to see the newest collaborations.
Final Screens
For the final design, we created a categories page, as well as a search focused product gallery (a combination of concept #1 and #3).
Some rational behind our decisions:
1. We wanted to provide an educational opportunity for this new concept. By having a category page the user can see how the search for background images can be further broken down contextually.
​
2. We prioritized what would give our users the most value while also building within the constraint of a minimum-viable-product.
​
3. The sub-search bar on the product page allowed us to eliminate a long list of filters for the user to sort through.​
4. One of the client's main business goals was to partner with artists for specific categories, so this structure made it easier to onboard artists while building their library.
Results
Overall, I am proud of where this project ended up considering the budget and CMS constraints. In the first six months, Backdrop had 9,000 sessions with a conversion rate of 1%. They also established a product-market fit with a retention rate of 26%. That being said, three months after launch we received customer feedback and see opportunities for improvement.
Shopify Basic limits back-end development, which complicates the opportunity for customization. If we had full range to build the site unconstrained by a self-funded startup budget I would do the following differently:
We would do A/B testing with our demographic to find which search method met the users' needs.
We focused on the search within a category, but we found that it does not solve all of the customer’s needs. It would have been better to test to see if the user preferred a balance between search and using filters on the side of the product page.
We would move the product to the homepage.
It takes too many clicks to get to the actual product. As an early-stage startup, the client wanted to use the homepage as an educational resource about their business. After launching we realized that we were losing customers because the product was buried too deep.
We would elevate the visual design.
Small business owners are purchasing images, but few designers are. This could be partly a marketing issue, but we could have worked harder to create a more generalized visual design that feels on par with other stock websites while still keeping a bold visual presence.
Potential Improvements
The following wireframe is my first iteration for how I would address the feedback from post-launch usability testing.
