eCommerce

Rebuilding eCommerce backend and UX to enable 30X revenue growth

  • Product Strategy
  • User Research
  • UX Design
  • UI Design
  • Back-end Development
  • Front-end Development

Direct to consumer beauty subscription brand

To accommodate its fast-growing brand, our client needed a way to scale its subscription business in order to dramatically increase revenue. In its first year of operations, the company sold about $1 million worth of kits and subscriptions and raised $18 million at a $100 million valuation for its subscription business. As they used an off-the-shelf solution built on WordPress and Woocommerce, it quickly became a limitation to their growth in terms of website performance and load capacity, and that’s when we stepped in. They needed a website that can welcome the constant growth of their subscribers, but at the same time showcase the high-quality and premium feeling of the brand.

 

Full light-weight back-end and replicable tech stack

Our goal was to create a scalable solution that will improve brands’ overall performance and conversion on their website. By creating a D2C subscription brand, our client’s vision is to disrupt the European FMCG market. They have a thin back-end flow that communicates with the services — they do not have their database but use Chargebee, a SaaS providing payment preferences and recurring billing. Back-end’s job was to be a tunnel towards the external services that all needed to be interconnected. In a way, we used off-the-shelf solutions and made them custom to fill the needs of this project. For example, some services didn’t accept all the currencies offered to their users, and we needed to fix that with our custom solutions.

 

Migrating over 500.000 subscriptions to a new website

The client approached us to build a new, faster tech stack than the one currently used. Since our client has a subscription-based business, the scope included both building and launching the new eCommerce website while at the same time planning and coordinating the migration of half a million users, their personal details, payment tokens, their subscriptions and their historical orders to the new stack.

 

 

Defining design systems and combining previously defined art direction

While working on the design, we had to create a stylized design system that is aligned with the brand the website is presenting. Our design process was based on the systematic approach and our decisions were guided by analytics we gathered from users. The whole process was very iterative, but we can put it down like this — first, we change the system conceptually, then we update the system, and then that system distributes on all pages where that component is located. Every UI component and page was defined in the sitemap and component library, and, based on the defined design system, we created missing additional modules, components, and pages. Every step of the design process was carefully executed with keeping in mind the possibility of extending additional modules.

 

 

A blend of functional and aesthetic

We wanted to maintain high-quality design and pixel-perfect visuals throughout the entire project cycle, and quality starts with collaboration. Our design and development teams were aligned from the very start to the end of the project, and by conducting consistent cross-team QA checkups, we ensured that the issues and errors that occur are immediately solved with the best possible solution for all teams. As we inherited a legacy system for the front-end, we had to find opportunities to enhance the overall user experience, and we managed to do that using delighters — very subtle and smooth micro animations and micro-interactions that could enrich the website with that feel of a premium brand.

 

Improving the UX and user flow

This brand was generating a big number of new subscribers every month, but we saw an opportunity to enhance the process of transforming them into loyal customers. To upgrade their experience from the first touch with the brand, we focused on a deep analysis of their journey and underlined all the parts that could be improved and upgraded. We went chunk by chunk, functionality by functionality and built and redefined different parts of the website while the product is live and working. This way, we upgraded our process, approach and the whole web without stopping our client from generating revenue and new customers.

Scope of work

Discovery
  • Workshop
  • User Research
  • Project Planning
  • Consulting
Strategy
  • Information Architecture
  • Stakeholder Alignment
  • Prototyping
  • Persona Development
Design
  • Art Direction
  • Visual Moodboards
  • UI Design
  • UX Design
Development
  • Front-end Development
  • Back-end Development
Quality Assurance
  • Usability Testing
  • Performance Testing
  • Functionality Testing