Creating a superior HIPAA compliant physician-patient relationship in eCommerce.

RegimenPro case study image

The challenge for Codal was clear: create an intelligent HIPAA compliant portal for physicians to manage their patients’ regimens, build a platform for patients to get a regimen quickly, and wrap it all up in a streamlined Shopify Plus eCommerce site with a simple and smooth user experience.

Retail/eCommerce

Healthcare

In order to grow its network of dermatologists and increase sales on its RegimenPro platform, RegimenPro’s challenge was two-fold. First, it needed to create an intuitive physician portal that allows dermatologists to easily select patient-specific products and manage related regimens for their patients that met HIPAA compliance. Second, a streamlined, straightforward consumer experience was necessary to allow new patients to easily get an extensive regimen and order products for delivery.

The Project

RegimenPro is an eCommerce site that disrupts the traditional approach to supplying patients with high-quality skincare products. Branding itself as a “digital premium skincare dispensary,” RegimenPro provides an extensive physicians’ network to help patients connect with a licensed dermatologist and get a customized skincare routine with high-quality products. Then, its RegimenPro marketplace allows patients to easily order these physician recommended products and get them delivered to their front door, taking the traditional appointment scheduling and in-office dispensing out of the equation.

In order to grow its network of dermatologists and increase sales on its RegimenPro platform, RegimenPro’s challenge was two-fold. First, it needed to create an intuitive HIPAA compliant physician portal that allows dermatologists to easily select patient-specific products and manage related regimens for their patients. Second, a streamlined, straightforward consumer experience was necessary to allow new patients to easily get an extensive regimen and order products for delivery.

As a Shopify Plus partner, Codal designs intuitive user experiences that increase and optimize our clients’ conversions. Migrating the RegimenPro marketplace to Shopify Plus provided the perfect platform on which to build a physicians’ portal, as well as create an effortless customer experience.

Intro

RegimenPro was confronted with a multifaceted obstacle to increasing sales on its marketplace. To attract more physicians to the platform, it needed an intuitive portal that would alleviate patient pain points around traditional in-office product ordering. These pain points also needed to be addressed on the consumer side, with an easy way for patients not currently seeing a dermatologist to get a customized regimen of high-quality products that they can easily order directly to their door. The challenge for Codal was clear: create an intelligent HIPAA compliant portal for physicians to manage their patients’ regimens, build a platform for patients to get a regimen quickly, and wrap it all up in a streamlined Shopify Plus eCommerce site with a simple and smooth user experience.

__Questions To Answer__
1. How do we make the RegimenPro platform more user-friendly for physicians?
2. How do we ensure consumers can easily get a skincare regimen that feels unique and personal without a trip to the dermatologist?
3. What are ways we can alleviate pain points around traditional in-office skincare product ordering for both physicians and consumers?

The Challenge

Codal began by conducting an in-depth discovery phase with RegimenPro stakeholders, as well as some of its partner dermatologists. Codal’s developers and UX designers were able to work closely with these groups to outline the scope of work, while discussing strategies, technical requirements, and user types of the platform. The collaborative discovery process allowed Codal to explore features and innovative ideas and get real-time feedback from the RegimenPro stakeholders.

Following the extensive discovery phase, Codal’s development team had a clear picture of what features were essential to the success of the new physician portal. Using middleware built on Ruby on Rails and Vue.js, Codal engineers created an intuitive environment for physicians to create and manage unique patient regimens, create pre-set regimens, designate their preferred products, and have visibility into patient ordering.

Discovery

To provide a superior experience for first-time users without an assigned physician, Codal worked RegimenPro’s partners to create an in-depth quiz to assess users’ skincare needs without ever having to set foot in a dermatologist’s office. After answering nine questions—and providing some supplementary information—the quiz generates a custom skincare regimen, incorporating all of RegimenPro’s products. Working with RegimenPro partner physicians, the Codal team created an extensive logic tree to provide tailored product recommendations based on a user’s age, gender, skin type, and more. This logic tree is capable of producing over 1,600 unique regimens, all backed by actual physician recommendations.

Then, it was time for the UX team to create user journeys to ensure that every interaction on the site is meaningful. Based on these journeys, the UX team built interactive wireframes, which were handed off to Codal’s UI designers to incorporate RegimenPro’s branding and visual motifs. Then, our expert Shopify Plus developers constructed the site based on these wireframes, tying together both the physician portal and the built-from-scratch patient quiz application.

Development

RegimenPro’s new eCommerce site for its RegimenPro marketplace provides a first-class user experience for multiple audiences. For physicians, it provides a central hub to manage all aspects of patient regimens, making it easy to recommend and order products, in-office or remotely. For consumers, RegimenPro offers an easy way to get a custom regimen with a few clicks, saving the hassle of locating a dermatologist, scheduling an appointment, and obtaining products directly from a physician. All constructed on a lean, intuitive Shopify Plus platform, the RegimenPro marketplace provides an easy way for patients and doctors to connect, and establish a high-end skincare regimen backed by cutting-edge research.

The Result

Creating a superior physician-patient relationship in eCommerce.

Patient Portal Development Case Study | RegimenPro

Ruby on Rails Logo

Ruby on Rails

Shopify Logo

Shopify

Vue.js logo

Vue.js

RegimenPro

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

Thermos Case Study Image

Thermos came to Codal with an ambitious task: successfully migrate its eCommerce presence from Magento to Shopify Plus in just eight weeks. We’re always up for a challenge and working with a historic brand on a tight timeline sounded right up our alley.

Thermos, a storied provider of insulated food and beverage containers, knew that it needed an eCommerce transformation. Since 1904, Thermos has developed and manufactured consumer products that harness the power of vacuum insulation. Over 115+ years, the brand has become synonymous with quality, practicality, and durability. Together with its sister brand Lifefactory, Thermos needed to modernize its eCommerce presence.

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 presence 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, designed to understand Thermos’ wants, needs, expectations, and desires from the Shopify Plus platform—as well as establish an understanding of Codal’s approach to the migration process. 

After learning the ins and outs of Thermos’ existing business logic, workflows, and procedural tasks, Codal got to work. Our design and development teams took the information gathered in Discovery to architect a Shopify Plus solution that not only aligned with Thermos’ business and technical goals but also integrated seamlessly with its existing technological ecosystem.

Codal’s UX designers revamped Thermos’ eCommerce presence to reflect the brand’s history and values, while also establishing 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 the brand was seamlessly integrated into the new eCommerce platform, thus retaining its unique look and feel. 

Design

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 Thermos in bringing all of its order fulfillment capabilities and operations in-house, after separating from a legacy third-party logistics provider.

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 accomplishments the brand has achieved 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 the 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

Going headless for an integrated eCommerce ecosystem.


Gore Case Study Image

As a trusted partner to GOREWEAR, Codal’s task was to design and develop a responsive, agile eCommerce ecosystem that is able to respond to customer feedback and deliver a superior all-around shopping experience.

GOREWEAR needed a new, modern eCommerce setup to bring its global online retail operations under one roof. As a leading eCommerce design and development agency, Codal was proud to team up with such a brand to deliver a cutting-edge eCommerce solution built to scale.

An innovative and well-respected performance apparel brand with a storied history, GOREWEAR approached Codal to reimagine its global eCommerce ecosystem. Under the W.L. Gore & Associates umbrella, GOREWEAR designs, develops, and manufactures cutting-edge products for endurance athletes to enhance their experience in all-weather conditions. Known for its waterproof and breathable Gore-Tex fabrics, GOREWEAR employs extensive research and development to ensure its products are built to support the world’s most elite athletes, no matter what the conditions.

Traditionally, GOREWEAR had contracted much of its eCommerce operations to a third-party provider. This meant that updates to its eCommerce sites were slow to implement, its product time-to-market was impeded, and order fulfillment had a lengthier turnaround time. GOREWEAR sought to bring all of its eCommerce operations in-house in order to deliver a superior customer experience while streamlining internal processes and procedures.

Additionally, GOREWEAR sought to bring 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 that is able to respond to customer feedback and deliver a superior all-around shopping experience.

The first step in the project process was to complete a full discovery. This enabled the Codal team to fully understand GOREWEAR’s current eCommerce ecosystem, including its pain points and challenges. Codal worked in close collaboration with the GOREWEAR team to understand the business logic, workflows, procedural tasks, required input/output information, and tools necessary for the eCommerce site. Additionally, Codal identified, defined and documented all existing and proposed features for the site, while determining all relevant third-party plugins for these features.

Based on information gathered during this discovery process, Codal assembled an execution strategy to deliver a transformative eCommerce solution to bring GOREWEAR into the next generation of online retail.

Codal determined that the best approach for GOREWEAR was to launch a headless eCommerce ecosystem. In a headless approach, the front-end presentation layer of an eCommerce presence is decoupled from its back end. By separating these two elements, GOREWEAR can isolate traditional eCommerce 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. 

Strategy

Codal architected GOREWEAR’s eCommerce solution using BigCommerce as a platform provider. BigCommerce provides a powerful back-end commerce engine to support GOREWEAR’s numerous global sites. It was the perfect template on which to build an innovative eCommerce solution that’s designed to scale.

Codal 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 GOREWEAR to manage all of its content—including promotions—across its ecosystem of sites while having them all connect to a singular commerce back end. 

The Codal team also incorporated Vercel into the ecosystem to help GOREWEAR’s developers easily deploy engaging front-end experiences. 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.

The Codal team also incorporated a number of third-party plugins to ensure a streamlined 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 that will help GOREWEAR grow, scale, and deliver a superior customer experience. This approach enables GOREWEAR to be nimble and responsive. With a headless eCommerce architecture, organizations can develop the front end independently, while easily managing commerce functions separately. Codal designed and developed GOREWEARs headless solution to be truly flexible and agile, with key functionality like multi-language and multi-currency support to enable connected commerce across its multiple global sites and brands.

For many brands, headless represents the future of integrated eCommerce. Working with our extensive set of eCommerce technology partners— and taking advantage of the flexible and reliable 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.

How Codal helped GOREWEAR go headless for an integrated eCommerce ecosystem.

Headless eCommerce Case Study | GOREWEAR

BigCommerce-logomark-whitebg

BigCommerce

Contentful logo

Contentful

Vercel logo

Vercel

Salsify logo

Salsify

Klaviyo logo

Klaviyo

Yotpo logo

Yotpo

Avalara logo

Avalara

Adyen logo

Adyen

GOREWEAR

Designing and developing a transformative workflow management solution for corporate legal teams.

Proxy Case Study Image

After initially building a minimum viable product (MVP) for Proxy, Codal worked to transform it into a complex, enterprise-grade solution over multiple ongoing releases. Understanding the complexities of legal project management and the unique needs of corporate legal teams, Codal designed and architected a transformative solution.

Legal

Proxy is a robust legal workflow management tool designed for corporate legal departments. In-house counsel, corporate stakeholders, and outside firms trust Proxy to help them manage important tasks, deadlines, and documents related to legal operations. Proxy helps companies handle anything from small, ad hoc requests to full-scale projects with a simple, intuitive user interface. With extensive organization and delegation functionality, in-house counsel can easily manage workloads, assign tasks, and monitor progress. Proxy’s powerful reporting tools offer actionable analytics on project status, progress, workloads, and efficiency. The solution’s dashboard provides a clear and concise view of the status of your most important tasks, deadlines, and documents for all relevant legal stakeholders.

Introduction

In order to design and develop a comprehensive workflow management tool for the legal space, NMBL Technologies—maker of Proxy—partnered with Codal. Founded in 2018 by attorneys and tech specialists, NMBL seeks to boost productivity in the legal space for in-house lawyers by building technology that streamlines workflows and facilitates effective collaboration. As a design and development agency committed to delivering pixel-perfect web applications to solve real business challenges, Codal was the right fit to build and launch this superior legal workflow management technology.

After initially building a minimum viable product (MVP) for Proxy, Codal worked to transform it into a complex, enterprise-grade solution over multiple ongoing releases. Understanding the complexities of legal project management and the unique needs of corporate legal teams, Codal designed and architected a transformative solution. With a three-tier organizational architecture between projects, workflows, and tasks, Proxy empowers in-house lawyers to assign, delegate, and prioritize items, as well as directly document management abilities.

Codal began with an initial discovery phase with Proxy stakeholders. Working through sketches and potential user flows gave Codal designers a solid foundational understanding of the application’s usability. Codal designers then worked collaboratively to create a modular platform with interconnectivity mapped out at an architectural level. From this, the team created a fully standardized and documented design system, which they applied to UX wireframes to produce user interface designs for the engineers to reference.

This design system was developed in accordance with Proxy’s mission statement and company values. It provided a roadmap for successfully implementing Proxy’s brand guidelines, as well as its key visual elements, like its logo, typography, iconography, data visualizations, and more. This system was crucial to establishing a streamlined look and feel for Proxy, and informing an intuitive and aesthetically pleasing user experience.

Discovery & Design

Meanwhile, Codal engineers worked on an Agile timeline alongside designers, quality assurance teams, and Proxy’s team to bring the entire product to life. In order to create an effective legal workflow management tool, the team implemented several essential features and functionality. The application’s tiered approach to organizational architecture—including projects, workflows, and tasks—as well the sensitive nature of legal projects and initiatives, meant that a number of provisions needed to be built in. These included a robust document management system, with the ability to assign permissions to specific groups or individuals in an organization. These permissions grant access—limited or full—to files based on the demands of a specific project.

In addition to features related to navigating the solution itself, the Codal team built in an easy-to-use service request and legal intake platform. This allows users to submit service requests directly to the legal teams via email or in the Proxy application. This avoids the need for a third party source or human interaction to facilitate new legal requests, and allows the legal teams using Proxy to resolve requests in a timely and secure manner. Additionally, the Codal team built the application to be successfully hosted on different server instances, including multi-tenant and secure private cloud. Proxy can be installed on on-premises, or in a dedicated cloud server environment, for companies with a large number of users, or those wary of sharing cloud space with our Proxy customers.

Engineering

As with any application handling large amounts of legal documentation, security and privacy were top of mind. At the server level, Proxy uses 256 AES encryption for all data-at-rest, and implements end-to-end encryption from browser-to-server. When it comes to customers using a multi-tenant cloud instance, all documents and data are compartmentalized and never interact with the data of other customers. Proxy was built using Privacy by Design concepts, meaning the authentication, access controls, permissions and roles, and other security measures impact every feature and function in the application. 

Security & Compliance

Working in close collaboration with legal and technology experts at NMBL provided Codal with the wealth of context and guidance to deliver a top-notch legal workflow management solution. __Elegantly designed and developed with an impressive set of features, Proxy is a comprehensive solution for corporate legal teams looking to streamline their workflows and get things done faster and more efficiently.__ With flexible deployment options, companies seeking a traditional on-premise solution—or those looking for a Software-as-a-Service (Saas) approach—can get up and running in a short period of time. Proxy represents one of the most all-inclusive project management solutions in the burgeoning legal tech space.

See how Codal designed and developed a transformative workflow management solution for corporate legal teams.

Workflow Management Solution Development Case Study | Proxy

angular

Angular

python

Python

Proxy

A refreshed internal compliance web application with a modernized UX for a firm with 1.8 million banking and tech clients.

Charles Schwab Case Study Image

The quantitative and qualitative data collected informed a successful design process that reduced 500 unique screens to a mere seven templates.

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 their many internal web applications.

The Problem

In order for Codal to garner a deeper understanding of Schwab’s compliance solution and the user’s frustrations with the platform, Codal kicked off the project with a rigorous and in-depth discovery phase.

Because both Schwab and Codal prioritized the end-user so heavily, Codal conducted a slew of user interviews and surveys, extending our scope from prospective clients to Schwab employees.

From these user interviews, Codal’s UX team was able to collect a wealth of both qualitative and quantitative data on the pain points of SchwabCT, and triage them accordingly.

During the UX research phase, Codal’s design team attended a national Charles Schwab compliance conference to demonstrate our early prototypes and collect feedback from real users of the web application.

From this feedback, Codal’s UX design team was able to transform these frustrations, into simpler, more user-friendly experiences.

By collecting more data from users, we were able to make more iterations to the platform, continuing to address the main pain points of the web application. Our user experience team also learned what desired functionalities were completely missing from the platform, and include them in the next round of prototyping and testing.

The Process

Overall, Codal transformed the outdated, complex technology into an extremely intuitive, user-friendly and aesthetically-pleasing web application. Codal was even able to simplify SchwabCT by revamping the platform’s information architecture, consolidating over 550 separate screens into a mere 7 templates.

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

swift

Swift

kotlin

Kotlin

Charles Schwab

Modernizing a full-stack software suite for digital businesses. 


Call Potential Case Study Image

Phil Murphy

Codal has really allowed us to continue to grow and expand, not just our customer base but our product suite.

$57M

Call Potential is an advanced set of software tools that automate the many everyday processes of business, saving self-storage operators time and significantly increasing profits.

In order to completely transform the archaic industry of self-storage, Codal’s designers needed to understand every single opportunity for technological assistance. On the web side of the UX process, Codal’s designers crafted an elegant two-part solution. One design accommodated for the need to inform potential customers of Call Potential’s capabilities in an accurate and appealing way, while the other accounted for management needs. 

As a fullstack suite of software tools, Call Potential needed the ability to seamlessly integrate into their client’s existing tech stracks. To achieve this, Codal custom-designed Call Potential APIs from scratch, ones that could be robust enough to serve their clients no matter the infrastructure.

The Intro

The privacy, security, and safety of client data is of the utmost priority for both Codal and Call Potential alike. While there was no overarching regulatory security mandate for lead generation, Call Potential and Codal were committed to developing a product that was scalable and secure on all levels. Previous iterations of call center management systems like CallPotential were often saddled with outdated or obsolete security measures. Codal’s main concern was modernizing components to provide the most streamlined and efficient protocols possible. Call Potential’s clientele can be confident that their data remains safe and secure.

Codal designed a sensible and intuitive user experience for both the customer-facing and administrative sides of the platform, even developing a training and tutorial program for Call Potential’s clients and customers. Overall, Codal transformed the outdated, complex technology into an extremely intuitive, user-friendly and aesthetically-pleasing web application.

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

UX Web Design Case Study | Call Potential

Twilio logo

Twilio

Call Potential 

Building a modern eCommerce site for a legendary gift retailer.

Garrett Popcorn Case Study Image

Codal was proud to partner with such a legendary Chicago institution to deliver a cutting-edge, intelligent eCommerce solution built to scale and Garrett continues to grow its brand globally.

Garrett needed a new, modern eCommerce presence to deliver a superior customer experience and continue to grow its reach internationally. As a leading eCommerce design and development agency, Codal was honored to partner with such a legendary Chicago brand to launch a truly transformative eCommerce solution.

A storied popcorn gift retailer with deep Chicago roots, Garrett Popcorn enlisted Codal to revamp its eCommerce presence. Founded in 1949, Garrett sells handcrafted recipes of gourmet popcorn made right in Codal’s backyard. __A Windy Cindy institution, Garrett’s legendary popcorn helps people all over the world celebrate life’s cherished moments, no matter how big or small.__

Garrett needed a new, modern eCommerce presence to deliver a superior customer experience and continue to grow its reach internationally. As a leading eCommerce design and development agency, Codal was honored to partner with such a legendary Chicago brand to launch a truly transformative eCommerce solution.


Prior to partnering with Codal, Garrett had an outdated eCommerce site operating on the legacy InsiteCommerce platform. This platform had significant limitations, including an inability to manage content in a timely manner and an admin portal that lacked flexibility—and required developer attention any time a change was needed. Garrett needed to migrate to an improved platform that accommodates swift content updates and an extensive admin portal to allow the Garrett development team to make essential back-end improvements independently. 

Garrett also wanted to ensure its new eCommerce site had a superior UX design. An effective eCommerce UX establishes a real emotional connection with users and ultimately leads Great to increased customer engagement. Garret needed a true design partner to go above and beyond and craft intelligent, aesthetically pleasing digital journeys that mirror the historic Garrett brand. 

Codal’s task was multifaceted: deliver an engaging, immersive eCommerce experience that caters to the unique needs of Garrett’s customers, while also incorporating extensive functionality to ensure the Garrett team can routinely update and manage the site as needed. With the lofty goal of bringing a cherished local brand into the next generation of eCommerce, the Codal team set 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.

Based on the discovery process, Codal’s UX design team crafted three goals in mind when creating Garrett’s new eCommerce presence:
1. To support and guide Garrett’s customers
2. To inspire visitors to purchase
3. To accurately convey Garrett’s unique brand message

These goals were top of mind during the entire design process. The site’s UX needed to support users’ navigation and browsing patterns, helping them to quickly understand Garrett product offerings and variants, including recipes, tin sizing, and design. Additionally, it was imperative that the site encouraged browsing behavior and gave users insight into how diverse the Garrett catalog of products is. Lastly, the site needed to convey Garrett’s brand attributes: a freshly-made, high-quality product; a customer-centric, Chicago-focused persona; and unique,indulgent experience.

UX Design

To ensure these goals were met in the final product, Codal conducted extensive user research on the frontend of the project. This research helped the team understand how users go about achieving goals that are important to them. It provided valuable context and perspective, allowing the team to implement useful, simplified, and productive design solutions to meet the goals of the project.

Through two rounds of moderated user testing, the Codal UX design team gleaned valuable insights. From understanding how users best interpret Garrett’s “always fresh” brand story, to learning how they interact with Garrett’s “build a tin” feature to build unique combinations, to determining the best approach to organizing the product catalog, the team collected insights that would form the backbone of Garrett’s improved user experience. Some features of the site, like the build a tin feature, had significant business limitations that informed the UX design. With tin combinations limited by Garrett’s cooking process and expenses, the UX team had to come up with a unique and friendly way for users to understand why the cannot purchase a specific tin.

User Testing

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

To effectively scale its content efforts and allow for easy and timely updates, Codal successfully migrated Garrett to the Contentful content management system (CMS) and integrated it with the BigCommerce back end. The Codal team also created an intelligent admin portal to allow Garrett to manage the site internally. This custom portal went above and beyond BigCommerce’s native functionality to accommodate Garrett’s unique functional requirements. It provided accurate and up to date monitoring of all middleware and ERP integrations, ensuring they are successfully syncing. Additionally, the admin portal allows Garrett to manage inventory in real time, including all build a tin combinations. 

Because Garrett is a gift retailer, it required special functionality to provide for things like multiple product variants, order customization, and shipping. Working in tandem with the UX design team, Codal’s agile developers created a custom “build your tin” feature with intelligent logic to allow customers to create their own unique popcorn recipe combinations in multiple sizes with optional add-ons. 

The team also built a custom inventory application with real-time inventory checks across the site to avoid overselling, and took advantage of native BigCommerce functionality that allows customers to ship to multiple locations in a single order—and to select future ship dates. Additionally, the team implemented key functionality to enable payments via digital wallets, allowing customers to purchase Garrett products using Amazon Pay, Apple Pay, Google Pay, and more.


A historic brand with quality products, Garrett Popcorn is one of the most sought after companies is eCommerce when it comes to gifting. Codal was proud to partner with such a legendary Chicago institution to deliver a cutting-edge, intelligent eCommerce solution built to scale and 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 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.

Codal has been named the BigCommerce 2021 Partner of the Year and recognized for the best User Experience + Design Award.

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.

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.