Fireflies.ai

UI Design Internship

Background

During the Spring 2017 semester, I interned at Fireflies.ai, a project management startup located in San Francisco, CA. Since I was in school at the time, I worked remote and part-time.

When I interned at Fireflies.ai, the company’s main product was a Slack bot that kept track of tasks as they were discussed in Slack conversations. As a support project manager, the bot used AI to auto-suggest action items and auto-route them to a Kanban dashboard.

Title

UI Design Intern

Date

January 2017 - April 2017

Status

Because Fireflies.ai has since pivoted, some of my work is not implemented anymore. However, my experience working for the company was invaluable since it allowed me to apply my skills to help real customers.

Responsibilities

  • Worked as the sole designer to produce high-fidelity wireframes for new product interface on desktop
  • Rebranded the company, including designing a new logo, color scheme, and investor deck, as well as deciding new fonts
  • Designed mockups for a new landing page that captured the product vision

Designing the Kanban Board

Challenge

As described previously, Fireflies.ai’s Slack bot auto-routed tasks to a Kanban dashboard. One of my projects was to design the desktop view of the dashboard.

Working with the CEO and a front-end engineer, I researched other project management products to draw inspiration, and discussed features to include in Fireflies.ai. My main job was to take low-fidelity wireframes and create pixel-perfect, high-fidelity mockups in Sketch, including creating original icons.

A low-fidelity wireframe I transformed into a high-fidelity mockup

Iterations

Since the Kanban board routed tasks from Slack channels, I wanted the left side-panel of the board to resemble that of Slack. The similar layout would allow users to easily navigate to different channels in the board, which correlate with different Slack channels. At the same time, the obvious differences between the remainder of the board’s layout and Slack’s layout would prevent confusion; users would immediately realize which product they are currently using. Below is one of my early iterations of the Kanban board.

However, the cards-style of this iteration didn’t accurately convey a significant function of the board - We wanted users to be able highlight and copy+paste tasks on the board, like in a word document.

Solution

To fix the problems identified in the “cards” iteration, my final mockups had more of a “paper” feel. I also expanded on my designs for the right side-panel to include the appropriate features.

Style Rebranding

Challenge

Fireflies needed a style and branding makeover that suited the product. Below are snapshots of the previous branding.

Old Logo

Old Landing Page

Iterations

I worked closely with the CEO as I iterated on the style rebranding. Some points I kept in mind were:

  • Although Fireflies.ai is an enterprise product, it should have a fun color scheme to delight users and avoid a boring, “corporate” feel.
  • The old color scheme was primarily orange and blue, and the new color scheme shouldn’t deviate too wildly from that - the new color scheme shouldn’t make the product unrecognizable.
  • Blue seemed like a good primary color. The color blue is associated with trust, security, and order, which is perfect for a project management tool.
  • The color scheme should be bright/saturated to convey a modern feel.

Solution

The final color palette showcases a variety of bright, fun colors. I also included a dark purple since I knew I would need a darker shade for the UI of the Kanban board. I decided on two gradients, which I later used for the landing page. The pink gradient and blue gradient were derived from the previous orange and blue color scheme. As explained previously, I thought blue was a good color to keep. However, I changed the orange to a pink since I also wanted the colors to be saturated, and a saturated orange does not go well with many colors.

I applied the new colors to the logo. I also increased the stroke of the icon to match the font weight. Because the color logo may clash with the background color, the designer should use the monochrome logo when the background isn’t white.

I also decided on new fonts. I kept the font of the “fireflies.ai” logo in Avenir Roman, since it was already strongly associated with the company. For the Kanban board and landing page body text, I chose Open Sans, a simple, easily readable font. To balance that and add more uniqueness, I chose Nunito Bold for headers on the landing page.

Landing Page

Challenge

After finishing the style rebranding, I needed to revamp the landing page as well.

Iterations

I initially tried going for an illustrative landing page that embodied the “fireflies” theme. However, I realized that although an illustration could be aesthetically pleasing, it doesn’t convey the nature of the product.

Solution

Instead of using an illustration that was purely aesthetically pleasing, I created a graphic that showed users how the Fireflies bot could help them. The final graphic depicts Fireflies leading a conversation to become a completed task. I included humans in the graphic, so users can more easily imagine how Fireflies can help actual people manage their projects successfully.

Besides creating the main graphic, I also designed the overall layout of the landing page. Although my internship ended before I could finish all of the graphics, I used placeholders to establish the overall layout.