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

APG Case study

Automotive

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

The Project

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

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

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

The Challenge

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

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

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

Discovery

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

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

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

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

Development

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

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

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

The Result

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

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

Shopify Logo

Shopify

Bloomreach

yotpo

Yotpo 2023

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

ClaimDeck hero image

Legal

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

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

As a result, insurers experience two key issues:

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

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

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

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

We identified two key user types:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Streamlined Litigation Management Platform Case Study | ClaimDeck

ClaimDeck

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

Cocktail Courier Case Study Image

Retail/eCommerce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Compliant DTC Website Case Study | Cocktail Courier

BigCommerce-logomark-whitebg

BigCommerce

ShipStation

Avalara logo

Avalara

stripe

Stripe Icon

Cocktail Courier

Modernizing vehicle maintenance management in the car rental space

Hertz Case Study Image

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

Vehicle Maintenance Management in the Car Rental Space | Codal

Node JS logo

Node JS

Microsoft Azure

React

Oracle

Auto Integrate

Hertz

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

Cosori Case Study Image

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

Cosori came to Codal in need of an eCommerce transformation. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Headless eCommerce Case Study | Cosori

Builder.io Logo

Builder.io

Cosori

Connecting culinary buyers and sellers with an effortless shopping experience.

Orderve Hero

10,000+

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

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

Intro

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

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

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

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

Strategy

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

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

Design

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

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

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

Culinary Marketplace Design Case Study | Orderve

InVision logo

InVision

Orderve

Establishing a superior online presence for an innovative brand in the mobile banking space.

MANTL case study image

Financial Technology

In the winter of 2021, MANTL came to Codal in need of a UX redesign. With its legacy website, the brand was struggling to generate leads, keep users engaged, and meet its conversion rate goals. 

With over a decade of experience designing, developing, testing, and deploying websites and applications in the financial services space, Codal was a perfect fit for this project—and our team was eager to get started. 

MANTL was experiencing low conversions and high bounce rates on its website. Most users were not advancing beyond the homepage, requesting product demos, or interacting with the site’s blogs and other content. 

Our mission was to improve these metrics with modern UX design, driven by data and cutting-edge technology. 

At the time, the MANTL platform was just designed to streamline business-account openings. So adding the new consumer-focused product played a big role in the company’s rebranding and UX redesign. 

Now that MANTL offered an onboarding solution to banks for both individual and commercial customers, the brand’s website needed to reflect that. When potential customers visited the site, it was imperative that they could quickly and easily: 

- Understand the high-level features and functionality included in the consumer-account and/or the business-account opening product. 
- Learn about the platform’s key benefits, like the fact that it can increase account application submissions by 4x. 
- View case studies to see real-life examples of how MANTL has helped banks enhance their customer experience. 
- Request a product demo from anywhere on the site. 

Once our team was aligned with the MANTL team on goals, requirements, timeline, and budget, we were ready to kick off the project. 

In the initial Discovery phase, we learned the ins and outs of the MANTL brand, as well as its current sales and marketing processes, customer base, and competitors. This involved conducting market research, analyzing website data, and reviewing the business’ front- and back-end technologies. 

During our Discovery, we found that 60% of users who landed on the homepage would leave without any sort of interaction. This meant that the homepage and navigation bar needed to be updated with a smoother, more engaging user flow. 

We also found that over 20 news articles had been published about MANTL in the past year, but that these articles were only available on the About Us page. What other people say about a brand is arguably more important to potential customers than what the brand has to say about itself—so we decided to promote news content by giving it its own section on the homepage. 

On the product side of things, we needed to reestablish MANTL as a multi-service provider that focuses on both business and consumers as the end user. This would involve building a new product page for the consumer platform, as well as redesigning the homepage to include quick facts and statistics about both products. 

The lack of CTAs was another issue that needed to be addressed. To improve conversions, it was essential that users could—at any point in their journey—click the “Request a Demo” button, fill out a basic contact sheet, and be connected with a sales representative. 

Finally, the website needed a responsive design, so that users could access it via smartphones, tablets, and other devices—without experiencing issues like stressful design layouts or slow page loading times.  

Codal and MANTL met once a week over Zoom to go over designs, demo new website features, and address any potential risks or opportunities moving forward. Our team was in constant communication with MANTL’s stakeholders, SMEs, and marketing personnel to collect feedback on our designs, and ensure that all project requirements were being met. 

Codal elevated MANTL’s online presence by redesigning critical aspects of the UX, including the site’s homepage, product pages, careers page, blog, contact forms, and case studies. 

Specifically, these are some of the key features and functionalities our team designed, developed, tested, and deployed to enhance MANTL’s front-end experience: 

- Components across the site that allow future additions of content whilst remaining on brand.
- Locked case studies that site visitors can download by providing their contact information, which helps generate leads for the sales team. This also helps optimize follow-up emails to prospects, as the salesperson can formulate their messaging based on the specific case study that was requested.
- A new resource library that includes copy and media for a range of audiences—with the added benefit of locking particular materials, then delivering them to visitors that have submitted interest.
- An internal landing page builder to help the sales team create tailored landing pages for events and unique marketing campaigns, without going off brand.
- A careers portal integration with Greenhouse’s recruiting software, so users can view and apply for jobs without having to leave the MANTL site. 
- An enhanced sales funnel that integrates with Marketo’s marketing automation software. The site can now remember if a visitor has already provided their contact information, so they don’t get asked to provide it again, and can continue accessing unlocked materials.

MANTL’s updated website now performs better in search engines, experiences stronger user engagement, and converts more site visitors into leads for the sales team. 

We’re incredibly proud of what our team was able to accomplish on this project, and we’re excited to see how MANTL continues to grow and innovate in the world of online banking. 

Establishing a superior online presence for an innovative brand in the mobile banking space

Innovative Brand in the Mobile Banking Space Case Study | MANTL

Wordpress logo

Wordpress

MANTL

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

Together,

we can do great things.

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

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

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

Facebook

Twitter

Instagram

LinkedIn

Codal

View all case studies

Recent case studies

See all insights

Codal insights

Let’s collaborate 

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

Together

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

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

Solutions | Codal | Top Digital Agency in Chicago

That’s not all we have —

Find more in our portfolio

Please provide additional information about your project below.

Thanks for reaching out.

No matter what the challenge,

Codal has the knowledge and experience to solve it.

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

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

Solution Hero Visual Common

product design and development icon

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

Our product design & development process

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

Our product design & development solutions

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

Product Design & Development | Codal | UX Design Agency

Product design and development 

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

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

e commerce

Check out our five-step process to eCommerce projects - 

Our eCommerce design & development process

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

Our eCommerce solutions

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

eCommerce Website Development Company | Codal

eCommerce

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

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

human

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

Our service design process

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

Our service design solutions

Service Design | Codal | Web Design and Development Chicago

Service design

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

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

bars

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

Our data strategy process

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

Our data strategy solutions

Data Strategy | Codal | Digital Consulting Firm

Data strategy

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

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

layout

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

Our microservice architecture process

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

Our microservices architecture solutions

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

Microservice Architecture | Codal | Web Development Services

Microservice architecture

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

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

replatforming

Check out our five-step process to modernization projects - 

Our modernization process

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

Our modernization services

Replatforming | Codal | Web Development Company Chicago

Modernization

Our solutions

We’re proud of what we do — 

Case studies

Did we pique your interest? — 

Contact us to learn more about

We've partnered with big brands and enterprise organizations to design and develop innovative solutions to unique problems. Take a look at our past collaborations to learn more about what we're capable of creating.

it might interest you —

More case studies

Check out Codal’s in-depth case studies, successful projects, and award-winning digital solutions. Our work speaks for itself.

The Project

Technologies