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

Cocktail Courier Case Study Image

Retail/eCommerce

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. 

The Project

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.

The Challenge

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. 

Discovery

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. 

Development

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!

The Result

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

Automotive

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

Shopify Logo

Shopify

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

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

200+ clients, millions of end users, and thousands of designs later, we’re an award-winning agency that’s worked with some of the biggest brands around.

Together,

we can do great things.

Join the live stream discussion happening right now with AI leaders at the Edge Summit!

Empowering companies at the intersection of UX design, development, & business.

Sign up to receive our newsletter for instant access to insights.

Facebook

Twitter

Instagram

LinkedIn

Codal

View all case studies

Recent case studies

See all insights

Codal insights

Let’s collaborate 

200+ clients, millions of end users, and billions of dollars in business growth. We’re an award-winning firm that’s worked with some of the biggest brands in the world. 

Together

Our lean, interdisciplinary teams help you bring innovative digital solutions to market at scale. Drawing on a variety of perspectives, qualifications, and strategies, we make true strategic digital transformation a reality.

From UX design and mobile app development, to digital transformation and data strategy, explore the consulting services and solutions Codal has to offer.

Solutions | Codal | Top Digital Agency in Chicago

That’s not all we have —

Find more in our portfolio

Please provide additional information about your project below.

Thanks for reaching out.

No matter what the challenge,

Codal has the knowledge and experience to solve it.

Utilizing analytics and data gathered through extensive research, Codal creates digital products tailored to your customers, ensuring the finished solution caters to all user types. 

Leverage elegant, intelligent, and immersive digital experiences tailored to your customers’ wants and needs, as well as your business goals.

Solution Hero Visual Common

product design and development icon

Check out our five-step process to product design and develop projects - 

Our product design & development process

Whether you’re building a new website, mobile application, internal business platform, or any other digital product, Codal is here to guide you through the process with speed and efficiency. Using advanced technologies and a data-based approach, our award-winning designers and developers create solutions that facilitate practical and meaningful experiences for your business’ customers, employees, and stakeholders. This means stronger user engagement, streamlined workflows, fewer support issues, and optimized revenue. 

Our product design & development solutions

Get elegant, intelligent, and immersive digital experiences tailored to your customers’ needs—and your business goals.

Product Design & Development | Codal | UX Design Agency

Product design and development 

We help your business launch digital commerce experiences that drive sales and create genuine customer delight.

Get headless architecture with engaging shopping experiences that drive conversions from a certified Shopify and BigCommerce Elite partner.

e commerce

Check out our five-step process to eCommerce projects - 

Our eCommerce design & development process

For more than a decade, Codal has been helping businesses thrive in the eCommerce landscape. With superior UX/UI design, we give your business the tools it needs to enhance its digital presence, expand its customer base, as well as create and manage additional streams of revenue. By establishing a sophisticated and agile eCommerce tech stack, we ensure scalability, so your business can rapidly adapt to new industry trends, consumer behaviors, and emerging technologies. Codal is currently a trusted partner of both Shopify and BigCommerce—two of the top eCommerce platforms on the market today. 

Our eCommerce solutions

Get elegant, intelligent, and immersive shopping experiences that create positive customer impressions and drive conversions.

eCommerce Website Development Company | Codal

eCommerce

Codal drives strategic process improvements and best practices to help you successfully deliver quality services to customers. 

Launch seamless and intuitive digital journeys that cater to users of all types and help you forge more meaningful connections with customers.

human

Check out our five-step process to service design projects - 

Our service design process

With the right blend of people, processes, and technology, your business can unlock its full potential—and that’s where Codal’s service design team comes in. We integrate sophisticated digital technologies with various back- and front-end systems to enhance the user experience (UX) and streamline internal workflows. Effective service design enables stronger communication between your business, its customers, and its third-party service providers, so you can continuously refine processes and optimize revenue as you scale. 

Our service design solutions

Service Design | Codal | Web Design and Development Chicago

Service design

Collecting, visualizing, and analyzing massive amounts of data to discover actionable insights is a crucial part of creating a sound business strategy.

Harness the power of data to drive strategic decisions, uncover opportunities, and support the overall success of your business.

bars

Check out our five-step process to data strategy projects - 

Our data strategy process

Every growing business needs a strategy for collecting and analyzing data. But with so many different approaches and available technologies, it can be difficult to know where to start, or how to get more value from your current tools. Codal can help your business uncover new opportunities, drive strategic decisions, and optimize revenue by harnessing the power of data.

Our data strategy solutions

Data Strategy | Codal | Digital Consulting Firm

Data strategy

We stand up intelligent, cost-effective microservices architectures that let businesses achieve true scalability.

Go to market faster with a platform that’s flexible, designed to scale, and provides long-term value.

layout

Check out our five-step process to microservices architecture projects - 

Our microservice architecture process

Trading in your business’ monolithic system for a microservices architecture can come with many benefits, such as greater programming flexibility, the ability for development teams to work independently of each other, and a faster time-to-market for application modifications. Codal helps determine whether or not microservices are right for your business, then creates a roadmap for success. We implement microservices to enhance the overall agility, scalability, and security of your business—resulting in lower costs, streamlined workflows, and optimized revenue.

Our microservices architecture solutions

Wondering if trading in your monolithic system for a microservices architecture is best for your business? Codal can help.

Microservice Architecture | Codal | Web Development Services

Microservice architecture

Codal can guide your business through a hassle-free transition from the old to the upgraded, allowing you to migrate systems and solutions without the hassle.

Modernize your legacy technology and guide your business through a hassle-free transition from the old to the upgraded.

replatforming

Check out our five-step process to modernization projects - 

Our modernization process

The process of switching from a legacy platform to a more advanced solution—without disrupting your business’ customer experience or internal workflows—requires significant time, resources, and technical expertise. Our award-winning team collaborates with the key players on your end to determine which platforms and tools are best suited for your scaling business. Then we execute the new platform transition and integrate any third-party solutions, establishing a technological infrastructure that supports efficient UX updates, robust security, and superior data analytics.

The Project

Technologies