Desktop Shell

Responsive Design

This project focused on defining the foundational layout and structure of a desktop web shell that serves as the outer frame for all Alkami desktop product experiences. The shell includes consistent navigation, global headers, footers, and layout scaffolding, designed to be fully responsive across screen sizes and configurable through theming tokens. It was built to ensure brand flexibility for white-label use cases while maintaining structural consistency across features and platforms.

Impact

A responsive, themable web shell accelerates development, ensures consistency, supports white-label flexibility, and reduces design and engineering effort across products.

What are the perks?

Designed for All Screen Sizes

A responsive desktop shell ensures the product experience adapts seamlessly across devices - whether on large desktop monitors, laptops, tablets or mobile devices.

Utilizes the
Design Library

A defined desktop shell ensures that navigation, layout, and visual hierarchy remain consistent across all products and features while utilizing the Iris design system.

Multiple Layouts to Choose From

By leveraging design tokens and configurable variables, the shell can easily adapt to different brands, clients, or product lines without rewriting code or redesigning layouts.

Faster Development Times

With a prebuilt structure in place—including global headers, footers, navigation, and responsive containers, developers can skip foundational setup and focus on building feature-specific functionality.

The Audit

An evaluation of the current desktop shell revealed several critical issues affecting usability, maintainability, and overall product integrity. The shell lacked responsiveness, does not meet modern security protocols, relies on outdated libraries, and exhibits performance bottlenecks—all of which limit scalability and pose risk to the user experience and business.

1. Not Responsive

The current shell is built using a fixed-width layout that did not scale across screen sizes, creating usability issues on smaller screens and non-standard devices. This limits accessibility and increases maintenance effort for cross-device support.

2. Outdated Library and Frameworks

Core libraries and dependencies were outdated, lacking support for modern development practices and accessibility standards. This increases technical debt, compatibility issues, and security vulnerabilities.

3. Poor Performance

Heavy assets, unoptimized rendering logic, and lack of lazy loading contribute to slow load times and poor performance metrics. These issues degrade user experience and negatively impact search engine rankings and engagement.

The Foundation

Modernizing the shell improves the user experience, enhances performance, and reduces development risk. It enables faster development, supports scalability, and aligns with current web standards, positioning the platform for long-term success.

Breakpoints & Grid System

Rebuilding the shell using a responsive grid system and fluid layout principles to ensures cross-device compatibility.

A responsive desktop shell ensures the product experience adapts seamlessly across devices - whether on large desktop monitors, laptops, or smaller screens. This flexibility improves accessibility, expands user reach, and eliminates the need for separate layouts, making it easier to maintain a single, scalable design system that performs consistently in any environment.

The desktop responsive shell used Vuetify breakpoints to allow for compatibility with the new Iris design system using the same framework.

Performance Improvements

Improving performance is critical to delivering a fast, reliable user experience and reducing bounce rates. The current shell exhibits sluggish load times and inefficient rendering, which negatively affects user satisfaction and engagement. Key areas that were looked into for performance optimization: asset optimization, code splitting, reduce DOM complexity, caching strategies, improve Initial render speed and performance monitoring.

Faster Load Times

Shortens time to content, improving user engagement and satisfaction.

Improved SEO & Accessibility

Better performance scores improve search rankings and support assistive technology.

Lower Resource Usage

Especially important for users on low-end devices or slow connections.

Higher Retention & Conversions

A snappier experience directly contributes to user trust and business outcomes.

UI Theme Configurations

Theme configurations enable our clients to customize the look and feel of the interface without altering core functionality or structure. By abstracting visual and structural decisions into configurable tokens and settings, clients can adapt layouts, navigation styles, colors, background imagery, and branding elements to meet the needs of different users, product lines, or business segments.

Layout Options

Swap between top navigation or side navigation layouts based on product complexity or brand preference
Navigation dropdown styling
Body container configuration style for outlined, shadow or no style
Enable a background image
Custom logos
Custom footer layouts
And more...

Same Brand. Different Layout.

The Outcome & Business Goal

Establishing a responsive, themable desktop shell with performance optimizations, modern security, and scalable design system patterns creates a consistent, high-quality foundation across products. It accelerates development, improves accessibility, and enables faster onboarding through reusable layouts and components. By supporting brand flexibility and device responsiveness, the system reduces technical debt, enhances maintainability, and empowers teams to deliver cohesive, secure, and performant user experiences—ultimately driving efficiency, reducing costs, and supporting long-term product scalability.