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

TrueCABLE 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.

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

Bell developed the original Sling Shot in 2008 to train his chest while recovering from a torn pectoral muscle. Officially launched in 2010, the Sling Shot quickly became a key piece of equipment for gym rats and fitness newbies alike. Since then, MBSS has grown into a successful eCommerce business, launching additional pieces of equipment—like the popular Hip Circle—while also becoming a popular lifestyle brand. 

As MBSS continued to grow, the company recognized its eCommerce website needed some work. While it was operating on the popular and reliable Shopify Plus platform, the site’s user experience (UX) was lacking. 

As an award-winning design and development agency based in Chicago, Codal has extensive experience in delivering transformative eCommerce solutions that optimize conversion and boost sales. Codal was proud to partner with an innovative brand like MBSS to help refine and improve its eCommerce presence.

Intro

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 Challenge

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.

Discovery

Codal’s UX and engineering teams crafted a three-phase plan to meet ACCME’s project
requirements:
- Design several different platform interfaces to meet the specific needs and expectations of each user type.
- Tailor the platform’s layout to complement large amounts of data visualization.
- Engineer the platform’s front end and back end using Angular and Django, a Python framework, respectively.


The Process

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. 

The Result

User-Friendly eCommerce Experience Case Study | TrueCABLE

Shopify Logo

Shopify

TrueCABLE

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.

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.

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.

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?

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.

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.

Creating a superior physician-patient relationship in eCommerce.

Patient Portal Development Case Study | RegimenPro

Ruby on Rails Logo

Ruby on Rails

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’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.

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

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.

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.

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

Looking to upgrade its eCommerce platform and boost conversion rate, Joriki sought Codal’s eCommerce expertise to redesign its high-end yoga apparel store and enhance its customer experience. 

Joriki Case Study Image

As an eCommerce web development company, Codal was able to pinpoint these areas of improvement, as well as other potential design obstacles in the customer’s path to purchase.

11.61%

$120

2.05%

Joriki is a high-end brand of yoga apparel that champions artisan-made quality, social consciousness and giving back to the global community. It sources inspiration from styles and patterns around the world. Looking to upgrade its eCommerce platform and ultimately boost conversion rate, Joriki sought Codal’s eCommerce expertise to redesign its online store and enhance its customer experience. 

To craft an eCommerce site that effectively converted both prospective and returning clients, Codal’s UX team followed a three-phased plan:
1. Migrate Joriki from its existing eCommerce platform to Shopify
2. Customize a conversion-tested Shopify template, tailoring it for Joriki’s specific business goals
3. Revamp the organization and display of Joriki’s products to facilitate conversion and reduce bounce rate


Joriki had built its online store on WooCommerce, WordPress’ eCommerce platform. While WooCommerce offered a serviceable solution for Joriki’s online store, the high-end retailer felt there was room for improvement in its customer shopping experience. 

As an eCommerce web development company, Codal was able to pinpoint these areas of improvement, as well as other potential design obstacles in the customer’s path to purchase. Codal is a certified Shopify Plus partner, meaning Joriki’s migration to Shopify was seamless and hassle-free for the store’s day-to-day operations. 

Codal’s customer experience team began by selecting a foundation for the design in the form of a Shopify template. These templates are market-tested to promote conversion, and can be customized by Codal’s user experience (UX) designers to craft a tailor-made experience optimized for the client. 

In Joriki’s case, Codal’s UX team began by re-architecting the organization of the website, paying particular attention to how their products were grouped and presented. 

After the modified website was launched, Joriki saw a significant uptick in conversion, both from prospective and returning customers. 

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

Retail eCommerce Web Design Case Study | Joriki

Joriki

Designing a complex online store & launching a user-friendly eCommerce site.

Mahlkonig Case Study Image

The real challenge wasn’t the sheer amount of products, but rather designing a simple, user-friendly way a customer could navigate the catalog, without getting lost in a sea of part numbers and similar-looking components.

800+

4.21%

$219.42

As a leading coffee grinder manufacturer with an international market, the German-based Mahlkönig needed a strong digital presence in the US. Looking to launch a destination where Mahlkönig’s stateside customers could order replacement parts, access product manuals, and purchase accessories, Mahlkönig tapped Codal to build and launch a user-friendly eCommerce site on Shopify Plus.

Though Mahlkönig’s US-based eCommerce store doesn’t sell their signature grinders, it does vend an exhaustive selection of different parts and components for all of Mahlkönig’s main offerings—over 800 SKUs in total. But the real challenge wasn’t the sheer amount of products, but rather designing a simple, user-friendly way a customer could navigate the catalog, without getting lost in a sea of part numbers and similar-looking components. That was Codal’s goal: Deliver an engaging customer experience that allows for seamless product navigation and acts as a knowledge center for product support and maintenance.

Codal’s UX team began by sketching sitemaps, determining the optimal way to balance a large, highly technical product catalog alongside an in-depth knowledge center that included how-to manuals, technical specs, and FAQs. Eventually, Codal settled on prioritizing the product navigation by including several different user flows for finding the correct part. In addition to a ‘filter by model’ on the product page, our designers created a separate ‘Shop Parts By Model’ module, that acted as a wizard for customers looking for a specific part for their coffee grinder. 

After architecting the site, Codal’s designers conducted theme analysis, examining Shopify’s library of templates and determining the best fit for Mahlkönig. The Shopify Plus theme needed to meet both the functional and aesthetic requirements of the site, while adhering to the structure Codal planned earlier in the design phase. 

After selecting a Shopify Plus theme, Codal’s developers got to work customizing it to Mahlkönig’s exact specifications. In addition to the standard custom work —aligning the theme with Mahlkönig’s brand conventions, for instance—Codal’s engineers built some of the store’s features entirely from scratch, including the aforementioned ‘Shop Parts By Model’ feature. Additional custom development was required for the knowledge center as well: The third-party plugin chosen for the knowledge center module didn’t support images and PDFs, both of which Mahlkönig needed. And to append Shopify’s product tagging feature, Codal created custom tags for each component, so that users could easily see which parts were compatible with which grinders.

__In the end, Codal delivered an online store that embodied both the Mahlkönig brand and offered an easy-to-use, effortlessly navigable customer experience.__ We look forward to future work with Mahlkönig’s German-based eCommerce site.


Shopify eCommerce Website Case Study | Mahlkönig

Liquide

Liquid

Mahlkönig

Connecting culinary buyers and sellers with an effortless shopping experience.

Orderve Hero

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.

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.

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.

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.

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

Brand evolution through superior eCommerce user experience (UX).

Mark Bell Sling Shot Case Study Image

MBSS was selling innovative products with compelling branding on a premier eCommerce platform. It just needed a little help to deliver a truly cutting-edge commerce experience and drive conversions. That’s where Codal stepped in.

Mark Bell Sling Shot (MBSS) is a cutting-edge fitness company that offers patented exercise equipment, apparel, and accessories. Founded by “meathead millionaire” Mark Bell, the brand strives to “empower those who seek to improve their life through fitness.” Its products are designed to offer superior performance and help people achieve their fitness goals more efficiently.

While MBSS offers truly inventive fitness products, its eCommerce site lacked a seamless UX. As a result, its paths-to-purchase needed to be streamlined. And, launching a simpler, more logical shopping experience was important. Additionally, MBSS was seeing almost six times as many mobile users on its site as desktop users and lacked a truly mobile-first design approach. Though MBSS was operating on the dependable Shopify Plus platform, it wasn’t taking full advantage of Shopify Plus’ best-in-class tools to deliver a superior shopping experience for its customers.

MBSS was selling innovative products with compelling branding on a premier eCommerce platform. It just needed a little help to deliver a truly cutting-edge commerce experience and drive conversions. That’s where Codal stepped in.

The Codal team began by conducting a full-scale eCommerce audit of MBSS’ eCommerce website. Analyzing everything from the site’s homepage, to its product categorization, to the checkout process, the Codal team determined key areas for improvement to help streamline paths to purchase. Putting the entire site under a microscope, then comparing it to fitness eCommerce industry standards, trends, and best practices allowed the Codal team to identify key areas where MBSS can improve how customers engage with its site.

The process

See how Codal lead Mark Bell Sling Shot through a brand evolution with superior eCommerce user experience (UX).