Building with Empathy: Exploring How We Built a One-to-Many E-Commerce Experience
After more than a decade of designing and building software for others, Detroit Labs ventured into a product offering of its own: Octocart. Now it’s time to share what we’ve learned from developing our e-commerce platform.
In part three of this series, we will explore the team’s thought process, discuss the challenges in building a flexible platform, and share key takeaways behind the creation.
Our Approach to Creating a Customizable Design System
When we built Octocart, we wanted more than a one-shot product. We wanted something with greater market potential that could truly be scaled. Our team was thinking beyond a solution for just a single client and instead about how we could serve the digital ordering needs of many—the food ordering space in particular—by creating something customizable without the price tag of a custom build.
Taking a Product Owner Perspective
Our goal: To make an industry-agnostic digital ordering solution that brands could use to express themselves and grow their business. Although there are plenty of third-party ordering solutions to choose from, we wanted to fill a gap in the space—customization at an affordable price. Our track record of developing winning solutions helped us transition into a product owner mindset and move through tough choices together as a business and team.
Challenges for Design and Development
With any software project comes layers of complexity and unique (yet often unanticipated) challenges. By staying organized and true to our process, we could navigate every twist and turn, including:
Prioritizing the Big Picture
The team quickly learned to keep their eyes on the prize. That meant keeping potential use cases in mind throughout the development lifecycle rather than fixating on one brand’s needs or use case. We needed to craft a rigid system to keep scope focused but flexible enough to support a variety of brand needs. We zoomed out to see development from a drone shot, and remembered how each detail could be the difference maker in an overall platform of the future.
Building a UI Component Library
To build such a system, we created our own user interface (UI) components and injected common design principles and patterns throughout. Baked into these components would be properties allowing for complicated system-wide aesthetic changes with a simple flip of a switch—for example, swapping a change of a branded red accent across buttons, headings, links, and more.
Using insights from tools we had used previously, Detroit Labs created a universal component library that could be tuned to each client’s unique needs. Octocart’s component library consists of various back-end modules, including:
- Form fields
- Treatment for images
- Global editor
Testing the Platform
It’s easy to lose something between design and development and for functionalities to behave in unanticipated ways. Our process was one of continual refinement and testing.
One tool made that easier: Storybook. Storybook acts as documentation for our UI component library, ensuring our entire team understands what’s possible and expected. With it, you can preview and experiment with individual components in an agnostic environment and customize them for any client or brand with different designs.
Storybook was especially helpful in design reviews. With it, you don’t need to go on the website and manually test scenarios. The tool fostered collaboration between development and design in deciding between customizing or hard-coding pieces and brought both sides together to ensure that elements in development looked like they did in the design file.
The Biggest Rewards of Creating Octocart
“This is the most satisfying project I’ve ever built, just because everything is so customizable … kind of like National Lampoon’s Christmas Vacation: Plug it in, and everything just works.”
—Chelsey Baker, Frontend Product Architect
We asked our team to reflect on the experience of building Octocart, and in addition to countless lessons learned, they walked away with three major rewards in mind:
1. It’s User-Friendly
In addition to its flexibility, one of our favorite things about Octocart is that it’s easy to use. Businesses don’t need a developer to use it. They can simply go into the content management system (CMS) and drag and drop to make the experience completely branded. Everything is modular, reusable, and scaled based on unique needs—that’s the reward our team received from putting in substantial planning and effort up front. We did the development work with extreme care, so you can focus on the fun stuff.
2. It’s PCI Compliant
We made Octocart PCI compliant so it could securely handle credit card and other sensitive personal information for business transactions. Although compliance is typically required for any technology that handles payments, it usually falls on our clients to handle themselves. It was an eye-opener when Detroit Labs went through the intense compliance process as a company for the first time, and especially rewarding to hear back from the auditors when we passed with flying colors.
3. Enhanced Capabilities Translate to New Opportunities
Before Octocart, Detroit Labs focused solely on building clients custom digital ordering solutions. But while that was the ideal solution for some, the price tag certainly wasn’t for everyone. With Octocart’s broad feature set and capabilities that translate across brands and industries to meet e-commerce needs, we found ourselves in a position to diversify offerings within the complete digital ordering vertical.
Tips from the Detroit Labs Team
Our clients’ projects always challenge us, but building Octocart presented challenges that kept us on our toes. We asked a few of our project leaders how the experience opened their eyes.
Coding Insights from Chelsey Baker, Frontend Product Architect
One of the biggest takeaways from a development perspective is the importance of doing something right. When you’re making a brand new product, you can’t take shortcuts. This means making sure you’re testing every single “LEGO piece” and prioritizing accuracy. For a product designed to adapt to the needs of so many businesses—and on multiple pages of their websites—you need to slow down and build on the knowledge you have.
Keys to Success from Kelsey Hilbers, Product Manager
The tough thing about building something from scratch is knowing when to say “no,” or more accurately, “not right now.” It’s hard as a project manager to put your foot down because you have so many ideas and designs, but it’s not realistic to build everything right away. A minimum viable product gets its name for a reason—you have to pick and choose features and go for it. We had to make tough calls with Octocart, but that’s good because it leaves room to grow the product bigger and better in future iterations.
Dig into the Detroit Labs Product Development Journey
Detroit Labs built Octocart by combining best practices, grit, and experience, and the process made us better designers, developers—and a better company. Keeping users in mind, we built a platform with the power to scale.
Want to learn more about our journey from idea to product? Read all about the process on the Detroit Labs blog!