Redesigning the marketing website and product dashboard with focus on our audience

Lead Product Designer @ Celery
Overview
Celery is an e-commerce platform focused on pre-orders where you can capture payments and charge customers later, when ready to ship. It was also easy to plug into any website while offering sophisticated order management on top of it.

With the crowdfunding "bubble" from 2014 to 2016, Celery became very appealing for entrepreneurs wanting to be less dependent on existing platforms and launch white label experiences. That helped Celery to acquire a significant cut from the crowdfunding market share and led to an acquisition by Indiegogo in 2016.
Problem
Being just out of Y-Combinator and like many early-stage startups, Celery had that generic "bootstrap" look and feel for the brand, marketing website, and the dashboard and with that no solid foundation on the design language, brand, and usability.

The main issue for the website and brand perspective was the lack of clarity for customers on exactly what the product wanted to solve. On the dashboard, the main points were better usability for core features and more guidance for new users.
Goals
Screenshots of the existing marketing website and dashboard
Screenshots of the existing marketing website and dashboard
My Role
I joined Celery with the mission of making the product more user-centered and build scalable user interfaces. I stayed there for 1 year and 6 months as the only product designer.

I led this project for about 6 months, and my responsibilities included but were not limited to: ideation, collaboration, user flows, interaction, visual design, and front-end coding.
Initial Process
During this project, I was still doing remote work due to the fact of not having a work visa, but I was traveling to the office in San Francisco once a quarter where I stayed up to 2 weeks to better collaborate on product strategy and become more integrated with the company culture.
Brand Refresh
The main output of this redesign was the website and dashboard, but I wanted to make time to start by doing a quick refresh on the current brand because the existing brand lacked personality, but in particular, because defining foundational pieces like tone, color and typography would help me later with the website and dashboard designs.
New logo provided similar organic look & feel with better legibility
New logo provided similar organic look & feel with better legibility
Content First
We started to think about the website by putting together high-level ideas of how we wanted to communicate Celery to potential customers. It was an open process where everyone was welcome to collaborate with ideas.

The main challenge at this point was to define a set of values that would help us to capture crowdfunding entrepreneurs, but at the same time, capture other audiences since our product supported other use cases.
Mobile First
Because we were getting a lot of press from blogs, and most of the traffic to the website was coming from mobile devices, so it seemed like a good idea to start the website project with a focus on mobile. From a product design perspective, it also helped me to keep things very focused and straightforward without compromising the main goals.
Some of the concepts I did for the marketing website
Some of the concepts I did for the marketing website
Dashboard Process
By taking advantage of existing patterns discovered with our existing data and observing sales calls with current and potential customers. I started to identify some of the primary pain points to solve on this project.
Wireframes
I initially mapped the information architecture and then did wireframes of the existing dashboard so I could have more context and do a proper planning for the work to be done.

It was also helpful as a collaboration asset with others members on the team to decide on functionality we wanted to keep or to change.
Screenshot of Balsamiq wireframes
Screenshot of Balsamiq wireframes
Design Language Foundation
Once I had a clear picture in wireframes form of what I wanted to do I started to explore and define the design language for the dashboard UI, which was based on the initial work I did for the quick brand refresh.

I started by defining and documenting colors, typography, spacing, iconography, and basic components and later working on more sophisticated components.

During this process, we were also refactoring the dashboard using Ember so it was a very collaborative process with the engineers and I also got to collaborate on the code level making sure everything was following the right specs. Because we were a super small team, it was more efficient to use my time to do a visual pass on the components directly on the code.
Example of components, icon language and typography
Example of components, icon language and typography
Solution: Brand & Website
Modern, sophisticated, and easy to use were the key elements that we wanted to communicate. We decided to keep the existing logo that had an organic aspect, and it was a clear way for us to differentiate from other competitors.
Brand Refresh
We decided on that tagline after various rounds of collaboration, and it made sense because it was clear about our market fit focus (pre-orders) without being super limited.

To provide extra clarity on what exactly Celery was able to offer as a product right after the tagline, we had our 3 primary use cases: Pre-orders, custom crowdfunding, and e-commerce.
T-shirts and ebooks I did to support the marketing team
T-shirts and ebooks I did to support the marketing team
"A platform for pre-orders and beyond"
We decided on that tagline after various rounds of collaboration and a/b testing. Besides being a clear winner on a/b test, it also sounded like an excellent fit for our current focus (pre-orders).

To provide extra clarity on what exactly Celery was able to offer as a product right after the tagline, we had our 3 primary use cases: Pre-orders, custom crowdfunding, and e-commerce.
Final look & feel for the marketing website
Final look & feel for the marketing website
Solution: Dashboard
The result was a more professional and unique UI with focus on task completion and providing a consistent and guided experience.
Examples on the new dashboard look & feel
Examples on the new dashboard look & feel
Onboarding
The onboarding layer on top of the redesigned dashboard helped users to self-onboard into the platform and decreased the time on our activation funnel, resulting in an easy to use and scalable product experience.
Example of an onboarding flow
Example of an onboarding flow
Impact
We launched the newly rebranded website after 2 months of work, and the core functionality of the dashboard a month later. With subsequent improvements to add more guidance and onboarding.

The new website had a 3x increase on the conversion rate for our acquisition funnel. Our sales team also observed that was a lot clear for customers on their first call, what were the solutions that Celery could provide.
Acquisition
With a mature and scalable product experience, Celery was perceived by customers as a unique solution for white label crowdfunding and supported big launches like Pebble, Plastc, Roli, Boosted Boards, Electric Objects, and many more. Celery was acquired by Indiegogo in 2016.
Resulted look & feel for the marketing website and the product
Resulted look & feel for the marketing website and the product