Honeywell: Design System Patterns

Overview

In the summer of 2023, I had an opportunity to intern at Honeywell as a UX design intern on the Honeywell Forge design system team. For 12 weeks, I worked alongside the team to design templates for common patterns that product designers to utilize when creating low-fidelity wireframes.

I worked on this project from end to end and was able to deliver templates, a component kit and documentation.

The Team

Solo-project

Skills

User research Product design Usability testing

Timeline

May - August 2023

Process

Introduction

Laying out the context

Problem Statement: It is difficult for university students to share experiences and connect with other students.

Methodology: We followed Alan Cooper's Goal-Directed Design methodology which emphasizes the user's goals through 5 phases of design: research, modeling, requirements, framework, and refinement.

Solution: An app that allows students to share their university experience, connect with other students, and source relevant university information.

My team designed an iOS mobile app called ComUni. The name itself bridges two our main ideas-- community and university; as we aim to foster and build community life within the university context.

SECONDARY Research

Understanding the domain

To gain an understanding of our potential users and how they may use our product, I led my team through qualitative research, competitor analyses, and user interviews. We began with our secondary research, asking one simple question:

How do students currently find and share information?

The goal of our research was to identify the different methods students currently use to source and share information related to their university. As students ourselves, we had various assumptions about what the findings of existing studies could look like, but our initial research still gave us some surprising results:

  • 70% of students preferred to use an app to access school related information while only 22% preferred their student email (Hesseling, 2019).
  • 73% of students feel most comfortable going to other students to share their perspectives on topics of importance (Ezarik, 2021)
  • 98% of college-aged students use some sort of social media platform to access information on a daily basis (Dossett, 2020)

Analyzing our competitors

We then took time to analyze 4 major products that provide students with campus-related related information. We ultimately found that many web and mobile services did not prioritize verifying users or ensuring content was relevant to the user's university, resulting in a cookie-cutter, surface-level experience.

USER Research

We interviewed five college students

Our next step was to speak directly with our potential users -- college students. We conducted our interviews virtually due to the varying locations of our participants to understand how they found and shared information and how an app like ComUni would align with their goals. I facilitated two of these interviews.

Our participants provided us with key information that gave us much needed insight:

"I usually check my school website but I wish the information was organized differently" - Junior, University of Central Florida
"As an international student, it was hard for me to find information about my university from current students" - Sophomore, New York University
  • All participants preferred to receive information about campus life directly from students.
  • Participants often visited social media sites such as YouTube, Instagram, and Reddit to get first-hand accounts from students at their current or prospective school​
  • 80% of our participants found that accessing the school website and going through official channels of communication was complicated and tedious.
  • Participants wanted campus-specific information on classes, facilities, dorms, campus life and diversity

After each interview, I led my team through affinity mapping sessions to identify patterns in user behavior and goals. This process helped us to visualize patterns according to topic that can later impact product requirements.

MODELING

Personifying our patterns

To ensure that our persona was both valid and relevant, our team identified the most consistent patterns of behaviors, goals, and motivations and crafted our primary persona, Melody Soto:

REQUIREMENTS

Translating user goals to app requirements

At this stage, our focus was transferring the findings from our research into design solutions that support the goals of our users. From the goals and subsequent pain points that our interviewees expressed, we wrote context scenarios that married their needs to potential solutions that would meet them. These narratives helped us to place our app in the context of the everyday life of our users, encouraging practicality over designer bias.

We then outlined a list of tasks that our users should be able to complete. At this stage, I functioned as a stakeholder to maintain the scope of the project and ensure that our features can have measured outcomes.

  • View a dashboard featuring university highlights, selected topics of interests and saved posts
  • Locate overall rating of their university
  • Create topics for discussion to ask questions or share opinions
  • Receive notifications about the most “reliable” posts
  • Save posts to view later
  • Earn badges by staying active on the app
Frameworks

Ideating and wireframing

Our team was now entering our most intensive stage-- brainstorming the framework for our app with our newly identified app requirements. To do this, we followed Alan Cooper's guidelines for creating keypath and validation scenarios. Our keypath scenario is our main user flow where a user selects a subgroup, views or contributes content, and looks at campus events. Our validation scenarios are any subsequent screens that support our main flow. This processes resulted in our initial lo-fi frames.

Starting with a (design) system

After functioning as a stakeholder to ensure the initial app flow and features met our business outcomes, I guided my team through our high-fidelity design process. Before we began designing, my priority was to design a well-defined design system to ensure our design felt refined and scalable. I played a crucial role in this stage as both a visual designer and the final decision-maker. Our goal was a clean and modern interface that would fit within an educational context.

REFINEMENT

Moving forward with hi-fi designs

The Refinement phase marks the transition from low-fidelity wireframes to a high-fidelity and fully functional prototype. With design guidelines now in place, I assigned my team members different flows to design screens for. We then prototyped our screens and interactions to deliver a hi-fi prototype to be tested.

Identifying the Problem

To help support a new 2.0 release, the design system is in need of a lo-fi component kit and common templates that use our guidelines for designers to reference when creating common patterns.

This problem statement clearly laid out my three main goals for my internship:

  1. Lo-fi components
  2. Lo-fi templates
  3. Documentation

Contextualizing the Problem

I looked at how leading design systems had structured their lo-fi component kits and templates to identify key elements that I could include to support these designers on my team. I found that many of these design systems chose to maintain a greyscale color scheme for all of their their low-fi components except for action elements such as buttons and step indicators.

thumbnails of IBM Carbon, Atlassian and Material 3 design systems

Understanding the User

As stated in the problem statement, my end users are the product designers that access the current design system. To better understand their needs, I met with some of the designers via a few informal interviews. These sessions helped me to identify some surface level needs or pain points the designers currently experience when rapid prototyping.

Takeaways

  1. Designers need to be able to quickly drop elements into their templates.
  2. Designers need templates for different devices that their products run on.
  3. Designers need to have clear instructions on how and when to use templates.

Iteration and Design

Based on the identified requirements, I utilized FigJam to brainstorm different layouts and solutions to address the needs of the designers and the design system team. A main priority was ensuring that the templates followed existing design system guidelines on spacing, grids, and more. This required a lot of reference to existing documentation and weekly check-ins with the design system team.

I structured my project around two main patterns dashboards and forms. I started by evaluating the hi-fi wireframes and identifying notable elements that needed to be translated to a lo-fi template. I then converted the needed components to lo-fi and designed a few iterations of common layouts.

Translating key hi-fi elements to lo-fi

Testing and Improvements

Based on feedback from 8 product designers + the design system team, I continually iterated my design.

Objectives:

  1. How easily product designers understand and interact with the low-fidelity form templates
  2. How well the low-fidelity form templates align with the existing design needs
  3. How easily designers can customize form templates using low-fi components

Final Designs

Dashboard 3:1 layout lo-fi template
Additional layout lo-fi templates
Dashboard right rail and global navigation interactions
Side panel form lo-fi template
Hi-fi and lo-fi components

At the end of my internship, I delivered a collection of templates for dashboard and form patterns, an accompanying low-fi component kit and documentation. These assets will be included in the 2.0 launch of the Honeywell Forge design system this summer. I was given stellar feedback from my mentor, manger and fellow design co-workers upon completion of my project.

Enjoying my time at Honeywell!

Reflection

Outcome: I led my team through to Goal-Directed Design process to deliver an extensive research report, design files, and a final stakeholder presentation. I learned so much wearing many hats throughout this 12 week project:

  • A Project of Many 'Firsts'
    This was my first large-scale design project as well as my first time leading a team of designers. I learned that I enjoy taking the lead to figure out a problem I have never faced before.
  • Managing Constraints and Limitations
    I learned how to guide my team through the many limitations that comes along with designing within an academic context such as time, access to resources and software.
  • Wearing Many Hats
    Due to the nature of this project, I had to function in many capacities. From stakeholder, to researcher, to designer, I developed so many skills and learned how to manage all my responsibilities to support my team as a design lead (another hat!).

At the end of my internship, I delivered a collection of templates for dashboard and form patterns, an accompanying low-fi component kit and documentation. These assets will be included in the 2.0 launch of the Honeywell Forge design system this summer. I was given stellar feedback from my mentor, manger and fellow design co-workers upon completion of my project.

Enjoying my time at Honeywell!

Next project