Context
RenoRun is an on-demand construction material delivery company (i.e. Uber Eats for Home Depot). During first 3-4 years of its existence, RenoRun's reach was limited to its iOS/Android app. It didn't have an e-commerce website.
As the company matured we began focusing on general contractors as opposed to homeowners. More specifically small and medium-sized businesses (SMBs). Slowly shifting from a B2C to B2B.
Speaking directly with contractors, I was aware many of them plan their days at their desk or dinner table the night prior to the work day. More than a few mentioned wanting to have a desktop version of our app so they wouldn't have to context switch as much—since all their other planning was done on the computer.
Core Assumption
Our ideal customers — general contractors who are reasonably organized and forecast their needs in advance — want a desktop platform to order materials and manage deliveries.
Not to mention all of our direct competitors had thriving e-commerce sites.
Objective
The objective was simple. Build a web platform that will allow customers to:
- Order Materials
- Manage their orders and accounts
It was also decided to launch a brand new marketing website at the same time.
Constraints
Time
Time, as a startup, is a constant pressure. Everything must be delivered yesterday, and this web project was no different.
Expertise
Few of my compatriots had never worked on a project of this scale. Both on design and on development. So I stepped up and managed the process from start to finish. Coordinating resources and dependencies.
Lack of Design System
At this time, RenoRun was a relatively new startup, and the concept of design systems were just beginning to pop. So this made our development cycle much more tedious. We took advantage of this opportunity though to start creating our design system.
Discovery Process
Engineers had plenty of work ahead of us, which was a relief. The design team jumped straight into open exploration. Drawing out any components, flows or pages we'll be need.
Before jumping into competitor analysis and comparisons however, we started first by asking ourselves "what are people trying to accomplish with RenoRun?" We let this question be our guiding light.
We broadly split the experience into 4 major parts.
- FIND — Finding your materials (search, PLP, PDP)
- BUILD — Build your material list (shopping cart)
- SUBMIT — Submit your order (checkout)
- MANAGE — Manage your account and orders
Dropping any ideas below the green line if they were deemed not critical for the moment. Post-its were used for calling out any questions, assumptions, concerns.
Parallel Development
To speed up development we decided to build components and pages as we designed them. Even while they were in progress. Once components reached a certain level of certainty (70 - 90%) engineers could start building them without the fear of any major structural changes later on. The remaining 10% certainty (100%) came when components were fully polished and "Done".
Providing Figma links to each component file in our design system with interaction instructions and usage examples.
Progress trackers
Divide & Conquer
In the above table you can see the different design owners per component or page. Each designed owned a part of the experience.
We had a solid system down, allowing us to produce large one-off prototypes like this (photo below) within minutes. Used in product demos with the CEO or shared amongst the company at wide.
Marketing Pages
Julia owned the marketing pages on since her background was primarily in branding, marketing. Not to mention she'd already been working on the marketing site even before the e-commerce project kicked off, as a freelancer.
Shopping Experience
Edmund owned the shopping experience since he had some prior experience working at ALDO on their e-commerce site, and he was most interested in doing so.
Checkout Experience
Having designed checkout flows for 2 previous startups, I felt comfortable in this space. Plus, checkout is such a high risk, critical conversion point, I felt compelled to take this on as the senior on the team.
Account Management
Up to this point I'd worked on all of RenoRun's internal tools. Rebuilding our internal console was forever on our wish list (due to deprecated code). So we fathomed a solution to our console rebuild by leveraging our new e-com build. Adapting minimal portions of the layout and inserting few specialized components to turn our e-com website into our new shiny internal console. Thus, reusing over 80% of our work in the process.
For obvious reasons I can't show the designs here.
Ultimately the hybrid e-com-console plan fell through. Engineers deemed this hybridization too risky — to my chagrin.
Outcome
The website was completed in approximately 8 months. That's all the marketing pages, shopping experience, checkout flow and account management, AND a whole new design system.
