Under Armour Case Study

Next.js Migration & Wholesale Portal Development Allows Retailer to Scale

UI/UX internationalization of Under Armour’s front end

The Opportunity: Increase Revenue by Enhancing B2C and B2B Product Discovery, Browsing, and Purchasing Experiences

Under Armour, a leading manufacturer and distributor of performance apparel, footwear, and accessories, is dedicated to investing in the infrastructure required to support its growth in the US, Europe, and globally. They aim to meet the rising demand for Under Armour products by improving their brand's customer, local retailer, and wholesale business experiences.

Under Armour faced challenges in a digital marketplace where site speed and user experience are crucial for e-commerce success. Despite a strong brand presence, their online platforms suffered from slow page loads, poor search engine visibility, and an outdated checkout process, hindering user engagement and revenue growth. Recognizing its shortcomings, Under Armour embarked on a comprehensive overhaul to ensure it meets consumer demands and stays competitive.

Furthermore, historically, businesses placed orders with Under Armour by directly interacting with a sales representative. To streamline and enhance this process, Under Armour sought to provide a wholesale self-service portal where businesses could access a customized catalog and place orders based on their specific needs. To achieve this, they required an international B2B ordering system capable of supporting all the languages and currencies of the markets they serve within the EU.

Our Response: Optimizing Under Armour’s E-commerce Experiences for Enhanced Visibility and Operational Efficiency

B2C: Improve Conversions Using Next.js to Optimize Product Pages for Search Engine Visibility

Site speed is crucial for e-commerce competitiveness, affecting conversion rates, average order values, and overall revenue. Google Core Web Vitals—metrics that assess page load performance—also influence visibility in search rankings. Designing an intuitive checkout process and optimizing content isn't enough, and a Next.js migration was essential to boost revenue and outpace competitors.

Leveraging Next.js for Increased Product Page Discovery

MojoTech transformed Under Armour's online presence by completely overhauling its front end. By migrating to Next.js, we introduced advanced prerendering capabilities, including Server-Side Rendering (SSR) and Static Site Generation (SSG), significantly enhancing SEO by accelerating page load times. These technologies enabled quick rendering of content-rich pages and optimized the performance of the integration layer, leading to a remarkable improvement in site efficiency.

Enhance Checkout and Purchase Experiences

MojoTech enhanced the checkout and purchase experiences on Under Armour's e-commerce platform, implementing functionalities to meet diverse consumer needs. We integrated SAP for streamlined shopping cart and checkout processes, ensuring a seamless and efficient transaction flow.

Additionally, we expanded payment flexibility by incorporating Buy Now, Pay Later (BNPL) services and multiple payment methods, including popular options like Apple Pay. These enhancements simplified the buying process and provided a more adaptable and user-friendly shopping environment, encouraging higher conversion rates and improving overall customer satisfaction.

B2B: Develop a Scalable Order Management System Leveraging Cloud-native Architectures

While this new system initially supported the EU, it would eventually underpin their North American B2B platform. As such, it was paramount that the system scaled to meet Under Armour's needs. In comes the power of cloud-native architectures and the technologies that enable it.

Service Separation

MojoTech swiftly identified natural system boundaries, enabling the segmentation of platform areas into distinct services. This strategy facilitated a seamless, incremental transition of Under Armour's server code from Scala to Go, leveraging existing Go subsystems already performing effectively alongside legacy services.

Flow chart for Under Armour’s cloud-native order management system

Containerization

MojoTech streamlined Under Armour's infrastructure by deploying each service in a Docker container explicitly designed for its function. With clear boundaries and minimal dependencies, these semi-isolated containers simplify future maintenance and enhance security by modularizing the environment. For instance, a container dedicated to user browser experience is restricted to that function alone, bolstering security and system management.

Orchestration

Using Kubernetes, we established a structured framework to define and manage production deployments and the interrelations between service instances. For instance, the Orders service is scaled to handle peak loads during high-demand periods, while the User Identity service maintains consistent availability. Additionally, we configured dependencies such that users interacting with a specific version of the carts service receive a corresponding version of the web service, ensuring a seamless user experience.

Product Search & Order Management

MojoTech enhanced Under Armour's product search and order management by integrating Algolia to create an advanced and intuitive search interface. This upgrade made product listings fully browsable and searchable, significantly improving user experience and platform accessibility. B2B customers can effortlessly locate products with refined search features that efficiently process queries and instantly deliver relevant results.

Results: $1B+ in Revenue from Across North America & the EU

MojoTech demonstrated its retail development prowess in leveraging Next.js technologies, culminating in significant enhancements to Under Armour's B2C e-commerce platform. The focused efforts on the North American market proved highly effective — achieving at least a fourfold increase in speed across all page types, with some key areas experiencing more than tenfold enhancements year over year. Some other key results include:

5% Increase in E-commerce Conversions: Technical upgrades led to a 5% increase in e-commerce conversions in one of Under Armour's largest markets.
Strong Performance During Cyber 5: Independent evaluations by web performance vendor Blue Triangle highlighted Under Armour's standout performance during the significant Cyber 5 shopping period.
Top Rankings for Largest Contentful Paint (LCP): According to Blue Triangle data, Under Armour ranked No. 11 among the Top 1000 retailers for the best LCP on Cyber Monday.

These external recognitions underscore the technical enhancements' tangible impact on market performance, linking strategic technological investments to substantial business outcomes.

Furthermore, Under Armour's global B2B wholesale order management portal exemplifies scalability, international reach, and accessibility. Built on a React front-end that integrates seamlessly into their cloud deployment environment, the portal supports custom catalogs, account management, order processing, and customer support through an API abstraction layer. This system enables Under Armour to efficiently serve customers across multiple continents — currently North America and Europe — with significantly reduced administrative overhead.