Alation

UI/UX Design Internship

Background

From May to August 2017, I worked as a UI/UX Design Intern at Alation, a startup in Redwood City, CA. Alation is the first data catalog built for collaboration. With Alation, analysts are empowered to search, query and collaborate on their data to achieve faster, more accurate insights.

Title

UI/UX Design Intern

Date

May 2017 - August 2017

Status

Some of my work is under NDA. Feel free to look through the design process for some of my projects below, or contact me if you want to hear more about my experience at Alation!

Responsibilities

  • Spearheaded the design of new features, from understanding user needs to rapid iteration with Sketch and InVision
  • Collaborated with PMs to fulfill product vision and stakeholder needs, as well as to create prototypes of requested features to sign new customers
  • Built high-fidelity prototypes with HTML/CSS and Framer.js for user-testing changes in the design system
  • Performed user research and conducted user interviews to determine direction of new features
  • Worked with engineers to extend the design system, implementing improvements across the product
  • Documented design specs for engineering teams, covering edge cases and constraints
  • Took the initiative in revamping the company mascot for marketing and in-product illustrations, giving users a delightful experience

Design System Improvement - Search and Table Filtering

Challenge

When users filter a table, how can we inform them that filter results are generated through matching characters? Below is a screenshot of the current design. The user has typed in “query” to filter the table, but nothing indicates that filter results all contain “query.”

Iterations

I began by drawing inspiration from products that use text styling to indicate matching characters, such as Google Search and browsers’ command/control+find functions. Next, I brainstormed and wireframed different text stylings using Chrome Developer Tools / CSS and Sketch. Below are a few ideas I explored and my reasoning for discarding them.

Orange highlight. Alation’s tint color is orange, which is often used to draw users’ attention to important information. However, the orange highlight looked too heavy and made the blue text difficult to read.

Orange underline. Since the orange highlight looked too heavy, I tried orange underline. However, the orange underline looked similar to red underline, which could convey that something is incorrect.

Blue underline. Blue is another one of Alation’s primary colors. Although blue underline was more aesthetically pleasing than the orange underline, the blue was not noticeable when the text was also blue. Also, blue indicates a link for Alation's design system, which could cause confusion.

Bolded text. This idea was eliminated since the bolded text did not look distinct enough. In particular, the bolded human text (under the table column “Title”) did not stand out. This is because the design system uses a font weight of 400 for regular text, and 500 for bolded text. To comply with the design system, I decided not to introduce a new, increased font weight in order to make the bolded text more distinct.

Solution

After more iterations, I ultimately decided on styling matching characters with bolded text and a more subtle, low-opacity orange highlight. I also made the filter icon orange, to convey the connection between the filter textbox and the filter results.

Extending the Solution

While iterating through ideas, I realized that two other features are very similar to table filtering. For Catalogue Search and Compose Search, results are also generated through matching characters.

Above is the then-current design for Catalogue Search, in which matching characters are bolded. The design isn’t updated to the newest design system, so the feature needed a makeover regardless.

Above is Compose Search, in which matching characters are underlined in orange. As explained previously, orange underline looked similar to red underline, which conveys that something is incorrect.

Because table filtering, Catalogue Search, and Compose Search all generate results through matching characters, I decided to implement my design for table filtering across all three features, to maintain consistency across the product. In a UI, consistency is key since users scan screens and make assumptions about a product’s function based on past experiences.

Final Solution across Table Filtering, Catalogue Search, and Compose Search

Design System Improvement - Actions Hidden Until Hover

Challenge

On Alation pages, icon actions are hidden until the user hovers over the element's container - on hover, the icon actions appear in teal, which in Alation's design system, signifies an action link. Because icon actions are initially hidden, some users can’t find them. For example, many users did not notice or search for the icon to edit the page’s description, since they assumed that only admins could edit the description. This was a problem often noticed by Customer Success due to its prominence throughout the product - almost every page had hidden icons.

Thus, my challenge was to inform users of the icon actions, but not have them distract the user and/or clutter the page.

*Please note that I blurred out some text in the following images to censor confidential information.

Current design - no hover

Current design - hover

Iterations

Like with the previous project, my process began with researching other products and drawing inspiration. Next, I used Chrome Developer Tools / CSS and Sketch to quickly mock up potential solutions. The following is a few solutions I explored:

  • Icons always visible in teal. This was too heavy and distracting.
  • Icons always visible in low-opacity teal, and become full-opacity on hover over container. Although the low-opacity teal was less distracting, it didn't comply with the design system, since low-opacity teal indicates disabled icon actions.
  • Icons always visible in light gray, and become full-opacity teal on hover over container. Although the light gray was also less distracting, using low-opacity light gray to indicate disabled actions would not be readable. Furthermore, light gray could be mistakened for low-opacity gray, which would indicate a disabled action.
  • Icons always visible in gray, and become teal on hover directly over icon (as opposed to on hover over element's container). This would require very precise hovering just to realize the icons are action links.

Solution

After numerous iterations, I decided on the following solution: Enabled icons are always visible in gray, and disabled icons are always visible in low-opacity gray. This way, users would not have to hover over an element's container to know whether or not the icon actions are disabled. On hover over the element's container, the icon actions would become teal, like the current design system.

However, I realized that having all icons always visible would be cluttering and distracting. Furthermore, some icon actions are used one time, such as the icon action to select the page template. These rarely used icons are most likely used by stewards, who are familiar with the product and trained to use it. On the other hand, some icons are used often by the average user, such as the icon to edit the description text.

Thus, I decided to split the icon actions into two categories: often used and rarely used. Often used icons would always be visible in gray (regular-opacity or low-opacity depending on whether or not it's enabled or disabled). Rarely used icons would be hidden until hover, like the current design. This way, the average user, who may not be as familiar with the product, would be able to find the often-used icons. Stewards would know that the rarely used, hidden icons exist.

In the solution mockups below, icon actions for Description are always visible in gray, since they are often used. The clock icon is low-opacity gray, indicating that it is disabled. Other icon actions, such as the edit icon for the Title and the icon to add a Tag, are still hidden (and thus not visible in the mockups) .

Solution - no hover

Solution - hover

Mascot Redesign

One of my projects was to redesign Alation’s HTTP error pages. The error pages needed a graphic, and I chose to revamp Alation’s robot mascot, Allie, to fill that hole. Drawing inspiration from existing Allie illustrations and models, I started by creating a typical "broken Alation" graphic, indicating an error.

Inspiration

Iterations for "broken Alation"

Then, I consulted engineers to identify the most common errors that occur. I designed different Allies depicting the nature of different errors.

One day, I had a bit of free time on my hands, and I began designing different expressions for Allie. Before I knew it, I had created “Allie Stickers” depicting 36 different emotions. My manager loved them so much that we selected our favorites and made sticker sheets as a surprise for everyone at the annual company retreat. My designs were used to decorate laptops, phones, and water bottles!

I went on to create possible design system elements to incorporate Allie throughout the product, giving users a delightful experience. Considering that revamping Allie began as a project to redesign error pages, this was definitely one of the coolest and unexpected experiences I had at Alation.