Framer Component Library

Apollo team wants to create a component library that can be used as a cross-discipline tool that will translate designs into live code a design tool. The tool should allow for faster prototyping and will produce in browser previews in HTML.

My role

Lead Product Designer

Front-end developer

Company

IQVIA

Project Duration

6 months

Challenges

IQVIA is a human data science based company that offers decentralized clinical services and technologies. At the time, IQVIA had acquired over 15 companies in the human data science and clinical software space. With a small team we were tasked with servicing all new and existing departments with rebranding and updated user experiences. We needed to get buy in from new customers and we needed a way for designers to create high fidelity (Coded) prototypes for customers needing to sell/pitch to their customers.

Note: The lack of screenshots due to NDAs.

Responsibilities: Consulting leadership, consulting designers on component design, facilitating collaboration through cross-functional teams, component library development in Framer, customer engagement, mentoring junior developers and designers.

  1. How do we reduce time and effort it takes to meet our customers needs?

  2. What can we leverage to reduce ?

  3. How do we make a single source of truth that is scalable across disciplines (UX Design, UI Design, and Development)?

  4. How can we cut down on the time between development and design.

  5. What can we use to leverage existing components?

Pitch

I held an important meeting with the leadership and cross-discipline team members to present and pitch the idea of leveraging a powerful tool that could significantly accelerate our operational processes and effectively address our knowledge gaps that were creating a high volume of iterations.

I created a service blueprint to help illustrate and communicate our gaps and possible solutions to leadership. In the service blueprint we saw opportunities to solve for gaps in knowledge and extended time it took to create experiences for customers. between not only design and development, but also UX design and UI design.

Phase 1

Discovery & Research

Service Blueprint

I Interviewed designers and developers an documented their process for creating. We looked at the average amounts of meetings between design and development on any phase of production and found that the a large amount of time is spent redesigning or adding states and functionality to components that were not considered.

Interviews & Findings

  • Designer feedback had a few reoccurring theme. “Requirements created lacked the necessary information for designers to effectively create components and they spent a large amount of time researching and ramping up on components.

  • Developer feedback a consistent of receiving incomplete, inconsistent, or faulty specs in design. We found that a majority of the team were non-technical designers resulting in engineers either rejecting designs in dev intake meetings or spending more time trying to complete development by guessing/interpreting what to add.

  • Developers also expressed concern about the waterfall process that was sometime used when servicing product teams and how it is creating to much work for them.

Platform research

In this phase I wanted get buy in from design and engineering IC team members. I started by researching tools that we could leverage to get stood up quickly and start applying our existing components. I created a v-team consisting of two designers and two developers (including myself) to go through the process of building out a few components (atoms then molecules) from start to finish. We used the Framer components to see how long it would take to complete an experience and document our process and results. The out of box experience was what we needed to maintain a component library and I reached out to the Framer X team their future plans and we ended up partnering with us to create a tool that met our needs. When we presented our process and findings to the broader team it was well received.

Phase 2

Scope and Planning

Hypothesis

If we can leverage existing components built with the required tech stack that share similar styles we could create an MVP with minimal effort.

Kickoff

Having buy in from design and dev teams, I created a v-team and held a kickoff meeting to define the scope of the project, plan and align on process.

Scope

In an effort to minimize project scope I conducted an audit of current products we recently designed to leverage existing components (Atoms). The acceptance criteria was based on style similarity, simple functionality, and React based code. We were able to identify most of the Atoms we needed across 5 products. We found that we would only have to make minimal changes to create consistency across components.

Phase 3

Component creation

Process

To create the library we used a lean process where teams small teams would meet everyday with the end goal of producing finished components for the framer library.

Phase 1
UI team would assess all components that were the most consistent in style and I was able to check with the product teams to verify tech stack. head start because designers didn’t have to start from the beginning and engineers wouldn’t have to recreate components because they were already built in React. From there we were able to scope the project down and minimize effort.

Phase 2

After that a small team of developers and myself create technical requirements for the components we leveraged.

Phase 3

To create a solid and scalable set of components, we created cross-functional collaboration team to create standardized options that aligned with design needs and technical requirements.

Phase 4

Instead of building out a complete library at once, we created a review process component submission. Designers could submit components to be standardized and used in the Framer component library. Since we already had the atoms built, designers could leverage them to build larger components (molecules, organisms, page templates). This proved to be very efficient.

Key Findings

We received strong signals from design and development that addressed all pain points.

- Based on Jira KPIs we were able to reduce turnaround time for product design and implementation by 30%

- Developers reported improved handoffs with less inconsistencies in design.

- Designers reported that the new component library in Framer lowered the amount of specs they had to produce and it was easier for them to create patterns and service clients with confidence.