Summary
Background
Challenge
Solution
Takeaways

Timeline

1 week

Role

UI/UX Designer

Tools

Figma

Challenge

How can the present/prototype features be improved to?

Solution

A prototype experience that allows multi-presentation view.

Background

For the Kleiner Perkins Fellowship, the Design Challenge was to improve an existing app from their portfolio companies. I decided to focus on the user experience of Figma's prototype feature.

Challenge


1. How can we improve the prototype feature?
2. How can we accommodate the growing Figma use cases?

A. The current prototype feature

Dragging the starting frame blue play button.

The starting frame drag

The current prototype requires users to drag the blue play button to the target starting frame.

What works:

  • Easy when target frames are nearby
  • Can visually find frame

What can be improved:

  • If many screens, it's cumbersome to zoom out and find the correct starter frame
Dropdown menu for starting frame.

The dropdown starting frame option

Beside dragging the blue arrow, there is a dropdown for frames.

What works:

  • Instead of dragging, user can directly select the starting frame by its name

What can be improved:

  • It's not easy to recognize the frame name when there's a long list to choose from
One tab prototyping tab.

Presentation opens on one tab

Only one tab of presentation at a time.

What works:

  • Easily refreshes with changes

What can be improved:

  • Does not allow for capabilities such as presenting multiple user flows and comparing multiple starting frames side-by-side

B. Growing use cases

After attending Camp Figma, a weekend-long designathon hosted by Figma, I discovered the variety of use cases Figma has developed beyond its traditional prototyping function. I've highlighted a few below:

Prototyping

Prototype example on Figma.

Wire Framing

Wireframe use case of Figma

Slide Decks

Presentation deck on Figma.

Resumes & Layout

Resume and layout design

Solution

In the span of 6 hours we developed our idea and prototype: we developed a Spotify plug-in that allows users to sync their listening experience with others around them. The listener can also switch his/her listening experience to public for others to join in.

Click blue play button instead of drag (solution pt 1)

Visually Select Starting Frame

No more dragging across your workspace! Just select the grayed out play button when in Prototype mode to select it as the starting frame.

Additionally, the dropdown menu still works!

Selecting multiple frames (solution pt2)

Select Multiple Starting Frame

By selecting the "Multiple Frames?" checkbox, multiple starting frames will be saved and is easy to remove.
‍

Multi-tab Prototype

Multiple starting frames allows for multiple prototype tabs. This allows testing multiple user journeys and compare what works and what doesn't of each.

This also works for comparing slide decks, resumes, and flexible for the growing Figma use cases.
‍

Takeaways

  • Originally, I thought this was too small of a problem to address for a design challenge, but as I researched Figma's use cases and current user pain points, I realized that its effects were quite far-reaching. I learned that what makes a redesign effective and useful is how it affects users and addressing the ever-evolving ways that a product is used.

< Previous

Let's connect!

ashleyhelento.design@gmail.com