Zibbet was traditionally a Handmade Marketplace for creative entrepreneurs, however they managed to get some investment back in 2018, they hired me to do work on a few different projects with them, I was gonna help them get the first version of the product to market and find a market fit, run a discovery session and look at the market for competitors and find out a good direction for the company to go towards. My role here was UX research, UX design, Design System development, UI design and a good old traditional front-end development in Bootstrap 4 and Ember JS.
Since we were starting from scratch I wanted to see the competitor landscape and see what everybody else was doing and find what Zibbet could do to stand out in this saturated market market, so I ran a thorough competitive analysis and looked for where other companies were strong in and what they were lacking, find out where Zibbet could standout as a product.
Zibbet Marketplace was not doing so hot, but we had a really loyal customer base, thousands of people, and we wanted to merge Zibbet Marketplace with a few other marketplaces like eBay, Amazon Handmade, A.C. Moore Marketplace (which we were developing for them), Etsy and more. The idea was that you can post and manage items all in one place, however this is a hard thing to do when you have to deal with things like, how different marketplaces treat different data different. For example a user might want to sell an item in 2 different Marketplaces, but the fees at Amazon are higher than eBay, so do they sell the same thing in 2 different marketplaces at different price points and different descriptions but manage them from one place, what becomes the source of truth? and so many other things to consider, therefore we had a lot of product thinking and testing to do in this discovery session.
We did as much preliminary research as we could and it was time to do our best to get the product out to our users as fast as we could so we could learn from it. We started by whiteboarding ideas and straight away getting into product design.
You might be wondering about all the different items like user personas, stories, vision and more, where did the all go? Well we had an idea of who our users where, 90% women between 27 and 59, but that’s all we had to go with, we didn’t have the time or the budget to run interviews or do testing. We ran a couple Facebook sessions to see what users wanted and to see if it matches what we wanted to deliver to them and that’s it. From here however I’m gonna go through every single stage thoroughly, so bear with me.
How do we get our users who have no idea what inventory management is onboarded onto the platform and teach them about the multichannel concept? How do we generate leads? Well this flow will walk you towards that.
The flow of our work was for the design team to work with the product managers to come up with the base, ideal situation and we discussed the session in our group and agreed on things that did make sense for the product and business and discussed the things that required changing.
As I mentioned before, this is one of the most complex products I’ve ever worked on, so we ran a lot of workshop sessions figuring out what was possible and what wasn’t. How can we merge and sync every item, how do users import their existing inventories from different channels? How do we support merging them? How do we manage adding and editing new products? What if they want different information on different channels? How do we handle different currencies and so many other hows and these sessions always helped us to get closer to some sort of hypothesis that made sense and we would build these and quickly test them with a small number of users.
We wanted to develop a design system, so we decided to create the entire UI in wireframes to get a good idea of how many different components we need and build a modular system so we could develop and move faster. There were literally hundreds of scenarios we needed to take into account and hundreds of states to make.
We wanted to stay true to the classic Zibbet look but add a bit of feminine flair to it, the result is what you see below.
We wanted the typography to represent a fun but professional brand and we chose to mix our serif and sans-serif together.
We had a few different sections to our product, our Marketing site and the dashboard. We wanted each of them to fulfill a different task. Our Marketing site had to look fun and engaging and dashboard had to be usable for a long period of time and the following palettes were produced.
As mentioned before we wanted our design system to rely on a nice modular component based system and we created the following to achieve exactly that. Everything was made 1-1 to our code base, this made it easy for us to very quickly put the front-end of our product together.
The outcome was our complex but yet beautiful and useful dashboard and our super engaging marketing site.
As mentioned before the idea of the Marketing site was to inform people of what Zibbet is and excite them about the product, it was also used a funnel to make the sale and it also linked to our educational elements of the site.
The first part of this is the onboarding flow, our mission was to onboard users and ease them into the dashboard as smoothly as possible.
We designed everything with scalability and mobile in mind, one the most challenging elements however was the navigation.
This is the most complex part of this project, this is where users engage with the most and get their daily tasks done.
Small details matter, that’s why we spent time on small delights like interactions, animations, loading states and personalisations.
One of the biggest discoveries and changes that we made based on our learning and customer feedback was to change and reverse engineer the way people were listing or editing their items from our app. Below is the traditional way of us solving this issue, we would place the user in a linear flow and allow them to have a bunch of common attributes and then every unique thing about every channel is taken care of step by step.
We reverse engineered this entire flow by combining every chanel step into a single page, this allowed the user to choose their own journey and once they get used to the process they can then jump into different sections, this allowed us to deliver a quicker and less confusing flow to users and they were happy.
Wow! Time really does fly when you’re having fun. I’m afraid this case study is just about over. But I’ve prepared a few more for you so there’s no need to panic (yet).