Modernizing a critical healthcare app with microservices and intelligent UX design

Baxter case study image

Baxter’s rich history of delivering transformational medical technology has not wavered due to its commitment to continuous innovation. Codal is honored to partner with an organization that helps medical professionals provide superior care to patients in the most critical of environments.

Healthcare

Founded in 1931, Baxter offers a wide range of technology solutions that empower healthcare professionals to provide smarter, more personalized care. The multinational company has a long history of creating transformative medical devices, which millions of patients and
healthcare personnel depend on every day.

The Project

With a typical hospital customer using up to 20 CRRT devices, there is potential for a significant amount of data to be uploaded to the cloud for analysis. 

As part of its commitment to superior customer service, Baxter wants to ensure its sales representatives are armed with this data to help customers monitor the performance of their devices. This includes checking that the devices are functioning properly, reviewing if hospital staff are using the devices correctly, considering ways to optimize the use of the devices, and watching for signs of degradation over time. 

Frustrations around poorly visualized data shared via printouts encouraged the company to pursue an iPad application for its sales reps. This app would incorporate data points present in the previous printed reports, along with additional KPIs.

Codal’s challenge was to create a system for extracting this high volume of data from the cloud, analyzing it to provide necessary feedback, and packaging it in an attractive and user-friendly mobile app—which the Baxter’s sales reps could utilize to have more impactful conversations with customers. These conversations ultimately lead to more effective approaches to treatment in the most critical of hospital environments.

The Challenge

Codal spent months learning the ins and outs of Baxter’s legacy system for collecting, storing, and analyzing data from CRRT devices. 

Working in close collaboration with the company’s internal subject matter experts, our team determined the most relevant key performance indicators (KPIs) for data analysis. With each CRRT device consistently reporting tens of thousands of data points, it was essential to determine set metrics to be drawn from that data to provide the best possible understanding of how a CRRT machine was functioning. 

This collaborative process was crucial because it provided us with a firm grasp on how CRRT data could be categorized and streamlined to provide a holistic picture of each individual devices’ performance.

Codal conducted extensive interviews with business stakeholders and different types of users. Our UX team visited hospitals in Cincinnati, OH and Louisville, KY to connect with physicians, nurses, and other hospital staff—with the goal of understanding how users interacted with the existing data reports, how they used them to improve the effectiveness of CRRT devices, and what they were looking for in a new platform that would make their jobs easier. These in-person interviews provided valuable perspective on what’s important in the day-to-day grind of these medical professionals. 

Discovery

Once KPIs were determined, Codal began setting up a robust, scalable microservices backend to manage the data. 

Amazon Web Services (AWS) Lambda provided a fast, cost-effective platform to handle the significant amounts of data coming from the CRRT machines. Our team used AWS Relational Database Service (RDS), Redshift, and Elastic MapReduce (EMR) to store and analyze the data and calculate the determined KPIs with high accuracy. 

Additionally, we used Realm.io to enable the analyzed data to be accessed in the application offline—an essential feature for sales representatives when visiting clients with unreliable network connectivity. 

Codal also worked alongside the company’s internal IT department to integrate the app with other critical systems. For example, Baxter’s internal user directory was connected, ensuring that employees could easily gain access to the app, using Okta as an authentication layer.

Our UX team set out to establish a superior information architecture for the app. After creating a sitemap to layout the screen hierarchy, we mocked up some high-fidelity wireframes. Designed to help craft a fast and intuitive experience for users, these wireframes were iterated via feedback from the internal team. 

Codal incorporated some data charts from Highcharts, but the complexity of the KPIs called for many of the charts to be designed from scratch, in order to provide the right level of visualization. Once we had wireframe approval from the client, our UI team got started implementing key design elements to create a truly aesthetically pleasing mobile app. Finally, we effectively incorporated the company’s colors, fonts, and branding elements to ensure a consistent and intelligent UX.

Development

After combining a powerful, scalable backend for extensive data storage and analysis with a smooth and engaging front-end user experience (UX), Codal delivered a superior mobile application for the Baxter team. 

This application was showcased at the 2021 AWS re:Invent conference in Las Vegas, where representatives from Baxter were invited to speak about digital innovations in the healthcare space. 

With the ability to transfer massive amounts of data into easily digestible reports, the app represents a powerful tool for the company’s sales representatives. Reps can compare the CRRT data of multiple hospitals, understand just how well an individual customer’s devices are functioning, and provide suggestions and feedback to help a hospital get the most from its CRRT devices. 

With localized instances for sales reps and customers around the world, as well as the offline capability to ensure connectivity when visiting customers with spotty or non-existent network coverage, this mobile app is an invaluable tool for strengthening customer relationships and ensuring Baxter’s technology is making a positive difference in hospitals every day.

Ultimately, Codal delivered a mobile app that helps hospitals better understand their AKI treatment programs and improve operational performance in the ICU. This in turn lowers the cost of therapy and decreases treatment downtime, as well as ensures that patients are receiving the safest treatment possible, and that hospital and ICU teams are adequately trained. 

Baxter’s rich history of delivering transformational medical technology has not wavered due to its commitment to continuous innovation. Codal is committed to helping improve the healthcare industry with cutting-edge digital technology, and we’re honored to partner with an organization that helps medical professionals provide superior care to patients in the most critical of environments.

The Result

Modernizing a critical healthcare app with microservices and intelligent UX design.

Microservices Healthcare App Case Study | Baxter

Baxter

Building a platform to help teachers manage their workday.

Tappy case study image

Education

The importance of a quality educator cannot be overstated. 88% of people believe that their teachers had a significant impact on their life. Meanwhile, the average teacher currently works 400 hours of overtime each year. 

Unfortunately, today’s educators are overworked, underpaid, and ultimately not receiving the resources they need to do their job successfully. This is leading to high burnout and turnover rates in schools, as well as a general lack of interest in teaching as a profession. Now, companies like Tappy are stepping in to help solve this crisis. 

In January of 2022, Codal teamed up with Tappy to help digitally transform the education space.

There are many different types of teachers—and some are more organized, or more proficient in certain areas, than others. When designing this platform, the first task was understanding exactly who would be using it. Who are our target users? What are their biggest challenges? Which administrative duties take the most amount of time? What tools do they currently use to streamline their daily workload?  

We also needed to understand what competing products were already available on the market. By analyzing similar platforms, we could learn from their UX and UI, identify strengths and weaknesses, then leverage those findings to design a superior product. 

From there, we needed to put together a roadmap to success, then execute that plan while remaining on time and within budget. 

In the Discovery stage, our team conducted interviews with stakeholders—that is, members of the Tappy team—to gain a full understanding of their aspirations, requirements, and initial concerns regarding the platform. 

We also conducted user interviews, which meant chatting with different types of teachers to continue gathering and prioritizing project requirements. Since Tappy is a company made up of former educators, we were able to gain a lot of insight through our stakeholder and user interviews. 

With this information, on top of our external market research findings, we were able to put together a comprehensive list of features and functionalities.

__The first phase__ focused on designing, developing, testing, and launching the platform’s most viable product (MVP): lesson planning. For this, our team created a UX and UI to facilitate the following workloads: 

- Creating lesson plans from scratch or a template. 
- Establishing learning objectives for each lesson plan.
- Accessing previous lesson plans, making changes to them, and comparing them against others in the system. 
- Organizing lesson plans via an intuitive scheduling tool with different views to choose from, such as a calendar or list. 

__The second phase__ focused on building out features that would help users execute their lesson plans in real time. This included:

- Accessing lesson materials such as worksheets, quizzes, assessments, and so on. 
- Starting the lesson by pressing “Play” or otherwise putting it in “Presentation” mode.
- Monitoring the pace of a lesson and setting reminders to ensure the classroom stays on schedule. 
- Reviewing lesson instructions to help better explain instructions to students.
- Viewing a class roster with every student’s name and contact information.

__The third phase__ focused on student enablement. We designed the platform to support, and ultimately streamline: 

- Grading tests and homework assignments.
- Administering student self-assessments. 
- Receiving real-time reports on student progress. 
- Taking anecdotal notes for individual students.
- Predicting a student’s future progress based on data algorithms. 
- Setting specific goals and learning objectives for individual students. 

__The final phase__ focused on peer collaboration. This meant creating UI elements to facilitate:

- Scheduling meetings and workshops with other teachers in the user’s district.
- Sharing notes, lesson plans, and curriculums with other users on the platform.
- Requesting feedback from peers via a beacon button.
- Conversing with other users through an intuitive discussion board.

Codal partnered with Tappy to build a fast, responsive, and user-friendly platform that helps educators stay organized, collaborate with their peers, and provide the most valuable experience possible for their students. 

Our team is still working with Tappy to help maintain and support the platform. This involves making regular UX and UI updates, preventing bugs and other issues before they occur, and identifying opportunities for improvement—based on user behavior and feedback, along with new industry trends and technologies. 

Codal is proud to work with companies like Tappy to help modernize the education space—and ultimately make the world a better place—via cutting-edge digital solutions. 

Building a Platform That Helps Teachers Case Study | Tappy

Wordpress logo

Wordpress

Tappy

Helping businesses maximize the value of their data through an innovative platform.

Marketing Attribution case study image

Marketing Technology

Marketing Attribution offers a suite of tools to track customer journeys, website interactions, internal expenses, ROI, and other marketing performance metrics—helping businesses to better predict and forecast sales numbers. Marketing Attribution approached Codal to build a user experience (UX) for its platform from scratch.

The Marketing Attribution platform needed a seamless and engaging UX and UI, where massive amounts of data could be translated into digestible, actionable insights for customers.

Codal collaborated closely with the Marketing Attribution team to understand the legacy platform’s biggest pain points and improvement opportunities. In addition to understanding existing user flows and processes, our team conducted in-depth market research to better understand client needs and expectations, as well as how Marketing Attribution could potentially differentiate itself from the competition.

After a deep dive into the Marketing Attributions platform and its users, our UX designers began mapping out the best way to translate massive amounts of data into a straightforward and visually appealing format. 

This began with an intensive information architecture stage, where we decided on a modular design approach—using intuitive dashboards to keep tasks, graphs, and charts neatly organized and easily accessible. Feature prioritization revealed a need for marketers to customize these dashboards to fit their specific business objectives. 

After cementing the platform’s information architecture, Codal began mapping out user flows, charting the client’s journey from onboarding to task completion.

Our UI designers created menu, table, chart and button styles that would ultimately give the platform its unique look and feel. We also created a stylesheet to help guide future designers on the platform’s colors, fonts, gradients, and so on. 

Finally, while primarily a desktop experience, our design team made sure that the platform was both mobile- and tablet-responsive.

Marketing Attribution helps businesses achieve their sales and marketing goals by providing a smart, user-friendly data analytics platform—which was designed, developed, tested, and launched by Codal. Our team knows how to maximize the value of data from various sources via cutting-edge tools, and we’re proud to help organizations achieve this through our partnership with Marketing Attribution.

Innovative Data Analytics Platform Case Study | Marketing Attribution

Marketing Attribution

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

MANTL case study image

By implementing MANTL’s self-service platform into their onboarding process, banks can not only improve the customer experience, but also cut costs and increase operational efficiency. 

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

MANTL

Establishing an engaging UI text persona through extensive user research & testing.

Samsung case study image

Electronics

Codal partnered with Samsung to establish an effective UI text strategy, recommend changes, and define best practices for a superior user experience across its mobile footprint for the North American market. A long-time proponent of user testing, Codal helped Samsung’s stakeholders see its value and embrace it as a vital step in enhancing the user experience.

As part of its value proposition, Samsung strives to provide a streamlined, intuitive mobile user experience. Seeking to provide a consistent and inclusive experience for all users, Samsung is committed to ensuring its mobile UX helps users quickly navigate through tasks and focus on what really matters to them. 

An essential component of this accessible UX is a clear and concise UI text strategy. Samsung is a large company that innovates at an extremely fast pace. As Samsung continues to unveil new, cutting-edge features and applications for its mobile devices, it’s crucial that the text within these features and applications is governed by an effective strategy. Ultimately, this strategy ensures consistency across all text in Samsung releases and serves to reinforce Samsung’s unique brand persona and value proposition. 

Codal’s mission was to build a strong UI text strategy with a user-friendly messaging structure for Samsung mobile devices and applications. In a multi-phased approach, Codal set out to analyze Samsung’s UI text, compare it to its competitors, and outline a high-level strategy—including a new persona, voice, and tone for Samsung text. Then, Codal aimed to provide a set of actionable recommendations to existing Samsung mobile content, backed by extensive user testing.

Codal began by undertaking a content audit of Samsung’s mobile devices, as well as those of its competitors Apple, Google, and Huawei. Our team analyzed nearly 250 individual screens per device. Reviewing the tone, voice, diction, and structure of the text on each of these screens, we ascertained and articulated each brand’s unique UI text strategy. Using adjectives such as “detached,” “thorough,” “casual,” and “poorly expressive,” Codal’s content analysis detailed the positives and negatives of each device’s UX text.

This audit was crucial to understanding the nature of Samsung’s UI text in its current state, as well as how it stacks up to the competition. But more context was needed to truly grasp Samsung's brand persona, how the text is conveying it, and what improvements can be made to it.

Codal conducted brand-consumer research to extract a solid impression of how Samsung and its competitors are viewed in the marketplace. Pulling data from two of the largest market research providers in the U.S.—Resonate and comScore—our team gained valuable customer insights for each brand. 

Our team determined that while Samsung's existing UI text was helpful, friendly, and approachable, it was also neutral and lacked an engaging disposition. Our objective was to revamp and modernize Samsung’s mobile UI text, making it bolder, more confident, and empowering. 

Phase two of the engagement saw Codal undertaking extensive user testing to determine how to best make improvements. With the goal of evolving Samsung’s UI text to be more engaging and accurately reflect its brand persona, our team targeted UI text improvement opportunities within multiple touchpoints and applications on its mobile devices.

To gain perspective and understand direct user data, we developed a user testing strategy with three distinct rounds of qualitative testing. Codal worked with a premier Chicago-based research firm to recruit participants and create a secure remote testing environment that allowed users to participate in sessions from the safety of their own home.

Finally, round three of testing saw participants engage with these revamped screens through an unmoderated, web-based environment. This round of testing served to validate changes made after the round-two analysis and helped our team receive necessary clarity on specific phrasing and word choices. 

After completing the user testing phase, Codal had a bevy of recommendations on how to improve Samsung’s UX text to more effectively reflect its unique brand persona. While participants responded positively overall to the existing Samsung context, Codal identified overarching themes that should be addressed to create a better user experience.

Based on our research and validation through testing, Codal recommended specific text changes and content principles in order to increase user experience comprehension, while creating a more consistent and engaging persona. These principles were intended to govern all UI text on Samsung’s mobile devices, ensuring consistency, and reinforcing the brand’s unique persona. 

Samsung needed a clear and concise UI text strategy to ensure an effective mobile UX for its cutting-edge devices. Partnering with Codal helped Samsung understand its value in relation to its competitors, and how this can inform its unique persona. Then, through comprehensive user testing, Codal ascertained issues with Samsung’s existing content and supplied tried and tested solutions to these based on key strategic principles. 

The result was a UI text strategy rooted in Samsung’s unique brand persona that helps the company provide a streamlined user experience for its mobile devices. Codal and Samsung, in close partnership, evolved the company’s mobile UX to be more engaging, accessible, and modern.

User Research & Testing Case Study | Samsung

Comscore

Resonate

Samsung

Helping an innovative pet food brand launch its first eCommerce website.

Nulo case study image

Nulo products are available in 5,000+ retail stores across North America, Forbes named it one of the “Top 25 Most Innovative US Brands” in 2016, and it boasts an impressive group of brand ambassadors—including professional athletes and well-known Olympians like Michael Phelps and Tara Lipinski.

Retail/eCommerce

While Nulo had found significant success in retail, it had not yet launched its eCommerce presence. Nulo needed a trusted development partner to architect and stand up an eCommerce site that would match the quality of its pet food products. 

Codal has extensive experience helping brands launch modern, cutting-edge eCommerce solutions without throwing a wrench in their operations. Our task was to help Nulo launch a transformational eCommerce site that would expand its digital footprint and increase revenue without a hitch.

Nulo needed to bring its customer experience online with a modern eCommerce website. 

Due to its scalability, reliability, and sophisticated app integration capabilities, Nulo chose to build its online store on the Shopify Plus platform. As a certified Shopify Plus partner, Codal is extremely familiar with the ins and outs of one the most capable cloud-based eCommerce platforms—and was therefore well-positioned to stand up Nulo’s first eCommerce site. 

Bringing to the table in-depth knowledge and experience around Shopify Plus implementations, Codal collaborated closely with Nulo stakeholders to fully understand the key goals and requirements for this new eCommerce site.

Working from 70+ designs provided by another agency partnered with Nulo, Codal developers got to work architecting its Shopify Plus site. 

Our team worked to tailor Nulo’s selected theme while building custom-designed pages from scratch. We also implemented an intelligent user interface (UI) to ensure easy site navigation for customers. Once developed, the site was pushed to a staging environment for initial testing, configuration, and migration. 

Nulo was operating an existing website built on the Contentful content management system (CMS). Data from this site—as well as many other different systems—needed to be migrated to its new eCommerce site. Codal engineers mapped out an extensive data migration process that ensured all relevant data was seamlessly transferred over to Nulo’s new Shopify Plus site. 

Among the features and functionality that our team implemented for Nulo’s eCommerce site was a complex product locator. Implemented using Destini, a leading product locator solution, the feature allows customers to easily find Nulo products available at retailers near them.

Representing its first foray into the world of eCommerce, Nulo’s Shopify Plus website is built for long-term success. 

Thanks to its flexibility and extensive integration capabilities, Shopify Plus was the perfect platform on which to build Nulo’s eCommerce business. Codal’s expert designers and engineers were able to identify exactly how to tailor the Shopify Plus platform to Nulo’s business goals. 

Thanks to our extensive experience in the space, Codal was able to help Nulo launch its first eCommerce site in under 10 weeks.

Pet Food Brand eCommerce Website Case Study | Nulo

Shopify Logo

Shopify

Nulo

Building a modern eCommerce store 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.

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

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

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

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

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

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

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

The Process

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

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

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

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

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

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

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

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

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

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

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

eCommerce UX Case Study | Garrett Popcorn

BigCommerce-logomark-whitebg

BigCommerce

Stencil Logo

Stencil

Garrett Popcorn

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

Together,

we can do great things.

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

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

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

Facebook

Twitter

Instagram

LinkedIn

Codal

View all case studies

Recent case studies

See all insights

Codal insights

Let’s collaborate 

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

Together

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

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

Solutions | Codal | Top Digital Agency in Chicago

That’s not all we have —

Find more in our portfolio

Please provide additional information about your project below.

Thanks for reaching out.

No matter what the challenge,

Codal has the knowledge and experience to solve it.

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

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

Solution Hero Visual Common

product design and development icon

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

Our product design & development process

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

Our product design & development solutions

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

Product Design & Development | Codal | UX Design Agency

Product design and development 

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

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

e commerce

Check out our five-step process to eCommerce projects - 

Our eCommerce design & development process

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

Our eCommerce solutions

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

eCommerce Website Development Company | Codal

eCommerce

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

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

human

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

Our service design process

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

Our service design solutions

Service Design | Codal | Web Design and Development Chicago

Service design

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

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

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