Reagan Ray

User Research

Before we had an MVP of our product, I conducted 60+ interviews to define the pain points in product development. I continuously saw designers and engineers struggle with accessing user data, knowledge sharing, and cross-functional collaboration. Product development processes broke down in a firehose of chats, emails, and sprints.

Initial interviews uncovered pain points in the product development process.

With an extensive background in building design systems at scale, we realized that design systems should extend beyond the intersection of design and code. By extending design system thinking to all areas of an organization, we could create something new: a product development system. Luro connects your most critical user data back to the components and pages of your product.

Luro connects user data to your design system and pages.

Design Explorations and Initial Patterns

After identifying integration needs with our design partners and defining our initial strategy, I started prototyping the main overview dashboard for Luro and several core templates. I wanted to test the initial IA for our sidebar pattern and standardize how we displayed data from various sources.

Initial iteration for the dashboard IA that shows different data sources

Working through different steps for adding and editing an entity

Branding and Design System

As the only designer on a team of 3 engineers, I knew a strong visual foundation was crucial. I used a few different weights of Graphik from Commercial Type for our product and marketing efforts, paired with a vibrant color palette to bring the data to life.

Brand guidelines and the initial button component

Core components for integrations, external links, components, and styles

Integrations and Importing Data

Connecting to various data sources is an integral part of Luro, and over 70% of activated users used our first integration for Figma. With the Figma integration in place, I was able to use the same flow for other data sources, such as Storybook and GitHub.

Streamlining the process of importing components from Figma, Storybook, and GitHub

The process of importing components from Figma, including success and error messaging

I created a similar pattern for our other integrations. By simply providing a URL, Luro could crawl and import the pages of your website. With pages imported, users could easily connect to Google Analytics or Google Lighthouse.

The connect modals for adding pages, Google Analytics, and Google Lighthouse

Component Tracking and Data Visualization

Our most popular feature request during the private beta was a tool to track components and measure the success of a design system through adoption metrics. I evolved the experience over multiple iterations through user feedback. Users could see the overall metrics and drill down to get more granular data.

Component tracking, showing overall and page-level adoption

Luro integrates with Google Lighthouse to track accessibility and performance data. Based on user feedback, I designed a flexible set of tables to display the page-level metrics, along with a more comprehensive overview that shows the product's overall health.

The accessibility dashboard showing overall issues

Flexible Tables

Because Luro pulls in a lot of data from different sources, it was essential to build flexible tables where users could complete actions, get a quick overview, and visualize progress.

The component landing page with status selectors and progress meters

The prototypes landing page with source file icons and owner dropdowns

Activity Feeds and Historical Data

Multiple design partners requested the ability to see a historical overview of their integrated user insights and product data. Having a single lens into the latest changes was a game changer vs. having to check every tool or getting a million email notifications.

The main activity feed, showing entity cards and smart filters

Improving User Activation

User activation was one of our most important KPIs, with importing data sources being our biggest trigger for repeat use. By identifying our top user activation methods, I created four prompts that improved activation rates by over 20%. Numbers for the "skip onboarding" action were low- less than 10%, so I knew that users were returning to complete steps over time.

Our user activation model that we adjusted over time based on new integrations

Editing Data Large and Small

We needed multiple solutions for editing in Luro, from updating the description of a prototype to editing a collection of components. I started with a traditional edit/save interaction, but users were struggling to scroll down and find the edit button. I designed an interaction that allowed users to toggle into edit mode and worked with our engineering team to introduce an auto-save feature.

Edit mode for prototypes

For editing large amounts of data, I designed a bulk editor. We initially created the bulk editor for pages but ended up extending it to components and styles. It was also an easy way for users to bulk delete items if an import was incorrect.

Bulk editor for pages

Teams and Accounts

Based on early usage, I knew Luro needed a flexible approach to workspaces. Luro teams could range from a small startup with one workspace to a large enterprise company with multiple workspaces. I designed different access roles for Owners, Admins, Editors, and Viewers, with the ability to invite new users via email or a shareable link.

The team dashboard with member and invitation management tools

Beyond the primary user account features like settings and passwords, I created an activity feed for every user. Since all items in Luro have an owner and creator, we were able to surface all the things a user is working on, along with recent activity and statuses.

The profile screen - team members can also see the activity of other users