Designing a fast, user-friendly eCommerce experience in the low-voltage supplies space.

TrueCABLE case study image

Retail/eCommerce

In the summer of 2021, Codal partnered with trueCABLE to help disrupt and innovate the low-voltage supplies industry—or, more specifically, make the experience of purchasing low-voltage products faster, easier, and more valuable via eCommerce. 

The Project

Establishing a powerful online presence was essential for trueCABLE’s success in the competitive, old-school industry of low-voltage supplies. With many of its competitors still relying on the traditional brick-and-mortar shopping experience, trueCABLE saw an opportunity to gain a competitive advantage in the market and better connect with its target audience. Naturally, the business started selling products on Amazon and launched its online store using Shopify Plus. 

After some time, it became evident that trueCABLE’s direct-to-consumer (DTC) eCommerce website wasn’t providing enough value to its customers. Sales, conversions, and general user engagement metrics were all underperforming. And with a relatively small team, trueCABLE didn’t have the time, manpower, or technical expertise necessary to enhance its online customer experience. Enter Codal. 

When the trueCABLE team came to us in the summer of 2021, they presented a list of web design and development needs, which included: 

- A mobile-friendly website
- Streamlined user navigation
- Increased site speed
- Updated homepage and product collection pages
- Advanced product search capabilities 
- A rewards and referral program for customers 

As an award-winning UX design agency with over a decade of experience building and optimizing eCommerce sites, Codal was a perfect fit for the job. Our team had the technical wisdom, skills, and bandwidth to not only deliver on trueCABLE’s initial list of requirements but also provide a multitude of other UX improvements. 

The Challenge

In our initial Discovery stage, the Codal team interviewed trueCABLE’s stakeholders, performed a UX audit of the site, conducted in-depth market research, and analyzed historical business data. With the information gathered from these exercises, we created a roadmap to success—and were ready to start designing, engineering, testing, and deploying new UX features and functionality for the trueCABLE site.  

This would involve leveraging many of the tools and capabilities available on Shopify Plus. As a Shopify partner, Codal has utilized the platform to build and optimize many eCommerce sites. Our developers have ample experience integrating the Shopify Plus platform with proprietary software and third-party plugins—from ERP systems, to inventory management solutions, to email marketing tools, and everything in between.   

Discovery

Our most pertinent goal was to increase trueCABLE’s eCommerce conversion rate from 0.82% to at least 2.5%—the industry standard. We also needed to design a superior customer experience to meet the expectations of the brand’s two main target audiences—commercial buyers and DIYers. 

The commercial buyer persona represents professional low-voltage contractors—hired to plan and execute cabling, wiring, and networking projects for homes, businesses, and so on. These customers are technical in nature and are mostly focused on purchasing high-quality, low-cost products in high volumes—as this contributes to stronger project results, higher margins, and more work for their business. 

To incentivize commercial buyers, we needed to redesign the site to emphasize the quality of trueCABLE’s products. We also needed to create a fast, simple, and transparent process for purchasing items in bulk at a discounted price. 

The DIYer—or jack-of-all-trades—persona represents property owners looking to install ethernet cables, connectors, jacks, and couplers, without the help of a professional service provider. Unlike commercial buyers, these customers are not technical and often need help learning how to complete certain projects. 

The idea here was to redesign the site so that it—as the old adage goes—not only gives the customer a fishing pole but teaches them how to fish. We wanted the experience of browsing the trueCABLE site to be the virtual equivalent of browsing your local hardware store—where all the necessary supplies are there, as well as direct access to insights and recommendations from low-voltage experts. This would involve revamping trueCABLE’s “Cable Academy”—a section of the site where users can find helpful content on a wide range of topics, from cable management, to fiber optics, to link aggregation.

Development

Codal’s UX redesign initiatives have created a faster, simpler, and more impactful shopping experience for trueCABLE’s customers. And our collaboration continues to yield positive results. 

Codal meets with the trueCABLE team once a week to discuss current website developments, address any UX maintenance issues, and come up with additional strategies to improve customer engagement and sales. We’re also in the process of building a new online store that will operate under the trueCABLE brand. 

We’re incredibly proud of the work our team has done with trueCABLE, and are excited to help them continue to shake things up in the low-voltage supplies space. 

The Result

User-Friendly eCommerce Experience Case Study | trueCABLE

Shopify Logo

Shopify

trueCABLE

Architecting a Hub & Spoke model for a family of aftermarket automotive brands

APG Case study

Automotive

To accelerate growth for Aftermarket Performance Group (APG) and its family of aftermarket car parts brands, Codal re-architected the business’ entire ecosystem with a headless approach. After establishing a “Hub & Spoke” model for managing each brand’s DTC website, our team implemented innovative custom and third-party solutions to streamline operations for 14 companies selling thousands of products. We also refreshed the UX/UI with advanced site search functionality to achieve a faster, simpler, and more consistent buyer journey across storefronts—and we did all of this in just three months. 

APG needed a unified technology stack to manage the eCommerce experience for its growing team of aftermarket performance parts companies. 

Each online store was powered by a separate eCommerce platform and managed by an isolated team—creating significant inefficiencies across the network, and an opportunity to streamline operations with a headless approach.

On the front end, these DTC storefronts needed a more engaging and consistent user experience (UX)—complete with advanced on-site search functionality—to increase conversions, retain more customers, and maintain their competitive edge in the aftermarket car parts space. 

Codal’s partnership with APG started in April of 2023. Our team interviewed employees from customer service, fulfillment, marketing, product development, and other departments to fully understand and prioritize their legacy system’s chief pain points and opportunities for improvement. We analyzed the business’ entire ecosystem, looking at the wide range of third-party solutions being leveraged across APG’s family of brands, and began imagining a more cost-effective approach. 

Each online store was powered by a separate eCommerce platform, which was costing the business a fortune in licensing fees. Each company under the APG umbrella was relying on disparate tools and processes for managing and tracking their website content, email marketing, and merchandising—resulting in even greater costs and inefficiencies across the board.

From a UX perspective, APG needed more advanced on-site search functionality to help reduce friction and boost conversions. With a customer base made up of auto shop owners, dealers, and enthusiasts, the UX design must enable users to search for specific parts, based on the year, make, and model (YMM) of their vehicle—this being the most efficient and preferred method for the average aftermarket car parts buyer. APG has a wide-ranging inventory with thousands of SKUs—so without the ability to narrow down search results by entering their car’s YMM, customers must spend an arduous amount of time navigating through product listing pages to find the part they’re looking for. 

Codal migrated APG from its legacy system of disparate technologies to a single eCommerce platform, Shopify Plus. Our team implemented a headless architecture, which decouples the front-end presentation layer from its back-end functionality, providing more business flexibility and control over the customer experience. 

With this approach, APG can get new online stores up and running quickly, experiment with different design layouts and content, as well as update and replace third-party solutions for content management, payments, shipping and so on—without having to overhaul the entire system. The API-driven and composable nature of headless commerce will play an increasingly important role as APG acquires more companies, integrates new cutting-edge technologies, and adapts to future industry trends and customer expectations. 

When APG is ready to introduce a new brand, they can simply add a new spoke onto the hub—and that new storefront will already have all of the core features and functionality it needs to operate effectively, with no additional coding required. On top of this core functionality, each company is free to deploy its own unique branding, products, content, and other UI elements—without affecting any of the other sites. 

To achieve a more consistent, intuitive, and engaging customer journey across each brand, APG needed a fresh UX design framework, based on the goals and expectations of its average DTC website user. Here, the main focus was highlighting and optimizing the search feature on each site, so that users could easily enter their YMM, apply other relevant filters, find their vehicle part, add the item to their cart, and check out in just a few clicks. Given the complexity of this UX requirement, our team built a custom search feature from scratch that receives the search query, scans a database of 150,000 SKUs, then displays the right products to the user. 

In just three months, Codal migrated APG to a headless architecture powered by Shopify Plus, developed a scalable Hub & Spoke model for managing core functionality across 14 eCommerce stores, enhanced the customer experience with superior on-site search functionality, and leveraged Bloomreach to translate user data into actionable insights and personalized content. 

These transformations have helped APG lower operational costs, increase customer engagement, and speed up deployment times for new storefronts, products, and features. Post launch, our team is working to further develop the UX/UI and drive conversions for additional storefronts in APG’s network.

Having equipped the business with solutions that enable long-term growth and success, we’re excited to continue fostering innovation for APG, as they continue to dominate the aftermarket automotive industry.

To accelerate growth for APG and its family of aftermarket car parts brands, Codal re-architected the business’ entire ecosystem with a headless approach. Read the full case study here.

Unified Brand Experience for a Network of Automotive Brands Case Study | APG

Bloomreach

yotpo

Yotpo 2023

Streamlining data exchanges and collaborations between insurers and law firms to help reduce costs, drive efficiency, and improve claim outcomes

ClaimDeck hero image

Legal

To help insurance carriers and law firms process insurance claims more efficiently, ClaimDeck aspired to build a litigation management platform that could streamline collaboration between parties, automate workflows, and present data in an intuitive, non-traditional way. Enter Codal. Our team built the platform from scratch, providing elegant UX/UI design, cutting-edge functionality, and a solid data infrastructure that enables limitless possibilities with AI and ML. 

There are many legal communications, documents, and tasks involved in the processing of insurance claims, which are traditionally handled by isolated parties and technologies. When an insurance company recruits a law firm to help resolve one of their claims, the claim adjuster works with the lawyer to achieve the best possible outcome. However, this work is often hampered by disparate communication channels, redundant workflows, incomplete data, and accidental noncompliance with ever-changing industry standards. 

As a result, insurers experience two key issues:

- Claims leakage: This refers to the amount of unnecessary expenditures due to a claim’s process errors and inefficiencies. 
- Unstructured data: When data is siloed across multiple sources, stored in its native format, and doesn’t follow a conventional data model, it becomes increasingly difficult for a growing organization to manage, activate, and share that data.

Insurtech companies have tried addressing these issues in the past, delivering clunky software products to a user base of legal professionals who are anything but tech savvy. ClaimDeck envisioned a new kind of litigation management platform—one that’s as visually appealing and user-friendly as an Apple product—to help users resolve claims more effectively. 

ClaimDeck teamed up with Codal to turn this vision into a reality and go to market fast. Our challenge was to strategize, design, develop, test, and launch this game-changing litigation management platform in just a few months. 

Codal spent weeks learning the ins and outs of claim litigation, conducting research and interviewing stakeholders to nail down project requirements, from the new platform’s overall look and feel to necessary features and functionality. 

We identified two key user types:

Claim adjusters: Individuals hired by the plaintiff’s insurance company to investigate and handle the claim.
Lawyers: Individuals hired by the insurance company to represent the plaintiff and work through the legal proceedings, under the claim adjuster’s oversight. 

The design of the platform needed to convey trust, transparency, security, and accountability. After all, ClaimDeck users would be managing legal documents with sensitive information on the platform. It also needed to stick out among other claim litigation platforms, which typically display data in standard, uninspiring tables—making it difficult for users to tell the story they really want to tell. 

By the end of Discovery, we had outlined a roadmap to success with key deliverables and milestones, and were ready to start building a litigation management platform that:

Makes it easy to assign tasks and check the status of insurance claims; centralizes data from multiple sources into a single location; visualizes that data with customizable charts and graphs for actionable insights; streamlines the auditing process by providing a full and detailed history of activities; allows claim adjusters and lawyers to chat directly on the platform; and stores clean, well-structured data to support AI and ML capabilities down the line.

Codal built a Claim Overview page, where users can find all details relevant to any specific claim, including synopsis, tasks, requests, budgets, settlement negotiations, legal documents, and more. 

To help move claims from one stage to the next, our team built functionality that enables users to create tasks for other users attached to their claim. Lawyers assign tasks to claim adjusters to complete activities that require budget approval, such as authorizing a proposal for a settlement negotiation, confirming whether something is covered by the plaintiff’s insurance policy, hiring an expert witness, and other legal actions. When these tasks show up in their queue, the claim adjuster can either approve or deny the request.  

For greater transparency and compliance, we designed an Activity History page that shows all tasks, requests, and modifications within a claim. Users can see when a task was assigned and completed, and when the name, number, or synopsis of a claim was changed—along with all previous versions of the claim data. With so many moving parts associated with a single claim, scrolling through a long list of activities would be tedious—so we implemented advanced search and filtering capabilities that narrow down the data. 

To help manage each claim’s budget, we designed a page that automatically calculates the cost of certain activities, based on the amount of working hours needed from partners, assistant attorneys, and legal assistants. The cost of these activities is added up and presented as a total budget, requiring no manual calculations from the user. 

Finally, we implemented a messenger feature to improve communication between claim adjusters and lawyers. By enabling both parties to chat directly on the platform, this user-friendly tool eliminates the need for back-and-forth emails and phone calls. Also, similar to the Activity History feature discussed above, all communications from the messenger tool are captured for the sake of auditing. 

Codal operated multiple work streams in parallel to meet ClaimDeck’s desired launch date. In just a few months, we built a best-in-breed litigation management platform that is: 

Easy for insurance companies and law firms to implement in hours, rather than months; seamlessly integrable with other technologies, due to its open API infrastructure; able to ensure data integrity by automatically capturing and maintaining over 1400 data points per claim; continuously improving, with new features and updates released every two weeks cloud native, hosted on AWS; and secure, with an SOC 2 certification.

The ClaimDeck platform centralizes and automates claim management with a slick UX/UI that legal professionals trust. By reducing manual workflows, enabling direct communication between parties, and converting massive amounts of data into actionable insights, ClaimDeck is helping insurers and lawyers around the world become more efficient and analytics driven.

Codal is now helping ClaimDeck utilize all the data that’s been collected since launching the platform to develop advanced AI and ML capabilities. With little to no human intervention, users will be able to:

Accurately predict the health and outcome of a claim; calculate compliance scores for individual claims; ensure data accuracy and completeness; receive assistance from chatbots in reviewing, analyzing, and summarizing documents; predict budgets, valuations, and workloads to anticipate settlement valuations—prior to investing unnecessary time and effort; and seamlessly migrate data to and from other claim management systems like Duckcreek and Guidewire. 

Looking ahead, we’re excited to continue working with ClaimDeck to drive innovation at the intersection of insurance and legal.  

Read how Codal built a cutting-edge litigation management platform for ClaimDeck which streamlines the processing of insurance claims by automating legal workflows, visualizing insightful data, and improving communication between insurers and lawyers.

Streamlined Litigation Management Platform Case Study | ClaimDeck

ClaimDeck

Building a user-friendly, compliant DTC eCommerce website for gifting alcohol products

Cocktail Courier Case Study Image

In June of 2021, Cocktail Courier came to Codal in need of an eCommerce transformation. The company needed a fast, engaging online shopping experience, as well as an efficient, compliant system for fulfilling large group orders and splitting payments between vendors. And in May of 2022, our team—in collaboration with BigCommerce and several other partners—delivered just that. 

From Old Fashioneds, to Pineapple Fizzes, to Triple Spice Margaritas, Cocktail Courier’s team of mixologists create a wide range of seasonal cocktail recipes that make great gifts, whether it be for several friends, or hundreds of clients around the country. However, due to strict industry regulations, selling alcohol online comes with many issues and complexities, especially when fulfilling orders for a large number of recipients across multiple state lines. 

Cocktail Courier’s main challenge was overcoming these regulations—which vary from state to state—while also facilitating a smooth online shopping experience, where customers can intuitively browse through a wide range of recipes, customize orders, ship multiple products to multiple recipients, and more.

The brand’s eCommerce website—powered by Magento at the time—required highly customizable features and functionality, including the ability for customers to ship to multiple recipients and locations under a single order. Also, the company needed help from a number of licensed third-party order fulfillment vendors around the country to deliver products quickly and efficiently, while maintaining both federal and state compliance regarding DTC alcohol shipments. 

To make all of this a reality, Codal was tasked with reimagining Cocktail Courier’s entire technological infrastructure—which would ultimately lead to implementing a new eCommerce platform, payment processor, content management system (CMS), and order fulfillment flow.

We kicked this project off with a six-week-long Discovery process, analyzing the various tools and workflows Cocktail Courier relied on to power its eCommerce experience. Based on our findings, along with the company’s long-term goals and requirements, our team decided that migrating to a headless commerce architecture would be the best step forward. 

Headless commerce involves decoupling an online store’s front-end presentation layer from its back-end eCommerce functionality. In comparison to traditional eCommerce systems with a monolithic tech stack, headless offers greater control when customizing UX and UI elements, since front-end updates don’t create additional work for back-end developers—and vice versa. 

Codal integrated three key technologies to support Cocktail Courier’s innovative cocktail-kit-purchasing experience: BigCommerce, Stripe, and Shipstation. Let’s take a look at how each of these solutions fit into the bigger picture. 

We migrated Cocktail Courier to BigCommerce—one of the top eCommerce platforms in the industry today, and a Codal partner that’s played an instrumental role in many of our projects over the years. With a robust API infrastructure, BigCommerce supports headless solutions and integrates seamlessly with a wide range of third-party applications. 

As mentioned, the laws and regulations around alcohol distribution are strict and vary depending on the territory. To work around this, the company recruited dozens of third-party order fulfillment vendors across the country—so kits being delivered to Los Angeles are handled by one licensed vendor, while those being delivered to Chicago are handled by another. 

The company’s master Shipstation account is connected to the accounts of its fulfillment partners—and admins can set up automation rules based on specific order criteria, like what the product’s SKU number is, where it’s being shipped to, whether it contains alcohol or not, and so on. When an order gets placed on the Cocktail Courier site, Shipstation automatically routes all the order details to the correct vendor. 

When an order is fulfilled, Stripe automatically pays the third-party vendor, and the captured payment is sent to the Vendor Report—a custom dashboard that Codal built to manage split payments between Cocktail Courier and its order fulfillment companies. 

With a simple, user-friendly layout, the Vendor Report automatically calculates and displays the total cost of each order, how much is owed to Cocktail Courier, and the net amount owed to the vendor. This makes it easy for admins to generate invoices and receive payments on each order—all while remaining compliant with federal and state regulations. 

Cocktail Courier’s new eCommerce infrastructure supports a fast, responsive, and fun customer experience that’s currently shaking up the alcohol industry. 

With the ability to purchase a wide variety of creative cocktail kits for up to 500 recipients at once, customers can use this website to serve all kinds of personal and professional occasions—from birthdays, to holidays, to anniversaries, and everything in between. What’s more, the Cocktail Courier team can fulfill these orders effectively, while also maintaining industry compliance, streamlined workflows, and high business scalability. 

Supported by BigCommerce and other key technology partners, Codal continues to collaborate with Cocktail Courier, optimizing the brand’s eCommerce experience via cutting-edge UX and UI design. We’re incredibly proud of the groundbreaking solutions our team has launched so far, and are looking forward to serving up more awesome work soon!

Read how Codal built Cocktail Courier a fast, engaging online shopping experience, as well as an efficient, compliant system for fulfilling large group orders and splitting payments between vendors.

Compliant DTC Website Case Study | Cocktail Courier

BigCommerce-logomark-whitebg

BigCommerce

ShipStation

Avalara logo

Avalara

stripe

Stripe Icon

Cocktail Courier

Modernizing vehicle maintenance management in the car rental space

Hertz Case Study Image

Hertz’s leadership team understands the importance of embracing digital transformation to streamline internal processes, increase scalability, and maintain the brand’s competitive edge in the car rental industry. And that’s why in the summer of 2021, Hertz came to Codal with a business challenge that needed an elegant digital solution. 

Vehicle maintenance is a crucial aspect of any rental car company’s operations. To ensure a successful customer experience and minimize vehicle downtime, Hertz requires an advanced system for requesting and tracking routine and off-cycle maintenance—such as tune-ups, oil changes, tire rotations, brake pad replacements, and so on. 

Hertz local edition (HLE) locations—or off-airport, neighborhood sites—outsource their vehicle maintenance to various third-party service providers, such as Firestone. These vendors use a software called Auto Integrate, which allows maintenance managers to receive, approve, and assign repair orders from vehicle suppliers like Hertz. 

For years, Hertz used a third-party solution called Snapsheet to facilitate all US-based HLE maintenance projects. But this software was never designed for Hertz or fleet maintenance in general. Rather, Snapsheet is a solution for managing and tracking insurance claims. 

Therefore, relying on this platform resulted in expensive licensing fees and inefficient workflows. Also, any platform customization requests from Hertz to the Snapsheet software development team were either unfeasible or delivered too slowly. 

Hertz partnered with Codal to replace Snapsheet with a faster, smarter, and more cost effective internal solution—custom-designed to meet the business’ unique goals and requirements. This would soon become known as the Hertz Maintenance Portal.   


Codal and Hertz kicked off the project with a two-day session at Codal’s headquarters in Chicago. 

We started by diving deep into the Snapsheet platform, walking through current business processes, user pain points, and considerations for the new solution—based on Hertz’s goals for the fiscal year. We also performed stakeholder interviews, data analysis, and general market research to help guide our strategy.   

After the initial Discovery, we put together a list of objectives that the new solution needed to accomplish, then divided those into phases—with the highest-priority objectives to be tackled first. These included: 

Migrating data off of Snapsheet without disrupting any live business activities; Taking advantage of quick-win opportunities to simplify tasks via new technologies and UX redesign; Improving conformance of Delivery Service Providers (DSPs) to preventative maintenance requirements and best practices; Enhancing management visibility into micro- and macro-level maintenance information; Streamlining and centralizing vendor communication; Building reports to provide visibility into field staff performance and fleet statistics.

Next, we documented requirements for the entire product roadmap into a detailed feature list, assigned features to phases based on the identified objectives, and performed a MoSCoW analysis to determine which features should be prioritized for the initial launch. 

The platform had to give both desktop and mobile users the ability to: 

Create a Vehicle Maintenance Request (VMR) ticket by selecting a specific ticket type, vehicle, and location—as well as scan the vehicle barcode, upload a photo of the odometer, and enter the mileage; Access vehicle profiles to view details, history, photos, last known location, and repair status; Search for vehicles via advanced filtering options, such as license plate, VIN, rental agreement number, last known mileage, and the year, make, model, and color; Access maintenance tickets to view and download VMR status, vehicle information, ticket details, comments, and invoices; Establish roles and permissions for both internal and external platform users—and search for those users; Work through a ticket by updating its status, assigning users, adding comments, editing details, uploading invoices, adding a PO number, and canceling or reopening the ticket.

After many team meetings, design sprints, demo sessions, and tests, we successfully launched the Hertz Maintenance Portal. 

This cloud-based application can be accessed through a desktop or Hertz-managed phone, so employees can quickly and easily request, track, and manage vehicle maintenance from home, at the office, or out in the field. Integrated with Auto Integrate and other third-party solutions, the platform allows users to smoothly communicate with vendors and centralize important information.  

Built with cutting-edge, data-driven technology, this internal tool is helping Hertz increase burn-down rate on maintenance work, reduce vehicle downtime, streamline employee workflows, save money, and improve the customer experience. 

Codal continues to work with Hertz on making updates and adding new features to the platform to ensure long-term success and scalability. We’re proud to partner with industry leaders like Hertz, and are excited to see what the future holds!

In the summer of 2021, Hertz came to Codal with a business challenge that needed an elegant digital solution. 

Vehicle Maintenance Management in the Car Rental Space | Codal

Node JS logo

Node JS

Microsoft Azure

React

Oracle

Auto Integrate

Hertz

Launching a headless eCommerce solution to achieve brand unity in the home appliances space

Cosori Case Study Image

As part of a new rebranding strategy, Cosori needed to improve its eCommerce presence and unify all of its brands into a single tech stack. To enable a seamless online shopping experience for Cosori and its partner brands’ products, Codal migrated the business from a traditional, monolithic eCommerce platform to a more flexible and scalable headless architecture. 

Cosori came to Codal in need of an eCommerce transformation. 

To boost customer engagement, conversions, and sales, Cosori—along with its subsidiary brands, Levoit and Etekcity—required a more modern UX and UI design for its DTC online store. And rather than presenting each brand as three separate entities, Cosori, Levoit, and Etekcity were to be unified via a consistent look and feel across each website. 

Internally, the business needed a streamlined system for managing, updating, and tracking the performance of each site, so that they could scale and expand to new markets more efficiently. 

With many years of experience designing, developing, testing, launching, and maintaining international online stores, Codal was the perfect partner to help Cosori modernize its front- and back-end eCommerce systems, and equip its three brands for long-term success in the highly-competitive home appliances market. 

Codal began with a multi-week Discovery process, where we learned the ins and outs of Cosori, Levoit, and Etekcity. This required gaining a thorough understanding of each brand’s various customer personas, direct and in-direct competitors, and surrounding market. 

We also dove deep into the underlying technological infrastructure, analyzing the tools and processes that were powering each storefront. Right away, we discovered bottlenecks in the system that were inhibiting an efficient deployment of new site pages and content. 

In addition to establishing an intelligent, unified shopping and checkout experience across each of the three storefronts, each brand needed the ability to add specific content, features, and functionality—based on the unique wants and needs of their customers. 

However, Cosori’s monolithic eCommerce architecture made it nearly impossible to update the front-end experience, without requiring significant coding work from back-end developers. This led to overly complex workflows, followed by slow deployment times, and ultimately ineffective eCommerce sales and marketing efforts on the front end. 

Codal’s solution to this problem was migrating Cosori to a headless approach, which meant decoupling the front and back end, so that each site could be managed and scaled independently, while remaining connected to a single eCommerce engine. With headless, the front- and back-end services of an online store—or in this case, multiple online stores—are not contained within a single code base, and instead communicate with each other via APIs. 

As a result, the customer experiences for Cosori, Levoit, and Etekcity could be customized—based on their own sales and marketing initiatives—in the fastest and most efficient way possible. This would become an invaluable transformation as the brands adopted new digital channels, expanded to new territories, and leveraged new site features and functionality. 

After reaching the conclusion that adopting a headless architecture was the right step forward, the Codal team got to work. 

First, we needed to migrate Cosori and its subsidiary brands to a more robust eCommerce platform—one that supports headless solutions. Shopify Plus—a leading technology provider in the eCommerce space, and one of Codal’s trusted partners—was the best fit, given its intelligent core functionality and diverse set of plug-ins and widgets. 

Our team spent the next few weeks migrating Cosori’s data over to Shopify, and building out integrations between the platform and the business’ mission-critical applications. Among these integrations was a new content management system (CMS), Builder.io. 

After evaluating several headless CMSs, we decided to go with Builder.io, since it provides a fast and intuitive system for creating, deploying, and updating custom pages. Also, the CMS integrates seamlessly with Shopify Plus. 

Once we had established a more flexible, scalable eCommerce infrastructure, our team began optimizing specific elements of the Cosori, Levoit, and Etekcity storefronts—with the aim of creating a unified brand experience and increasing customer engagement, conversions, and sales. 

Codal worked closely with Cosori’s in-house design team to establish a set of branding guidelines to inform current and future site pages. Then, based on those guidelines, we designed an intuitive, responsive, and SEO-friendly UX and UI for each brand’s site—complete with streamlined navigation, advanced product search and filtering capabilities, superior product detail pages (PDPs), and a convenient checkout process. When designing and developing each of these site elements, our team relied on data from user behavior and competitive analysis, along with insights and feedback from Cosori’s stakeholders. 

Codal’s partnership with Cosori has enabled a cutting-edge eCommerce experience, supported by an intelligent ecosystem of modern tools and workflows. 

Through data-driven UX and UI design, this family of home appliance brands is equipped to succeed in the ever-evolving online selling space. And if Cosori decides to take on more subsidiaries in the future, they’ll be able to integrate seamlessly, given the business’ new headless architecture, as well as its updated branding guidelines and page templates. 

We’re incredibly proud of the eCommerce transformation that our team planned and executed for Cosori. Codal’s technical insights and solutions have helped the company elevate its digital presence, drive internal efficiencies, and sell more of its innovative home appliance products to customers around the world. 

Launching a cutting-edge headless eCommerce solution to achieve brand unity.

Headless eCommerce Case Study | Cosori

Builder.io Logo

Builder.io

Cosori

Connecting culinary buyers and sellers with an effortless shopping experience.

Orderve Hero

10,000+

Orderve needed a trusted partner to help build its cutting-edge culinary marketplace. With its internal team constructing the eCommerce backend, Orderve was seeking an agency to design and implement an innovative UX/UI. The goal was to ensure a sleek, contemporary edge and effortless navigation for all user types.

Founded in 2018, Orderve is an online marketplace dedicated to connecting culinary buyers and sellers. Chefs and restaurateurs seeking high-quality ingredients in bulk can purchase directly from sellers, with Orderve seamlessly handling the complex logistics. Its easy-to-use platform saves users time and effort, helping buyers to continue crafting excellent dishes and sellers to provide the superior ingredients that inspire them.

Intro

In order to connect culinary buyers and sellers in a convenient manner, and facilitate the sale of high-quality food products, Orderve needed an elegant and intelligent eCommerce site. With a unique, engaging visual identity, a strong UX, and a comprehensive set of features essential to the success of the site, Codal’s work was cut out for us.

Codal began by initiating an extensive discovery phase in collaboration with the Orderve team. This phase is much more than a simple project kickoff. Rather, it involves comprehensive research and iteration and seeks to lay the foundation for the project’s strategy and overall design. 

As part of this phase, Codal’s UI designers crafted a unique and engaging visual identity for Orderve. Working in close collaboration with the Orderve team, Codal designers determined key differentiating factors for the brand and used these factors to design and iterate on visual assets that would make the website eye-catching and aesthetically pleasing for users. Codal’s UI team created an extensive brand guide outlining the composition, as well as the look-and-feel of Orderve’s website. Featuring modern typography, a simple color palette, and imagery focused on quality food, the brand guide serves to create a seamless, clean visual identity for Orderve. After creating the brand guide, Codal’s UI designers implemented its provisions to create homepage concepts for Orderve’s website.

Meanwhile, the Codal UX team worked to determine a viable feature list for Orderve’s site to bring it to market in the fastest, most efficient way possible. Orderve provided the UX team with extensive market and UX research, which was combed through to determine the essential features, functionality, and layout that would make Orderve successful at launch. Working with Orderve stakeholders and the site’s eCommerce platform provider to identify priorities and capabilities, Codal assembled a feature list that would serve as the roadmap for building an elegant, intelligent website.

Strategy

Upon completing the discovery phase, Codal understood the unique value proposition of Orderve's service offerings to chefs, restaurateurs, and product sellers. It became clear that showcasing the integrity of a brand that is synonymous with success within the service industry was essential to the success of the project. With this in mind, the Codal team initiated the development phase.

Codal’s designers worked onsite in Orderve’s Chicago office. This established a great rapport with Orderve stakeholders, as Codal’s designers were very transparent about our process and deadlines. Orderve was able to see Codal’s progress in real-time. Together, Codal and Orderve reviewed designs and participated in collaborative workshops to solve some of the bigger challenges of the site, like implementing smart product categorization, creating the logic to manage transactions, and ideating on visual branding. This was not your typical client-agency relationship.

Design

Using a waterfall approach, the Codal UX team created wireframes for modules across desktop and mobile. These wireframes were then handed off to Codal’s UI designers to implement Orderve’s visual assets and create high-fidelity mockups. As each module was completed at both the wireframe and high-fidelity levels, Codal’s UX and UI designers reviewed the Orderve team and made iterations as necessary.

After launching the initial site, Codal worked to maintain and refine based on new requirements and new information about how users were interacting with Orderve. A number of fixes and enhancements were incorporated based on user research conducted by Codal and Orderve. The Codal team restructured the product detail pages (PDPs) to cater more to B2B users, revamping buy boxes, adjusting product measurement units, adjusting how shipping estimates are displayed, and more. Codal also revamped categorization as Orderve continued to add more and more products, creating smart intermediary category pages (ICPs) to help users easily navigate through 10,000+ products to find exactly what they are looking for.

See how Codal designed a marketplace that connects culinary buyers and sellers with an effortless shopping experience for Orderve.

Culinary Marketplace Design Case Study | Orderve

InVision logo

InVision

Orderve

Helping a historic brand find its footing in the modern eCommerce landscape.

Thermos Case Study Image

Thermos, a storied provider of insulated food and beverage containers, knew that it needed an eCommerce transformation to maintain its competitive edge in the industry. Together with its sister brand, Lifefactory, Thermos teamed up with Codal to plan and execute an eCommerce platform migration and UX redesign with a fast turnaround time. 

Both Thermos and Lifefactory were operating on a legacy version of the Magento eCommerce platform. To continue to grow and scale its operations, Thermos determined it was necessary to migrate to Shopify Plus, a leader in cloud-based, enterprise-level eCommerce solutions—and a long-term Codal partner. 

Thermos came to Codal with an ambitious task: Successfully migrate its eCommerce infrastructure from Magento to Shopify Plus in just eight weeks. We’re always up for a challenge, and working with a legendary brand on a tight timeline sounded right up our alley. Codal was proud to partner with Thermos to deliver a truly transformational eCommerce experience.

Codal began with an extensive Discovery process, aimed at fully understanding Thermos’ wants, needs, expectations, and desires from the Shopify Plus platform—as well as establishing an understanding of Codal’s approach to the migration process. 

After learning the ins and outs of Thermos’ existing business logic, workflows, and third-party vendors, Codal got to work. Our design and development team took the information gathered in Discovery to architect a Shopify Plus solution that not only aligned with Thermos’ long-term business goals, but also integrated seamlessly with its existing technology stack.

Codal’s UX designers revamped Thermos’ eCommerce storefront to reflect the brand’s history and values, while also creating an intuitive, streamlined customer experience. Our team worked closely with Thermos’ in-house designers, offering expertise on eCommerce best practices and the Shopify Plus platform itself. This helped to ensure that the business was seamlessly integrated into the new eCommerce platform, so that it could effectively make updates and customizations to the online shopping experience over time. 

Codal’s development team provided live workshops, where the Thermos team could watch our engineers code in real time and address any questions or concerns as they arose. Codal also assisted the business in bringing all of its order fulfillment capabilities and operations in-house, after separating from a costly, outdated third-party logistics system.

Thermos primarily competes in two different industries: sporting goods and home & garden. We gathered KPI averages for businesses in both sectors, then compared those averages to the data from Thermos’ revamped eCommerce website. Here are a few game-changing results that the brand has experienced since partnering with Codal:

- Daily sessions on the Thermos site are 1,360.29% greater than the sporting goods industry average, and 1,342% greater than the home & garden average.
- Sessions that result in a user adding items to their cart are 75.12% greater than the sporting goods industry average, and 58.68% greater than the home & garden average. 
- Sessions where a user makes it to checkout are 45.62% greater than the sporting goods industry average, and 41.06% greater than the home & garden average. 

In a very short timeframe, Codal helped Thermos launch a cutting-edge eCommerce presence with an optimized customer experience that’s built to scale. With its fulfillment capabilities now aligned with the versatile Shopify Plus platform, Thermos is poised to deliver superior customer experiences and offer its much-loved products to a new generation of consumers.

Codal continues to work with Thermos on enhancing its eCommerce presence via cutting-edge digital solutions. We couldn’t be more proud of what we’ve accomplished so far with Thermos and are looking forward to seeing what the future holds for this historic brand. 

See how Codal helped this historic brand find its footing in the modern eCommerce landscape.

Shopify Migration Case Study | Thermos

Thermos

Redesigning an internal compliance tool for a firm with 1.8 million clients

Charles Schwab Case Study Image

Financial Technology

SOC2

120+

separate screens streamlined to 7 templates

Looking to stay competitive in the rapidly digitizing financial sector, Charles Schwab enlisted Codal’s services to redesign one of its many internal web applications.

Charles Schwab needed to revamp its internal compliance solution, SchwabCT, with a user-focused, data-driven approach. 

Clients use the tool to automate highly manual, time-consuming tasks related to monitoring employee trading activity and to ultimately uphold their organization’s code of ethics. The legacy platform was slow and cumbersome, with over 550 separate screens for users to navigate through, creating workflow bottlenecks for both clients and Shwab employees.  

To gain a deeper understanding of Charles Schwab’s compliance solution and its users’ pain points, Codal kicked off the project with a rigorous Discovery phase. 

We analyzed the underlying technology to identify outdated software that could use modernization. And because our team prioritizes the end-user so heavily, we conducted a slew of user interviews and surveys, extending our scope from prospective clients to Schwab employees. 

From our technical audit, research, and interviews, Codal’s UX design team collected a wealth of both qualitative and quantitative data regarding the issues and opportunities of SchwabCT, then triaged them accordingly.

Through a series of design sprints, our team built prototypes for the platform’s new user experience. Then, diving deeper into UX research, Codal attended a national Charles Schwab compliance conference to demonstrate the early prototypes and collect feedback from real users of the web application. 

From this feedback, we were able to transform common user expectations and frustrations into strategic platform updates, while continuing to address the web application’s bedrock issues. We also learned about desired functionalities that were completely missing from the platform, which we then included in our next round of prototyping and testing. 

Codal transformed the outdated, complex technology into an extremely intuitive and aesthetically-pleasing web application. 

Once the project was finished, we had simplified SchwabCT by revamping the platform’s information architecture, consolidating over 550 separate screens into a mere 7 templates. This tool continues to help organizations grow by streamlining financial compliance via workflow automation and superior UX design. 

Explore Codal’s digital products and discover how Codal served Charles Schwab through data-driven, market-tested web application development.

Web Application Development Case Study | Charles Schwab

python

Python

angular

Angular

swift

Swift

kotlin

Kotlin

Charles Schwab

The Accreditation Council for Continuing Medical Education’s (ACCME) mission is to identify, develop, and promote rigorous national standards for quality medical education that improves physician performance and patient care.

ACCME Case Study Image

Healthcare

1,700+

1.5+

400,000

The Accreditation Council for Continuing Medical Education (ACCME) approached Codal to design and build its Learner Reporting System (LRS), a centralized hub where certification boards and course providers can manage and report their accreditations.

ACCME needed a central hub where medical certification boards could manage, track, and report various accreditations. The LRS would be an inherently complex platform with a wide range of user types, so our UX design team needed to ensure that the user experience was personalized, yet consistent, for all use cases.

Codal began by examining the LRS’ predecessor, a platform called PARS. Noting the pain points in its UX, our designers determined what areas needed an overhaul and which ones needed a simple refresh. 

Through heavy collaboration between ACCME stakeholders, our design team, and business analysts, a feature list for the first release was solidified. We crafted a new sitemap that reorganized the content of the site while accommodating new features and functionalities. 

Our team mapped out a three-phase plan to meet ACCME’s project requirements: 

1. Design several different platform interfaces to meet the specific needs and expectations of each user type. 
2. Tailor the platform’s layout to complement large amounts of data visualization. 
3. Engineer the platform’s front and back end utilizing the frameworks Angular and Django.

Due to the size and activity of the platform’s current user base, our UX designers modernized the look and feel of the preexisting site—so as not to alienate current users and potentially disrupt workflows.

After formulating a high-level design strategy, Codal began crafting barebones wireframes. 

One of the challenges of the previous platform was poor data visualization—tables had poor readability, content was difficult to find, and the search process was maddening. Our team remedied this flaw by not only introducing sorting and filtering functions, but also improved search results, restyled tables, and a feature that allows users to input data en masse. 

We also needed to tailor different iterations of the website to various user personas. ACCME’s learning system needed to serve administrators, medical board members, and course providers. And the user experience needed to be personalized, yet consistent across different user groups. 

By modernizing the existing aesthetic of PARS, Codal was able to imbue the updated platform with a familiarity that would resonate with all user types. Yet within that general look, Codal rearranged and reprioritized functions to match specific user needs and expectations.

The best efforts of our UX design team are in vain without a robust development process for translating designs into actionable, usable code. To buttress LRS’ retooled user journey, Codal’s engineers built out both the front and back end of the web platform. 

The front end was constructed in AngularJS, a framework that allows for simplified, agile development and testing. And the back end was built with Django, a Python framework that enables rapid development and reusability of code.

Codal was able to design, develop, test, and launch a highly complex and cutting-edge platform in just six months. 

ACCME’s LRS currently houses around 1,700 accredited organizations, 1.5 million credits, and 400,000 completion records. And thanks to Codal, administrators, medical board members, and course providers can access and report this data through a fast, intuitive, and personalized user experience.

ACCME approached Codal to design and build a centralized hub where certification boards & course providers manage & report their accreditations.

Education Hub Development Case Study | ACCME

Django logo

Django

ACCME

Empowering young women through an advisorship portal with a revamped UX

Builtbygirls Case Study Image

Non-profit

4,950

11,000+

To support the BUILT BY GIRLS mission of helping young women succeed in STEM fields, Codal delivered an upgraded user experience for the organization’s online portal, with improved onboarding and a robust algorithm that better connects advisors and advisees.

BBG’s native online portal, WAVE, is a one-stop shop for new members to get onboarded, build their profile, match with an advisor or advisee, schedule meeting times, and receive prompts and conversation topics for their sessions together. But despite its multipurpose utility, WAVE suffered from a poor user experience, with clunky page design and complex navigation. 

Codal crafted a three-pronged strategy to give BBG’s native portal the upgrade it sorely needed: 

1. Alleviate the UX problems plaguing WAVE with a quick turnaround time by triaging features and functionalities to be added for an initial release.
2. Create a new algorithm that matches advisors and advisees with better accuracy, using a manifold of factors at varying weights and priorities. 
3. Revisit the UX and retest for a second, more in-depth release.

Codal’s partnership with BBG was inaugurated with a week-long, in-person Discovery session—where stakeholders, designers, and other relevant parties collaborated to identify pain points, workshop new ideas, and begin outlining a roadmap to success. 

In addition to addressing which UX flaws needed to be addressed first, our Discovery phase focused on how to create, manage, and display content that’s personalized to individual WAVE sessions. 

It was imperative the new platform’s initial release was designed, developed, tested, and launched within six months.

To begin, Codal’s UX researchers mined BBG’s existing feedback for actionable data on what users liked and didn’t like about the current version of WAVE. By synthesizing this data from previous feedback, our team was able to circumvent more time-consuming research methods while still tapping into user expectations. 

The research collected in this phase informed retooled user flows in the following stage of our design process. Focusing on the mechanics of scheduling and facilitating sessions between advisors and advisees, Codal reimagined WAVE’s form-filling mechanism, as well as how session prompts were provided to users. By leveraging a card-based interface and taking design cues from a “wizard-style” data input, our team streamlined the flow of two major user tasks in WAVE.

The core of the WAVE platform remains the matching function, a system that pairs compatible advisors and advisees. To revamp this highly technical, complex pillar of WAVE, Codal constructed a decision engine that combines user-inputted criteria with machine learning to more accurately match users. 

In addition to the technical centerpiece of the web app, Codal also developed a timezone-adaptive scheduling system and a content topic generator that can leverage historical data. To support these complex features, Codal enlisted a cadre of web technologies, including ReactJS, NodeJS, and Python.

After creating a new sitemap, and undergoing multiple rounds of iterative wireframing, we were able to design, develop, test, and launch Version 1.0 of WAVE’s upgrade within six months. 

But our collaboration with BBG didn’t end there. After the initial launch, Codal revisited the platform—this time with a little more breathing room. 

Seizing the opportunity presented by looser time constraints, our UX design team began conducting more comprehensive research in the form of in-depth user interviews and surveys. To cover BBG’s diverse user base, interviews were held with both advisors and advisees of varying interests, experience, and vocation in the tech industry.

With the launch of WAVE 2.0, we streamlined the scheduling process, reducing the amount of conflicts and needless back-and-forth between advisors and advisees. 

The WAVE platform has helped build relationships between over 4,950 female advisors and advisees, and has facilitated over 11,000 hours of one-on-one mentorship in STEM-related fields. 

Explore Codal’s digital products and discover how Codal served #BUILTBYGIRLS through data-driven, market-tested UX design and development.

Portal UX Design Case Study | BUILT BY GIRLS

ReactJS Logo

ReactJS

BUILT BY GIRLS

Launching an online B2B sales portal for a specialty retailer’s wholesale clients

DEMDACO Case Study Image

DEMDACO needed to implement an intuitive and efficient B2B sales portal, tailored to the goals and requirements of its wholesale clients. Leveraging the BigCommerce platform, Codal built a portal that’s customizable and easily maintained, helping DEMDACO provide a B2B experience that drives client engagement and sales.

After initially partnering with Codal to optimize and maintain its eCommerce site, it became clear that a separate portal was necessary to meet the unique needs of DEMDACO’s wholesale clients. While B2B clients were successfully ordering from DEMDACO’s singular eCommerce site, there was no functionality for these buyers to monitor their orders, track shipments, pay invoices, and more. As a result, wholesalers were following up on this information with DEMDACO reps outside of the eCommerce site, resulting in significant manual customer support work and a frustrating buyer experience.

Our first step was to understand the path to purchase for DEMDACO’s B2B clients. We conducted an in-depth audit of the typical buyer journey, from the customer’s first visit, to the checkout process. By dissecting DEMDACO’s conversion funnel, we were better prepared to implement an intuitive B2B portal. 

After our design team completed its analysis of DEMDACO’s user flow, we worked together to define all required pages—architecting the navigational structure, and organizing the layout and presentation of content. The messaging on DEMDACO’s existing B2C site was geared towards traditional consumers, and needed to be adapted for wholesale clients.

With DEMDACO providing initial designs and documentation, it was Codal’s job to implement the B2B portal’s front end. Our engineering team’s depth of knowledge and experience was extremely beneficial here, as we were able to work confidently within Stencil—BigCommerce’s design framework—as well as PHP, HTML, and Node.js. 

Codal and DEMDACO were true partners throughout the development process. The client’s in-house IT team provided APIs, while our team provided technical consulting, code improvements, and successful implementation—which was especially crucial when integrating the new B2B portal with DEMDACO’s complex ERP system. 

Once a breakdown of necessary features and functionalities were identified and mapped, integrations with the BigCommerce platform were required. Codal built, tested, and deployed enterprise integrations for: 

- Product comparisons
- Product recommendations
- Shopping feeds
- Order modifications
- UPS access points
- Preorders
- Gift card management 
- Product filter and sorting 
- Search
- A/B testing
- Product reviews

DEMDACO’s B2B client portal—easily accessible from its main eCommerce site—offers a UX and UI that’s tailored to wholesale clients. 

The portal is a central hub for wholesale buyers to monitor orders, track shipments, and review account balances. Clients can pay invoices within the portal and add credits to payments. The B2B portal also includes provisions for high-volume and frequent ordering, like the ability to search for items by SKU, and a ‘quick-order’ function for convenient and time-saving reordering. The portal also includes custom content geared towards B2B users, like buying guides, retailer success kits, and relevant contact information for territory managers. 

As a result of a great working relationship and a shared vision, Codal successfully delivered an intuitive and engaging B2B sales portal—allowing DEMDACO to extend its excellent online shopping experience to one of its most important customer bases.

See how Codal launched an eCommerce portal for B2B customers for DEMDACO.

B2B eCommerce Portal Case Study | DEMDACO

DEMDACO

Building a modern eCommerce store for a legendary gift retailer

Garrett Popcorn Case Study Image

To bring its in-store shopping experience online and extend its reach internationally, Garrett Popcorn needed a modern online storefront. Codal was honored to partner with such a legendary Chicago brand to launch a truly transformative eCommerce solution.

Prior to partnering with Codal, Garrett Popcorn had an outdated eCommerce website, operating on the legacy InsiteCommerce platform. This platform presented efficiency and scalability issues, with its inflexible admin portal, and a general inability to manage site content in a timely manner. Significant time and effort was required from the in-house development team whenever a front-end update was needed.

Garrett needed to migrate to a more robust eCommerce platform that would allow front-end developers to make essential changes, without being stopped or slowed down by technical limitations. The specialty retailer also wanted to ensure its new online store had a superior UX and UI design—one that would establish a real emotional connection with customers, and ultimately promote higher engagement, conversions, and sales. 

Garrett needed a true design partner to craft an intelligent, user-friendly, and aesthetically pleasing online storefront that mirrors the unique in-person shopping experience. Codal’s task was multifaceted: Deliver an engaging, immersive eCommerce journey that caters to the unique needs of Garrett’s customers, while also incorporating extensive admin functionality to ensure that the internal team can efficiently manage and update the site as needed. 

With the lofty goal of bringing a cherished Chicago brand into the next generation of eCommerce, our team got to work.

The Codal team began by conducting an on-site discovery session with Garrett stakeholders in Chicago. Over the course of a week, Codal worked in close collaboration with the Garrett team on requirements gathering. Through numerous activities and discussions, the Codal team came to understand the current state of Garrett’s eCommerce business, including its product catalog, fulfillment strategy, branding guidelines, content strategy, and more. The Codal team also worked with Garrett stakeholders to understand ideal user journeys and sales channels to understand how to streamline paths to purchase.

The information gathered from this intensive discovery phase helped the Codal team craft its project plan. After assembling the user journeys, ecosystem map, and the current site map, the Codal team had a comprehensive understanding of all work required to launch Garrett’s new eCommerce site. The Codal team delivered a proposed system architecture, as well as an extensive project plan encompassing all design and development work. Then, it was time to get to work.

The Process

We kicked things off by conducting an on-site Discovery session with Garrett Popcorn’s stakeholders in Chicago. Over the course of a week, Codal worked in close collaboration with the Garrett team to define project goals and requirements. Through numerous activities and discussions, our team came to understand the current state of Garrett’s eCommerce business, including its product catalog, fulfillment strategy, branding guidelines, content strategy, and technology stack. 

The data, research, and insights gleaned from Discovery guided our team’s roadmap to success. After assembling the user journeys, ecosystem map, and current site map, Codal and Garrett shared a comprehensive understanding of all the work that was required to launch this new eCommerce site. We delivered a proposed system architecture, as well as an extensive project plan encompassing all design and development work. Now, it was time to start building. 

Codal’s UX design team had three goals in mind when creating Garrett Popcorn’s new eCommerce experience: 

- To support and guide Garrett’s customers.
- To inspire site visitors to purchase.
- To effectively convey Garrett’s unique brand story and messaging. 

These goals were top of mind during the entire design process. The site’s UX needed to accommodate user navigation and browsing patterns, helping visitors to quickly and easily understand Garrett’s product offerings and variants—including different popcorn recipes, tin sizes, and tin designs.     
It was also imperative that the site gave users insight into the diversity of Garrett’s product catalog, with its wide range of flavors and combinations. Lastly, the site needed to convey Garrett’s most important brand attributes: A freshly-made, high-quality product; a customer-centric, Chicago-focused persona; and a unique, indulgent shopping experience.

To ensure these goals were met in the final product, Codal conducted extensive user research, which provided valuable context and perspective, allowing our team to implement useful, simplified, and productive design solutions. 

Some features of the site—like the ‘Build Your Own Tin’ feature—presented significant business limitations that had to inform UX design. With tin combinations limited by Garrett’s cooking process and expenses, our design team had to come up with an intuitive and friendly way for communicating to customers why certain popcorn combinations cannot be purchased.

To accommodate all of Garrett Popcorn’s new and existing functional requirements, Codal determined that migrating its eCommerce store to the BigCommerce platform was the best step forward. BigCommerce’s extensive native functionality and flexibility provided the perfect foundation to build Garrett’s new eCommerce site. 

A historic brand with unique and delicious products, Garrett Popcorn is one of the most sought after gifting retailers. Codal was proud to partner with such a legendary brand to deliver a cutting-edge, intelligent eCommerce solution that’s built to scale.

Garrett continues to grow its brand globally. With an intuitive, customer-focused user experience and first-rate functionality, Garrett’s new eCommerce site brings the brand into the 21st century. Taking advantage of the flexible and reliable BigCommerce platform, as well as Codal’s custom development capabilities, Garrett launched an eCommerce solution that really pops.

How Codal built a modern eCommerce site for a legendary gift retailer.

eCommerce UX Case Study | Garrett Popcorn

Stencil Logo

Stencil

Garrett Popcorn

Going headless for an international outdoor retailer

Gore Case Study Image

GOREWEAR needed a modern eCommerce solution to bring its global online retail operations under one roof. Codal was proud to help this outdoor gear brand revamp its online shopping experience, reach more customers internationally, and streamline internal workflows by migrating to headless commerce architecture. 

Traditionally, GOREWEAR had contracted much of its eCommerce operations to a costly, inefficient third-party provider, resulting in workflow bottlenecks that contributed to an overall lack of business scalability. Updates to online stores were slow to implement, product time-to-market was constantly impeded, and order fulfillment had a lengthy turnaround time. 

GOREWEAR sought to bring all of its eCommerce operations in-house to deliver a superior customer experience, while also streamlining internal processes and procedures. The company wanted two of its sister brands, VIEV and SITKA Gear, under its singular eCommerce umbrella as well. 

As a trusted partner to GOREWEAR, Codal’s task was to design and develop a responsive, agile eCommerce ecosystem—able to effectively respond to market trends, customer feedback, and data, and deliver a faster, smarter online shopping experience.

The first step in this project was to complete a full Discovery. Here, the Codal team gained an understanding of GOREWEAR’s current eCommerce ecosystem, from its various tools and processes, to the strengths and weaknesses therein. 

Codal worked in close collaboration with the GOREWEAR team to understand the business logic, workflows, procedural tasks, required input/ output information, and solutions necessary for the eCommerce site. 

Our team identified, defined, and documented all existing and proposed features and functionality for the site, while determining all relevant third-party plugins for each feature. Based on information gathered during this Discovery process, Codal created the technological roadmap to deliver a transformative eCommerce solution that would bring GOREWEAR into the next generation of online retail.

Codal determined that the best approach for GOREWEAR was to implement a headless eCommerce architecture. In a headless approach, the front-end presentation layer of an online store is decoupled from its back end. 

By separating these two elements, GOREWEAR can isolate traditional commerce tasks like product and order management from customer-facing, front-end content. Because its eCommerce data is not specifically tied to a single front end, it can be replicated across multiple different sites—including all of GOREWEAR’s global sites, as well as its sister brands VIEV and SITKA Gear.

Our team architected GOREWEAR’s new eCommerce solution using BigCommerce. Providing a powerful back-end commerce engine to support the brand’s numerous global sites, BigCommerce was the perfect platform on which to design an innovative online shopping experience designed to scale. 

We implemented Contentful as a content and channel management solution, allowing GOREWEAR to easily publish and localize content according to the needs of its individual eCommerce sites. With Contentful, it’s easy for the marketing team to manage all of its content—including promotions—across multiple storefronts, while keeping them all connected to a centralized commerce back end. 

Next, Codal incorporated Vercel into the GOREWEAR ecosystem, helping current and future in-house developers quickly and intuitively deploy new front-end features and functionality. Vercel is the ideal framework for headless setups because front-end teams can deploy instantly, scale automatically, and easily launch personalized content around the world. 

Our team also incorporated a number of third-party plugins to ensure a streamlined front- and back-end experience. These included Salsify for product information management, Klaviyo for email marketing, Yotpo for customer reviews, Avalara for automated tax compliance, and Adyen for payment processing.

Codal delivered a headless eCommerce solution to help GOREWEAR grow its international presence, scale internal operations, and consistently deliver a superior customer experience in the current and future retail landscape. 

This project is a solid example of why so many retailers consider headless architecture to be the future of eCommerce. With key functionality like multi-language and multi-currency support, along with the ability to rapidly deploy new content and user experiences across channels, this modern approach enables GOREWEAR—and its sister brands—to be more nimble and responsive to ever-evolving industry trends and customer behavior.

Working with our extensive set of eCommerce technology partners, including the robust BigCommerce platform, Codal successfully crafted a cutting-edge headless eCommerce solution for GOREWEAR that will enable long-term, sustainable growth for its family of brands.