Company
Fiverr
Role
Product Designer
Year
2021
Overview
The Customer View story
The Customer View is the most-used page in Fiverr’s back-office. It has been in use since the wee beginnings of the company, and over time became a mash-up of design languages and conventions. It was designed on-the-fly by whichever team needed a given feature, from customer support to the security team. After promptly holding a bat-mitzvah for this legacy page that has served us so well, it was decided that an update was due. It’s makeover time!
Understanding the problem
The Customer View had become a mess of code and UI. The user experience was frustrating, and it took 8-18 seconds to load. With 300+ team members using it on a daily basis, the load-time translates to hundreds of work minutes spent looking at a loading screen. I know it’s probably hard for you to read that (and I’m sorry, but this was real life I’m not making it up). The first thing we (My PM and I) did was create and established among the stakeholders a process that looked something like this:
I conducted 15+ interviews with major stakeholders within Fiverr, including the Head of Customer Support, The Fraud Department, Marketing Integrity and more.
There were two main aspects of the interviews. One aspect was to understand better which components were most needed by a given team and to prioritize those components (more quantitative). The second aspect was more qualitative. I wanted to understand how the interviewees felt during different stages of using the Customer View.
A few common themes came up during the interviews:
In addition to insights gleaned from users of the Customer View, the development team also had needs relating to the development of the Customer View, which was the first page in the back-office to be redesigned. Future redesigns of other pages would use the same design language and design system. It was important for the development team to have defined components, along with rules that define when and how to use each type of component.
A design system was needed so that the dev team responsible for the back-office did not have to have a designer—they could function and iterate entirely on their own without designers. I wanted the design system and component guidelines to be very well informed, so I started researching how certain features behave and look in other products, mainly e-commerce products. Feature-specific research differs from general market research in that with feature research, I am looking at something small such as how a key:value or how a price is displayed, and not an entire flow.
Key-value pairs
Here is a small taste of some of the feature-specific research: Key-value components. In their nature they have to be extremely flexible and work well with any other type of content.
As much as the design of the page played an important role, the design system/component library played at least an equal part. Let’s check out the design, and then we can check out some of the components from the new back-office design system.
These sections are example sections, and there are more like them that use the back-office design system. The sections are constantly changing and being updated. It’s a very living organism made of cells that are the components. Let’s take a look at the building blocks of this mini-verse (the components)!
At the heart of this project there is a need by all departments for flexibility and modularity. That is a virtue that was baked into every single one of the components. Each component should be able to be placed in the context of other components and in the same grid, and still work well.
As soon as we sent out the first prototype of the redesign, we received feedback immediately and mapped it out. Overall though, on the component level Fiverr team members felt relieved to see a redesigned and re-thought out experience. Each team has specific needs so we tailored the sections respectively as much as we could for them. This is for sure a work that is still in progress and evolving. Thank you for reading!
