Case Study: Adaptation of Components into an Existing Design Library
athenaHealth, Figma

PURPOSE:

Athena’s sub-organization needed an advanced UI for table components available within their design library that will help increase the consistency of the company’s overall user experience and the efficiency of each team’s design and development processes. To make those improvements possible, the new UI table components need to be available in Figma as a central resource for designers. To do so, I created a set of range components to inform a much more extensive system of components that are going to be needed for data table.

TERMINOLOGY:

Figma - The interface design tool used at Athena by the UX Design team.

Component – A built element in Figma that contains smaller elements and behaves a certain way.

Variant – A different version of a component that users can switch between.

Detach – When a user detaches a component to edit it outside of the way it is currently built, that breaks its connection to the design library causing it to no longer update when the rest of the library updates.

BACKGROUND:

The original plan was to create two designs in Figma for range components since these were already missing from Athena’s design library.

Then, alongside the Principal Designer in my team, conduct A/B testing with my sub-organization within Athena. This would allow the designers to decide which design to move forward with, by seeing which they understood and worked better with naturally.

My deliverable also included a new dollar sign icon, which was needed to supplement the monetary use for the range component.

HOW FAILURE BROUGHT US IMPROVED SUCCESS:

Our deadline was tight but I had originally been hopefully to meet it. Once I realized it wasn’t likely, I informed the Principal Designer in my team and we came up with a new plan.

We concluded we should first test how our users, the other UX designers of Athena, were working with and understood Athena’s existing design library today - since we had originally assumed that everyone was comfortable and fluent.

Research Objectives:

• What aspects/patterns do we want to keep from Athena’s Figma library?

• What needs are we not addressing today? What challenges do designers face when using the existing Forge components?

• How might the new Figma components provide the variations available without becoming too complex?

• What architecture of the components (variant nesting, nomenclature, taxonomy, etc.) will best support designers’ mental model and workflow needs?

The User Goals:

• Collector designers can design a complete table using the Collector component library.

• Collector designers have confidence that their designs will be consistent with the overall Collector experience.

• Novice Figma users have the support they need to build tables on their own.

• Expert Figma users can take advantage of accelerators.

Research Plan:

Study 1 – Observation

• Analyze data

• Create new components based on our findings

Study 2 – Usability

• Analyze data

• Create final (ideal scenario) component

Study 3 – A/B Testing

• Synthesize date to ensure final component meets success criteria

STUDY 1:

Method - Observation study

n - 6 UX/Product Designs, varied seniority levels, varied comfort with Figma

Insights -

(Confirmation) Designers use Athena’s existing component set in a variety of ways:

• Start from a component and detach/customize it to suit

• Use the provided component as intended

(Surprise) Designers also used components by:

• Building from scratch and apply styles that match Athena’s existing design library

• Assembling the simplest Forge-provided elements together to create larger components

• Starting from a different, large component and revamp it to suit

• All 6 users built their own components. 4 detached existing components and customized them

• Naming and categorization slowed or blocked all 6 participants searching for the right components

Considerations:

• The naming structure needs to match designers’ terms and account for synonyms

• Designers are applying variants in several different ways, such as copy/pasting them from Athena’s design library file or clicking into the component’s layers

• Build standalone components with a few options vs one component with multiple options

STUDY 2:

Method - Usability study

n - 4 UX/Product Designs, varied seniority levels, varied comfort with Figma (1 repeat from the first study)

Insights -

(Confirmation) Change in naming structure beneficial to users in switching between variants

(Confirmation) Using all-in-one component equipped with Figma’s new features proved to be difficult

• 1/4 Users who found all-in-one component understood how to use it

(Surprise) Not all users were able to find new Range

components

• 1/4 Users grabbed granular level

components

• 2/4 Users grabbed all-in-one component

(Surprise) Some users still opting to build own components

• 1/4 Users built own component

Considerations:

• Need to create awareness over new components

• Need to create awareness over new Figma features

• How is the organization of Athena’s design library hindering users? (many users scrolling through to find desired component)

IMPACT:

Shared results of User Studies with Athena’s design library team

• Help give them insight into what changes to make

• They know changes need to be made, it’s just a matter of having the manpower to make them, as team is currently understaffed.

• Research provided generated excitement and relief from their team, allowing them to focus on solutions for fast-to-fix issues that need minimal manpower

• Dollar icon and Range Component was accepted into Athena’s design library

NEXT STEPS:

Although my time at Athena had been running out, I’m not one to leave a task unfinished. I discussed next steps and helped create a plan for the future of this project as it would be carried out with my Principal Designer. These were the steps we decided that should be carried out:

Revisit “all-in-one” component

• How can we reorganize to make configuration easier?

• Is it recognizable as the component users would be looking for?

Examine how to make our new components findable

• What good is an “ideal” component if no one can find it?

• How can we organize our component within Athena’s Figma library to make this easier?

Awareness campaign and training

• Making users aware of the new component and where they can find it

• Do users know about the new features Figma has added?

CONCLUSION:

Without reconfiguring our research process, we never would have uncovered so many pain points designers are experiencing. I think we went in with the assumption that we were designers and knew what the components should look like – this gave us an in-depth look into issues that need to be addressed and how we can use those observations to make more useful components for designers going forward.