Crate & Barrel | CB2
We created a pair of polished e-commerce apps for Crate & Barrel and sister brand CB2 without doubling up on build time, delivering a premium shopping experience that’s primed to scale.
Project Overview
Departments
Product Strategy
Product Management
Product Design
Engineering
platforms
iOS App
Web
duration
Initial Development:
13 months
Partner
Partner
The iconic furniture retailer is putting digital transformation at the forefront to create a more seamless and intuitive customer experience.
Known for high-quality home furnishings since 1962, parent company Crate & Barrel Holdings Inc. (CBH) oversees lifestyle brands Crate & Barrel, CB2, Crate & Kids, and Hudson Grace. Operating more than 100 stores in the U.S. and Canada with franchise locations in nine countries, more than 200 million customers visit the company's stores and websites each year.
Crate & Barrel is an iconic brand name and a leader in its industry — but in a highly competitive space like home decor, staying ahead of the curve is crucial for continued success. To stay on top of their game, it was key that CBH become more agile so they could move faster than the competition when it came to using technology to provide an outstanding customer-facing experience. That's where Heady came in.
Product Strategy
Problem Statement
CBH operates several unique brands, each with its own identity. Looking toward an elevated new build for the Crate & Barrel mobile app and the debut of sister brand CB2’s very first mobile app, they sought a technology solution that could support each brand's individuality while keeping the overall system streamlined and manageable.
Challenges &
Opportunities
Following several months of discovery to understand CBH’s business goals and challenges, together we decided on a shared SDK (software development kit) strategy for the Crate & Barrel and CB2 mobile apps.
This proven approach for building apps for multi-brand companies would allow us to maintain distinct brand identities and functionalities for each app while ensuring a streamlined, unified backend, saving significant time and development costs without sacrificing the individuality of each brand. This approach would also facilitate the rapid introduction of new mobile apps for additional brands in the future.
Benefits of the SDK Approach:
Reduced Development Time & Costs
Allows for the rapid assembly of mobile app functionalities, significantly cutting down development time and associated costs.
Ease of Brand Customization
Enables easy customization, ensuring that each app maintains its distinct brand look and feel while sharing a common technology base.
Streamlined Updates & Maintenance
Changes to core components can be rolled out across multiple apps simultaneously, simplifying updates and maintenance.
Quick Adaptation to New Features
Facilitates the quick integration of new features across all brand apps, keeping them up-to-date with the latest tech advancements.
Consistent Quality & Performance
Helps maintain a consistent level of performance and quality across all apps, enhancing user experience.
Product Management
Collaboration
Full collaboration and transparency were essential for each step and decision made during the app development timeline.
Our integration with CBH's robust in-house tech team was seamless, dividing responsibilities to best leverage our respective strengths. Heady fully managed and led the development of the shopping side of the app, including product pages and barcode scanning functionalities, bringing our specialized expertise to the forefront. The registry side of the project was managed by the CBH team, with Heady filling in gaps as challenges arose. Working as a tightly integrated team with strong communication across the board ensured that project deadlines were met and the final product exceeded expectations.
COLLABORATION TOUCHPOINTS
Shared Slack Channels
Cross-Team Development Agile Ceremonies
Cross-Team Project Management & Documentation
Design Collaboration
Development Practices
ProjectManagement
The Heady Difference
We work so closely with our clients that we feel like part of the internal team.
Our collaboration with Crate & Barrel exemplifies our commitment to being more than just a service provider; we integrate so seamlessly with our client teams that we feel like an internal part of their operations. This project showcased our ability to lead with deep expertise while seamlessly collaborating with Crate & Barrel's robust tech and design teams.
At Heady we build dedicated teams and tailor them to align closely with our clients’ internal cultures and workflows, ensuring that together our efforts create the best digital products possible.
Heady was a great partner to work with, top to bottom. The team treated the work as though they were a part of our company — our success was their success.”
Bryan Samolinski
Senior Manager of Development, Crate & Barrel
Product Design
When it came to design, our multidisciplinary design team truly operated like an in-house team for CBH.
With the creative direction for both apps already in place and core screens already designed, the Heady team played a hyper-collaborative supporting role to ensure the shared SDK approach could be successfully executed.
Design System
A crucial component of our strategy for more quickly building two distinct yet functionally similar mobile apps was the implementation of Design Systems.
What is a design system? Learn more about how they eliminate redundancy and streamline workflows.
Learn MoreWe reverse-engineered a Design System for the Crate & Barrel app by refining an existing but incomplete system, incorporating both new designs and elements from the existing app. Initially, the focus was on building the CB2 Design System, starting by adapting the preliminary Crate & Barrel Design System. We first cleaned up and completed the Crate & Barrel system, establishing foundational elements like text and color styles, and then applied these to create the CB2 system. This approach not only streamlined the design process but also ensured consistency and minimized complexity for the engineering team.
CBH tapped Heady to take the lead on this initiative due to our Design System expertise. Our collaboration involved closely working with CBH’s design team, ensuring alignment with each brand's unique attributes and design guidelines. We didn't introduce new design rules but enhanced the cohesiveness of existing ones, allowing the mobile apps to integrate seamlessly with the overall brand identity. This collaboration exemplifies our ability to work with an iconic brand's existing guidelines and evolve them to create designs for new channels and platforms.
Built and delivered in Figma, with extensive Notion documentation for ease of use, both Design Systems now serve as dynamic resources for CBH. Our handoff process included a comprehensive two-hour workshop designed to familiarize the CBH design team with the system’s functionality. This training session was crucial for empowering them to effectively navigate and utilize the design system and its components, ensuring they could maintain and evolve them moving forward.
Design Specializations
Iconography
Icons serve as key navigational tools within both the Crate & Barrel and CB2 apps, allowing users to easily and instantly access their account or navigate to the registry. For both apps, we set up distinctive icon sets that captured the unique essence of each brand. Icons were surgically cleaned up by our design team, ensuring they adhere to Apple's HIG and reflecting the meticulous attention to detail needed to create a premium shopping experience.
Design QA
Our extensive design QA process was pivotal in maintaining brand standards across every screen of both apps. Initially starting with Crate & Barrel, we moved to CB2, and then circled back to refine the Crate design file, ensuring all shared components were utilized and the design system was complete. This iterative approach allowed us to effectively "flip a switch," translating the Crate & Barrel app build into the CB2 app with precise branding adjustments. During this process, we meticulously compared app screens against our Figma designs, correcting any discrepancies in alignment, color, or spacing to ensure a consistent and accurate brand experience across the platforms.
Development
Backend & Frontend POV
When it came time to build the Crate & Barrel and CB2 apps, we embarked on a focused effort to seamlessly merge backend functionalities with a more intuitive frontend experience.
BFF (Backend for Frontend)
To facilitate this we developed a middleware solution, termed BFF (backend for frontend), to translate and organize the client’s backend APIs effectively. This middleware was instrumental for both apps, ensuring efficient data utilization with minimal updates needed for brand-specific adjustments.
Frontend
On the frontend, our objective was to address and rectify the limitations of the existing Crate app including lack of modularity, code duplication, and architectural inconsistencies. Our solution: segmenting the apps into smaller, functional modules through an SDK. This strategy not only enhanced flexibility and modularity but also enabled us to launch multiple brands more swiftly.
Technical Challenges
The evolution of the Crate platform was guided by a vision to not only refine the digital experiences of Crate & Barrel and CB2, but also to lay a robust foundation for future brand integrations through our custom SDK approach.
A key part of realizing this vision was developing a versatile e-commerce ecosystem, dubbed BrowsePath, that encompasses browsing, searching, and shopping functionalities, alongside customizable furniture orders and personalized favorite lists. Meanwhile, the RegistryPath feature was designed to cater to gift registry needs for events like weddings, baby showers, and beyond, enhancing user engagement and satisfaction.
Bringing this to life meant navigating plenty of backend hurdles, particularly when it came to data integration from Crate’s legacy and modern data systems. The frontend faced its own set of challenges, with the need for a modular architecture to reduce redundancy and promote maintainability without sacrificing user experience.
Technical Solutions
In developing the mobile apps for Crate & Barrel and CB2, our approach was guided by the Backend for Frontend (BFF) strategy, which tailors server-side components to the unique needs of each client application. This allowed us to create optimized, user-specific APIs that enhance user experience by improving load times and ensuring data relevance.
Complementing this strategy, we integrated Malible, our proprietary SaaS platform that combines a headless CMS with robust tools to simplify the management of mobile apps and other frontend applications. By using a headless CMS, we could separate content storage from its presentation, allowing for greater flexibility across different platforms. This system worked in tandem with our SDK to customize the look and feel of the Crate & Barrel and CB2 apps according to their unique brand identities, reducing development efforts while creating a more cohesive user experience across both apps.
Other key solutions included:
Augmented Reality (AR) Functionality
Modular Frameworks for Browse & Registry Flows
Enhanced Custom Fabric Options
+ Addressed the challenge of presenting a wide range of product options in a user-friendly manner for customizable products with extensive fabric choices.
+ Implemented a system for seamless loading and real-time visualization of options, enabling customers to easily preview and select their preferences.
Security Measures
+ To protect the apps and their users, we implemented advanced security measures including Bot Protection with Imperva, safeguarding against unauthorized access and attacks.
+ Strengthened API interactions with API Key and access token-based authentication, ensuring a secure and private user experience.
Tech Stack
Our team harnessed the latest iOS technologies to ensure high performance and flexibility. This focused technology stack enabled us to deliver highly responsive and adaptable mobile apps for Crate & Barrel and CB2.
SwiftUI & Combine
Adopted for advanced data handling and dynamic UIs, marking a significant leap in our development approach by fostering efficient, responsive app designs.
Swift Packages
Chosen over Cocoapods for integrating third-party dependencies, this move streamlined our development process and allowed us to keep our code as in-house as possible.
Apple Foundation APIs
Heavily utilized to meet the client's preference for in-house development, allowing for customized feature development and greater control over app capabilities.
QA & Testing
Ensuring the reliability and performance of the Crate & Barrel and CB2 mobile apps was paramount to the project’s success.
Backend Testing
Utilized Playwright for API test cases, ensuring backend integrity
Frontend Testing
Employed XCTests for UI testing on the mobile platform, verifying user interface quality
Solutions & Features
Each sporting a unique look and feel true to their respective brands, the new-and-improved Crate & Barrel app and first-ever CB2 app share a multitude of features that enhance the user experience:
Filter & Sort
Universal Registry Management
Quick Actions on Product Listing Pages
Improved Barcode Search
Enhanced Product Description Pages
Results & KPIs
Launched in January 2024, Crate & Barrel Holdings now has a pair of top-rated e-commerce apps for its Crate & Barrel and CB2 brands.
CB2 customers can now shop their favorite home decor brand via mobile app for the first time, while loyal Crate & Barrel customers enjoy an upgraded shopping experience. Each app reflects the distinctive look of its respective brand while sharing common functionalities, such as allowing users to see items within their space using augmented reality and to create a universal gift registry with items from both brands.
Total downloads for both apps are significantly higher than we planned. Feedback captured from users has been overwhelmingly positive.”
Bryan Samolinski
Senior Manager of Development, Crate & Barrel
We’re proud to share that just three months after launch, the Crate & Barrel app won a 2024 Webby Award in the Apps & Software - Shopping & Retail category. ↓
Crate&Barrel
🚀
Post-Launch & Beyond
Throughout the project, our team sought to ensure we set CBH up for continued success after the Crate & Barrel and CB2 apps launched successfully and our engagement came to an end.
During the QA and user acceptance testing phases, we prioritized actionable feedback that would guide future launches and organized their product roadmap into high-priority fixes for the short-term and lower-priority issues for the long-term. This proactive approach ensured a smooth transition post-engagement, enabling their internal teams to effectively manage and iterate on the apps going forward.
Building on the trust and rapport established during this project, we've embarked on another exciting venture with CBH, aiming to further enhance operational efficiencies and strengthen the customer-brand relationship by leveraging native iOS apps. This ongoing collaboration underscores our commitment to long-term partnerships, supporting our clients’ success well beyond the initial launch.
