just some happy interns :)

Role

Visual Design Intern

Team

Product Design

Timeline

June 2019 - August 2019

Introduction

In the summer of 2019 I had the opportunity to intern at Cvent in their UX department. As the sole Visual Design Intern, I participated in a wide-range of different products all contributing to the visual identity of our new design system.

role: visual design intern
team: product design
timeline: june-aug 2019

Background

When I joined the team, there had already been around a year of development of Cvent's new design system. Therefore, I had to learn it pretty quickly in order to adapt to the look and feel of Carina (our design system). My manager had me look over the research behind the design system to better understand the reason behind its design. This was pivotal in successfully completing any design project I was given throughout the summer.

Iconography

When I joined the team, we had a small catalog of Carina icons but it wasn't robust enough for designers. Therefore, I was tasked with "Carina-fying" our pre-existing icons as well as designing original ones that I felt would be needed and well used by designers.

In Sketch, I looked at the library that already existed to better understand what style I should be designing in. It was important these new icons matched the look and feel of the already existing ones. Curved edges, thick lines, and minimal detail were all things that instantly stuck out to me.

In my first set, I designed approximately 40 new icons to be added to our Sketch library for designers to use. However, the fun didn't stop there — after I created this initial set, I set up a backlog in our internal wiki page to better organize requests for needed icons by designers. I maintained these requests all summer, designing new icons as they were needed.

In addition to the icons themself, I created a comprehensive guidelines page for the creation and usage of the icons for designers and developers. This took an in-depth examination of the library to see what guidelines could be written that would apply to all of the icons.

Button States

Problem

As we were designing and redesigning certain components for our component library in Carina, we came across buttons that had been designed a while back but as our standards had shifted, they didn't seem to hold up. They felt too dark, lacking the firm, tactile touch that makes you feel like the ruler of some powerful kingdom in a far off land. Or more simply, they didn't leave the user feeling excited about the actions they were taking.

previous button states

Exploration

So I took on this challenge of bringing some excitement back to buttons. My first step was to look at other design systems to see what they were doing and try modeling the interaction on the look of our buttons. It was important for me to prototype each option I designed so I could physically feel the interactivity of the button.

Ant Design System

Shopify Polaris + Carbon Design (same as previous design)

If i'm honest, I was a little disappointed with what I found in other design systems. They didn't excite me like I know buttons have excited me in the past. So I set out to the world wide web to look for more creative examples of button interactions to see if I could get #inspired.

Below are some examples that I found that really sparked some creativity in what was possible for buttons within our UI.

slight change in text size (source)

dual interactions (source)

multiple forms of animation (source)

It occurred to me after looking at these different examples that they all had something in common - when you pressed it, some element within the button changed size. I was drawn to this type of interaction, so I wanted to take it and simplify it a bit to fit better within a busy UI.

Prototyping

Below are some of the different variations of button states I created as a result of my research.

enlarged hover; shrunk pressed

darker hover, shrunk pressed

Solution

After exploring state changes through coloration, drop shadows, sizing, and more, I came up with this final design where the button shrinks just a bit (to 94% of its previous size, to be exact) in its pressed state. Thus removing the need for the dark, dreary blue that was once used to tell user the button had been pressed while making the button more playful and tactile.

Data Visualization Color Systems

One large part of Cvent's product is data visualization — charts, graphs, and other forms of showcasing the data behind the user's event. In an attempt to expand our current color system for various forms of data visualization, I was tasked with creating some potential options for Carina.

*The blue strips on the side are to mimic the feeling of being within the Cvent UI.

A. This was the first option that I created. It was filled with colorful gradients which I thought gave the charts a more youthful, modern, and inviting look to them.

B. In this option I went a little more experimental. Carina's core colors were blue, green, and purple, so I thought about using the charts and graphs to spark some energy with warmer colors.

C. I took a break from the wild colors and tried a monochromatic style. I was worried about there being too much blue in the UI, but I thought it wouldn't hurt to try.

D. This was the final option I created. After receiving feedback from the team, option A seemed to be everyone's favorite. This was an adaptation with slightly different color combination and ordering.

I like this one because it feels modern and energetic, it brings life to the data that is being displayed.

To develop the gradients for the each of the color systems, I used Lyft Design's ColorBox application to get a good range of color that didn't appear to muddy. I found this to be extremely useful because in the current system, the colors that we chose often appears too light or too muddy to be used within a UI, so doing this process completely eliminated that problem.

Miscellaneous Work

Over the course of my time at Cvent, I had the opportunity to work on a lot of different design projects that were more graphic and creative. Below are some of the works that I created for internal use at Cvent.

UI Developer Sprint Team Logos

UX Team Sticker Sheets

Carina Internal Slide Show

Reflection

This summer was truly a blast. Prior to this internship I had a TON of interest in UX, but virtually no experience actually working with it. I thought "UX Designer" was a job title in itself and didn't realize there is so much more that goes into the user experience of a product.

I really had no expectations going into the summer, but I had one goal of taking advantage of every opportunity possible. This experience was so transformational for me and my career aspirations. I discovered what I am extremely passionate about, I learned what kind of working environment I work best in, and I met some pretty amazing people along the way.

I can't stress enough how pivotal this internship was and how much I grew as a designer, creator, and person in the short span of 3 months. It was an amazing learning opportunity and I am so thankful to Cvent and everyone there that made me feel welcome and inspired me to dream big.

Enjoy this collection of pictures of me and my work friends :)