Screenshot of a computer screen displaying a TikTok-style video with a person's face, text overlay, and a blue background.
Quickbase logo with multicolored squares to the left of the word 'quickbase' in black bold letters.
Screenshot of a user management interface showing user roles and statuses with a list of user names such as Sybil Shearin and Andrew Kleppner, along with their roles and last visited dates.

Before: The color scheme lacked harmony, inconsistent text, and outdated elements.

A badge award from Inc. recognizing Quickbase as the 2022 winner for Best in Business in Software as a Service.

Quickbase is renowned for its application platform that simplifies the management of complex work at an enterprise scale. However, the web application suffered from a lack of visual harmony, inconsistent text usage, and outdated design elements. This misalignment not only affected the user experience but also the brand's professional appearance.

Before: The web application showcased a mix of old and new design elements, leading to a disjointed user experience. The color scheme was inconsistent, and there were varying interaction patterns across different pages.

Project Details

  • Client: Quickbase

  • Project Duration: Contracted March 2023 to June 2023

  • Role: UX Designer

  • Team: Project Managers, Content Designers, and Engineering Team

Screenshot of a quality control management dashboard with charts and tables displaying issues like equipment failure, malfunction, and operator error in a factory setting.
Screenshot of a computer screen displaying a database table in Quickbase, listing user information such as name, user ID, email address, username, role, permissions, user status, and last visited time.

“Quickbase is the first application platform built for dynamic work, where it’s easy to see, connect, and control your most complex work at enterprise scale. - Quickbase Website”

Research and Familiarization

Studied the existing design system and its atomic design principles.

Analyzed outdated pages for inconsistencies and design gaps.

Collaborated with project manager and content designers to understand user pain points.

Aligned with team members on project goals and requirements.

Collaborated with the engineering team to understand technical specifications and feasibility.

Created new atomic design elements that followed design system guidelines.

Quickbase embarked on a web application repaint project from March 2023 to June 2023, with the goal of updating outdated pages to align with their new design system. The project aimed to address visual inconsistencies and outdated elements, thereby enhancing the user experience. This case study outlines the process and methodologies employed by the UX design team to achieve a refreshed, cohesive web application design.

“Aesthetically pleasing interfaces are worth the investment. Visual designs that
appeal to your users have the side effects of making your site appear orderly, well
designed, and professional. Users are more likely to want to try a visually
appealing site, and they’re more patient with minor issues. ”
— Nielson Norman group

Intro

A cartoon illustration showing a woman and a girl, both with dark hair, sitting in front of a computer. The woman appears to be guiding the girl, who is looking at the screen. The background contains colorful shapes.
Screenshot of user management interface showing user roles, statuses, and last visit dates.

After: Refreshed design with improved typography, modern icons, and organized tables.

Visual Design and Iteration

Utilized Figma for high-fidelity mockups, incorporating new atomic elements.

Iterated designs based on team feedback.

Collaborated with content designers for content integration.

Laptop screen displaying the Quickbase app interface. A pop-up window titled 'Connect fields from Quickbase' shows a list of contact fields and options to connect them to Quickbase, with a highlighted 'First Name' field. The background contains browser tabs and a sidebar menu.
Laptop screen displaying a user-sharing window titled 'Share With a New User' with fields to enter email addresses and assign roles, and options to add users in another role or send email invitations. Background shows a blurred user list and menu.

Before: The web application showcased a mix of old and new design elements, leading to a disjointed user experience. The color scheme was inconsistent, and there were varying interaction patterns across different pages.

Problem Statement

The challenge was to update the existing web application's outdated pages to adhere to the updated design system. These pages lacked visual consistency, had varying interaction patterns, and required a revamp to provide a unified user experience.

Approach

The challenge was to update the existing web application's outdated pages to adhere to the updated design system. These pages lacked visual consistency, had varying interaction patterns, and required a revamp to provide a unified user experience.

Collaboration and Component Creation

Laptop screen displaying a web application interface titled 'Quick Base' for adding a new quick base application, with sections for table structure, user interface, and workflow permissions.
Laptop screen displaying a data management interface with a pop-up window to select data sources, including options for services, CSV files, email, and a sample data button.
Back to Portfolio
Next Case Study

Prototyping and Validation

Developed interactive prototypes using Figma and Axure.

Conducted internal usability testing to validate design changes.

Handoff and Implementation

Prepared detailed design specifications for engineering.

Collaborated closely during implementation, ensuring design fidelity.

Conducted design reviews with the engineering team.

Comparison of two computer screens displaying software interfaces. The left screen shows an outdated design with yellow icons and a traditional layout, labeled 'Before Outdated design and typography.' The right screen features a modernized design with updated system components, black icons, and a cleaner layout, labeled 'After Updated with new design system components.'

Results

Revamped multiple older pages, achieving visual consistency and a cohesive user experience.

Enhanced usability, aesthetics, and brand alignment of the web application.

Smooth design and development process facilitated by effective remote collaboration.

After the Repaint

Improved typography and modern icons contributed to readability and visual appeal.

Organized tables and clear page titles enhanced user orientation.

A contemporary and intuitive user interface was achieved through the redesign.

Key Learnings

Balancing technical specifications with design principles is crucial for creating new atomic elements.

Effective collaboration and communication are essential for successful project outcomes.

A deep understanding of atomic design principles is necessary to adapt existing design systems for consistency and scalability.

The Quickbase repaint project not only refreshed the web application's appearance but also set a precedent for future design projects, demonstrating the value of systematic, collaborative, and user-centered design approaches.