Luro

Enhanced Accessibility and Performance Reporting

2023-10-25T00:00:00Z

Luro’s weekly performance and accessibility reports got a major upgrade. Previously, we only surfaced the final scores, which were helpful but required extra work to dig in and find root problems. Now, Luro surfaces all performance and accessibility data, giving you greater visibility on the health of your product and makes it actionable across your entire product.

Aggregate accessibility issues across your product

Luro gives a breakdown of the most common issues affecting your customers’ user experience across the product. For each issue, you get a page-by-page and element-by-element breakdown, which WCAG criteria you’re failing to meet, and which populations are most impacted. It’s easier than ever to assess your biggest accessibility problems.

Never be caught off-guard when management shows up with a panicked look in their eyes. Fixing detectable issues and having a monitoring system in place will lead to more successful, happier customers and make more extensive accessibility audit work more impactful in the future.

Identify big performance bottlenecks

Amazon sees a 1% decrease in revenue for every 100ms increase in load time – wpostats.com

Your company is leaving money on the table in terms of performance. According to Amazon, every 100ms of latency equals a 1% loss in revenue. Google found a similar 500ms increase in page load results in a 25% less searches. With those numbers, getting a high-level picture of which performance liabilities are impacting your users is more critical than ever.

Be aware of improperly-sized images or render-blocking resources — as performance issues tend to be more systemic and repeat themselves across the product. You can use Luro to find big opportunities and fix issues impacting your customers and revenue. Customers love snappy products (and so does Google Search).

Plan your next maintenance project

Sometimes, the most significant impact you can have on a product isn’t a new whizbang feature; it’s improving and optimizing pieces you’ve already built. Luro can help you quantify and identify the structural user experience problems your product faces.

Not sure where to start? Sign up for Luro, add some key pages to audit, and now you’re a click away from getting a 10,000-foot view as well as a page-by-page breakdown of opportunities to improve your product’s UX.

Luro is Proudly Sponsoring Clarity

2023-10-17T00:00:00Z

At Luro, we’re hyped to be sponsoring Clarity (a design systems conference) this year, which is happening in San Francisco on November 1 – 2, 2023.

The eighth (wow, thanks, Jina!) Clarity couldn’t come at a better time. The nature of design (and design systems) is shifting rapidly as the technological landscape evolves. Organizations looking to leverage AI and democratize design must support those efforts with a robust process centered around a design system and a fully implemented component set.

Clarity will be an excellent venue for practitioners to share ideas, offer support, and continue to chart out the bright future of design systems.

Clarity is a design systems conference focused on how we work together. We provide tools and standards to scale across an increasing number of devices, platforms, and products. But real success comes when people align around a shared vision and language. Diverse perspectives for design, development, and product unite so more people can be a part of the conversation. At Clarity, we elevate our skills through multi-faceted inclusion, empathy, technology, creativity, and collaboration.

Sources of Truth

2023-10-03T00:00:00Z

In every Design System project, you will inevitably hear the phrase “source of truth.” What artifact should everyone be looking at? The Code? The Design? What is the “North Star”? Where is the team “skating to”? So — what is the Source of Truth? Well, spoiler: different organizations will come to different conclusions.

For example, Brad Frost says matter-of-factly that “it’s the code.”

While a Figma library is super helpful for designer efficiency, the true source of truth for a design system is a library of coded components that build real digital products.

As an engineer, I see code as where the rubber meets the road. Code is where all the performance, accessibility, and device constraints are actualized. Code is what builds digital interfaces. But Ethan Marcotte suggests it’s not so cut-and-dry…

Despite this, most design system teams position the component library as the “source of truth” for the entire design system. And the logic here makes sense, honestly. After all, the library contains the components in use in production: it represents the “live” version of the system’s design patterns. From there, other disciplines are expected — implicitly or explicitly — to ensure their artifacts reflect what’s been implemented and deployed.

There’s an interesting tension here. Because practically, this means most design systems contain multiple sources of truth, while formally acknowledging only one.

Following Ethan’s logic, there will always be at least two; the actual and the reflection. This is true of both Design and Code. A design file can be an out-of-date reflection of the live code or (more likely) the code can be a poor reflection of the original design intent. The part of the system you work on probably informs your opinion which is the actual and which is the reflection.

In my experience, there’s places where Design and Code can both be a “North Star” and can skate ahead to explore new ideas in areas the other isn’t well-suited. For example:

A blank design canvas can trigger a more creative process and produce a radical rethinking of the product.
An experimental prototype in code may leverage a new API or technology in such a way it opens new pathways forward for the product.

How do you capture that lightning in a bottle and allow creative exploration? How do you allow for “breaking the rules” of the Design System? How do you harness the give-and-take energy of separate disciplines informing each other rather than creating tiny waterfalls?

Brad even acknowledges that the design system ecosystem is vast and layered. A “Design System” on a large site may be a collection of systems: framework-specific spin-offs, platform-specific spin-offs, team-specific recipes, and layers. Design Systems have a fractal nature to them.

When I look at the layer cake of what a Design System can be, it’s hard to point to one ingredient (e.g., the syntactic sugar) and say, “This! This is the source of truth!” because I see so many aspects beyond the Design and Code.

Sources of Truth in a Design System

We’ve seen at Luro through countless hours of exploration and customer interviews that many Sources of Truth make up a Design System.

The Tokens - The smallest and most portable form of standardization; the brand across many contextual experiences. This can be one set of tokens or separate tokens for light and dark mode, or separate tokens for different sub-brand identities, or separate tokens for the Saudi Arabian market, or seasonal tokens to celebrate Lunar New Year — even in something as atomic as tokens there’s a high degree of relativity. It’s quite possible one set of tokens doesn’t sufficiently capture what’s “true”.
The Design - The visual system used to design and build all the mockups of all the screens; a place to explore outside of code that is constantly evolving to respond to the needs and ideas of the business.
The Code - The visual system applied in code — where performance, security, accessibility, and browser capabilities meet reality. These components could be a collection of iframe elements, a GitHub repo, an npm package, a Storybook, or many repositories and many packages with many Storybooks.
The Documentation - The do’s and don’ts of usage, the written rules and bylaws which govern the project, and the educational tooling you create to drive adoption and reuse.
The Real Digital Product - The end product that spits out at the other end of the machine after all the compilers, user-generated content, device constraints, and WYSIWYGs mutilate your beautiful work.
The Stakeholder Feedback - As with any project, stakeholder feedback weighs heavily and will inevitably leave a thumbprint on any design system, whether that’s in the form of out-sized influence, bad opinions, or budget constraints.
The Law - The fastest I’ve seen a design system change and roll out is when legal or accessibility compliance was invoked; the Legal team (in my experience) impacts the output of the design system.

There’s one other source of truth we believe in at Luro that impacts Design Systems, and that’s the insights gained along the way. What you know about your customers and your product through metrics, research, testing, and prototyping is equally as valuable as the production code or fancy designs. That’s the difference between a component system and a design system; component systems are free, but a Design System is backed by business and customer insights. It is the engine that can power a thousand products and features.

Luro supports your source(s) of truth

Whether it’s a single Figma file, five Storybooks, or even no formal Design System at all – Luro meets you where you’re at in the Design Systems journey. Capture the full story of all the organizational knowledge baked into every screen and component. See how these insights materialize and impact the live product. Future you will thank you.

Capture the Value of Your Design Work With Luro

2023-09-25T00:00:00Z

The deliverable has been delivered — shipped — launched. While some might reduce this artifact’s value to its current form and function, we all know firsthand that design and product teams can spend months brainstorming, researching, testing, and prototyping to get to that finished product.

The value lies not only in the final deliverable but in the process — the insights gained along the way. Often overlooked once the sprint ends and tickets close, this very information that cost the team so much time and effort disappears (whispers in dramatic voice) like vapor at the end of the waterfall.

What if you could integrate those hard-earned insights and the work that gleaned them into your design system? With Luro, you can do just that.

Get to know insights in Luro

The what and the why

Design systems capture the what. What is it? A product card with an image, description, and a full-width call-to-action button at the bottom. What they tend to miss is the why. Why does the product look and function this way? What principles, research, user tests, and analytic data informed these decisions?

In my experience, the why takes the most time and costs the most money. It’s also where I provide the most value as a designer. I am not merely the picker of fonts, the dropper of shadows, the executor of deliverables. My greatest value as a designer lies in orchestrating the process and gathering insights — applying the whys to create the optimal what.

Those insights don’t cease to be valuable after a product ships but instead become more valuable as historical resources that contextualize design — provenance. This accounting of how we arrived at our solution should be retained and organized, accessible to others when needed to prevent repeat work and inform confident decision making.

Luro is a platform that captures the what and the why.

The most intuitive file structure known to humankind

We built Luro to center around your components and your site/product. Any insight or metric you want to integrate to Luro can be mapped to these two things, so not only are they easy to find, but they surface themselves when most relevant. Luro can capture contextual insights like:

Brainstorming sessions and mood boards
Competitive analysis
Prototyping history
User research and personas
User testing
Etc.

When you add these insights to Luro and relate them to the relevant components and pages, you’re on your way to laying the framework for a glorious org-wide hive mind! And yes, they’ll be easier to find when you pick up work again tomorrow.

We built Luro to help capture the full value of your design work — the platform where you can showcase the why alongside the what.

As roles and responsibilities within product teams evolve and some tasks become automated, the onus is on us to think more broadly about design and the value we bring to projects. We should be leading conversations about the future of design and its increasing importance to organizations looking to get the most out of the technological advancements that lie ahead.

Simple Component Inventories

2023-09-19T00:00:00Z

You don’t need a polished set of design system components to get a lot out of Luro. In addition to organizing research, testing, etc., or running performance and accessibility tests for your entire site, you can use Luro to automate the component/interface inventory process before the design process even begins.

Simple component inventories setup video

Whether working with an existing design system or redesigning from the ground up, creating component inventories helps answer key questions like, “What components do I need to create to account for the entire product experience?” or “How many times is this component used throughout the product? Are there any incorrect implementations?”

It used to take me days to create these. I’d find another corner of a site I’d not yet clicked into and, with it, a slew of new use cases.

Now, I use Luro to streamline this process — often, it is a way to set up a design system before even designing components. Here are two ways I go about this:

1: Start in Luro with no components

Grab your site or product’s URL (and login if applicable).
Use Luro’s page crawler to import pages.
Head to components and add a component you want to inventory manually
Click into your component, click the tracking tab, and click Add Tracking.
With your site as the reference, add CSS selectors for your components. You can use “Legacy CSS Selector” if you plan to replace the component with your redesign.
Click Finish Editing and then Run crawl.

With the crawl complete, you have a page usage count and a count of individual instances. You can also select specific variants to get a list of every page the component appears on. This approach can be particularly helpful when it’s time to itemize tasks to ship your new component or design system.

Component Tracking in Luro

2: Start in Figma with component screenshots

Take screenshots of components you plan to redesign
Add the screenshots to Figma, making each one a component. I don’t do any design at this point. I’m just using these as placeholders that I’ll eventually replace with new designs.
Publish your components within Figma. Copy the share URL.
Head to components in Luro and add a source file / import your components from Figma
If you haven’t already, use Luro’s page crawler to import pages.
Click into an individual component, click the tracking tab, and click Add tracking.
With your site as the reference, add CSS selectors for your components. You can use “Legacy CSS Selector” if you plan to replace the component with your redesign.
Click Finish Editing and then Run Crawl.

Component Tracking instances over time

Not only does this approach help me understand where and how components are being used, but it also helps me organize my process. I’ve got all the components I need to design itemized. And even better (in a step I’ll cover more in-depth soon), I can also add the rest of my prep work: research, documentation, project setups, etc.

Component Tracking is Here

2023-09-13T00:00:00Z

As a web/product industry, we’ve reshaped our teams, processes, and even tools (Figma, Vue, React, etc.) around components and design systems because we believe they are the magical keys to building products at scale — making us highly organized and efficient so that we can focus our time and talents on innovation.

But for all of these wonderful things to be true, must first ship!

Most of us still find ourselves in the miry process of getting our components out into live products. We’ve traded redrawing and recoding the same rectangles on a page-by-page basis to spending countless hours auditing pages, creating tickets, and trying for the third, fourth, or fifth time to ship our components.

Without automatic, objective insights into how our components manifest and impact our products, component adoption is nearly impossible to achieve.

Start tracking in Luro now

I’m happy to announce that Luro can help you with these insights today. For any component you’ve added to Luro, you can track that component on your live product. Luro gives you charts and graphs to track the following:

View component adoption over time
Get a page-by-page breakdown of component usage
Track and depreciate outdated and legacy components
Manage the rollout of your design system
Start auditing and organizing existing components

~1 minute quick peek at Luro setup — Full version w/ audio here.

Luro makes the work of component adoption automatic, objective, and seamless. These insights also help demonstrate the ROI for design system and product team work, ensuring that optimized components make their way to users and customers.

Join us

Sign up for free and take component tracking for a spin yourself. Have questions, feedback, or want to chime in on future Luro features and functionality? Join us on Discord!

Stay Synced with Notifications

2023-05-22T00:00:00Z

You’ve just finished a component update, user test, prototype, etc., and want to share it with your team, but you don’t want to interrupt everyone’s day. At the same time, you don’t want it to get lost in the collaboration firehose because it’s valuable work.

Do you create a ticket? Post in chat? @message a few individuals. Maybe, but these methods don’t guarantee people can find it when needed. I’ve put things that took six months to create in chat windows, and they have less visual hierarchy than a cat GIF (nothing against a good cat GIF, of course).

In addition to connecting everything you add in Luro to your design system and site, Luro can now send your team real-time notifications. If real-time is too much, you also have the option to receive a daily or weekly e-mail digest (all manageable in settings).

We’ve been using it ourselves at Luro this past month, and it’s been great to review recent design and performance updates in one place. We’re more aware of what everyone else is doing, so when we chat or meet about projects, those conversations are easy because the team is already in the know.

To configure notifications, visit your account settings in Luro.

How to Organize and Share Research from Figma

2023-05-15T00:00:00Z

Sending someone a Figma link for an in-progress project is always a bit of a crapshoot. In the past, I've usually had to screen share and walk through it with the rest of my team. Everyone organizes their Figma differently, and once the pages start piling on (version-1-6, final-final-final, etc.), it can become a mess that only the creator can make sense of.

Getting started the Luro way

When kicking off a new project for Luro, I usually spend a day or two diving into research. For our team, early research can include visual inspiration, competitive analysis work, or general brainstorming. This research usually turns into a giant mood board in Figma.

Above is my early Figma file for our activity feed. There's a competitive analysis page with screenshots of other activity feeds for inspiration and a brainstorming page full of sketches and notes. Usually, once you get past this stage, your Figma file has many pages, and that work gets lost quickly.

How to add research in Luro

We'll use the competitive analysis as an example to port this research over from Figma. First, I'll add a new research page in Luro called "Activity Feed Competitive Analysis." You'll notice one of the first things we ask for is an embed URL - this would map to the same page in your Figma file. Adding the URL will embed the page in Luro, where you can continue to add notes, links, etc. Once added, it will surface as a research item.

After adding the competitive analysis in Luro, it will surface in your activity feed so that the rest of your team can check it out (soon, team members will be able to receive a notification via email or Slack). Your team will also begin to have a collection of competitive analysis work in the research section that everyone can revisit and share.

Shipping a new feature

The next step is to add your research to a project. This way, your team can start to see the evolution of a feature - from the initial research to the user testing, prototyping, approvals, and deployment. Adding research only takes a few minutes to add to Luro, but it tells a much more complete story on the evolution of a project.

Introducing Activity Feed

2023-04-25T00:00:00Z

Stay up to date with Luro’s new Activity Feed.

The previous iteration of the overview page was a bit noisy. We had a few streams of the latest updates across all sections of Luro, but they were cluttered and scattered about. It made it difficult to know where to pay attention and spot the difference between what was new and what was updated.

The more feedback we got from our private beta users, we realized they were missing important updates like new prototypes, survey results, project status changes, etc. So we merged all the activity streams into a single chronological feed to surface recent updates right when you log in.

Right now, we surface a few core activities:

New styles, components, component variants, and pages
New source files
New projects
New documents, prototypes, research, and testing
Status changes across all items
Deleted items
Automated Luro jobs like performance and accessibility audits, and analytics crawls

Logging into Luro and getting a high-level overview of what’s been happening across the entire product is a pretty cool feeling. It’s like an internal status hub for product teams, but better because it’s less ephemeral when everything is tied back to the product you’re building. We’d love for you to try it out and let us know your thoughts.

How Projects Work in Luro

2023-04-18T00:00:00Z

Projects in Luro are a bit different than your typical project management tool.

In our quest to understand how companies organize themselves and their software, we saw organizing by project was the most common way. Humans seem to naturally group work into projects. Our initial thought was that “Projects” would be another organization tool like tagging — but once we started exploring, it immediately became something bigger: a better method to manage projects in a way that enables creative work.

To understand projects in Luro, we must first look at the current project management landscape.

Most project management tools are about pushing cards across a board

Myriads of amazing apps are out there for creating to-dos and putting them on a Kanban board. These project management tools do a great job of quantifying the work to be done. In nearly all those tools, work is broken up into “tasks” or “issues,” which have an attached status; to-do, in progress, or done. This methodology shifts our relationship with work. You lose focus on building a great holistic product, and the goal becomes marking all the to-dos as “done.”

Generally, pushing cards across a board is great for linear workflows – like manufacturing or engineering – where there’s a known path to a given destination. Issues add visibility to an otherwise opaque process of arcane technical contributions. However, that process begins to break down for creative work – like design.

Creative work doesn’t always swim across a board in a straight line; it squiggles with lots of iteration and feedback loops. The end state can shift radically throughout the discovery process. Sometimes the answer to increasing average cart spend isn’t redesigning the shopping cart; it’s explaining your products better in an email. Most scrum masters begin to panic when cards start swimming backwards on the board, but rework should be celebrated because the ideas are getting refined and fortified.

How projects are different in Luro

So we have a slightly different approach to projects in Luro. Projects in Luro are about documenting the artifacts you make, the insights you gain, and the decisions you make along the way. Dragging cards to the “Done” column is one form of job satisfaction, but seeing all the non-production work that informed the product is something entirely different. The core of Luro is about connecting your small contributions to the product's bigger picture.

We’ve heard the same questions asked over and over in the last 15+ years of building products:

What pages/components are impacted by this change?
What research informs this project?
What came out of that brainstorming session?
Did we do a competitive analysis?
What prototypes did we make to validate the idea?
Did we run an A/B test?
What was the user feedback?

Finding this information in the compost pile of old issues or the endless river of chats is like dumpster diving behind a Michelin-star restaurant; not a great experience. Artifacts and insights don’t live in a single tool either; they’re scattered across Figma, Miro, Dovetail, various Google products, and the dreaded corporate wiki. Finding answers quickly across many sources of truth is time-consuming when you need to be an expert in seven pieces of software. According to a recent study, workers spend 25% of their time finding documents, information, or other people they need to do their job.

Projects in Luro can help remedy the problems of knowledge loss and SaaS sprawl. If you add your artifacts in Luro and create a couple relations, you build a bi-directional paper trail for everything you learned, created, or improved about your entire product over time. Luro preserves all the Design Thinking (and regular thinking) that went into your projects across all the corporate and software silos, a single link that shows the whole story.

A DM or email answers one person’s question, a hyperlink answers many people’s questions. This is part of the ethos of Luro. We want to extend the spirit of design systems – work smarter, not harder – to the rest of your organization.

How to get started in Luro

If you have a Luro and are ready to get started with projects, follow these few steps:

Go to the Projects section of Luro and click “Add project”
Give your project a name and add a short brief
Add relations for any pages or components that will be touched in the scope of your project
Add relations for any insights (research, prototypes, or testing) that inform your project along the way.

We could have created Yet Another Issue Tracker, but we think there’s an opportunity to rethink how we collectively build, share, and manage projects with non-linear outcomes. We have a chance to improve how organizations remember too. When we reminisce about high points in our careers, we don’t say, “Remember when we completed 200 story points in that sprint?” No, that would be ridiculous. Instead, we talk about the people we worked with and the contributions we all made along the way.

Feel free to reach out if you have questions, comments, or hot takes about how we can make Projects in Luro better. Thanks!

Luro Now Has Documentation

2023-04-10T00:00:00Z

We’ve been hearing from our private beta users that rather than integrating documentation from often nebulous external sources, they’d like to create it inside of Luro as well. Now you can! And in accordance with the Luro philosophy of mapping resources and insights to the products they shape, we’re surfacing documentation in a few places so that it intuitively maps to your design system and Luro setup.

Firstly, you can find documentation for each section (components, prototypes, research, etc.). This placement allows teams to feature key docs like “Contribution Guidelines” or “Getting Started” in their relevant sections.

Secondly, you’ll find a comprehensive list of documentation grouped by sections under “Insights.” You can add documentation from either place.

The Documentation Creation and Editing Experience

We took this round of updates as an opportunity to continue to evolve the writing experience inside of Luro. You have several styling choices from our bubble editor when creating new documentation. You can add a link, images, tables, lists, etc. We also support markdown!

Use Cases

While there are a few common ways to use documentation for your organization, the possibilities are endless!

Getting started guidance, i.e., how we prototype, do user testing, etc.
Design and development principles
Contribution guidelines, i.e., how to request a new component, share a prototype, etc.
Tool documentation, i.e., how we use Figma or Miro, how to get access, etc.
Accessibility and performance principles

Valuable Insights

A couple of months ago, I wrote a roundup post on design system documentation. In addition to feedback from our private beta users, many insightful posts written by industry comrades helped shape this feature release. Thanks, everybody — much appreciated!

Why We Have Performance and Accessibility Insights in Luro

2023-03-27T00:00:00Z

We've packed tons of features into every new Luro install, but today I want to share why we made Performance and Accessibility insights a launch day feature of Luro. It comes down to one central idea: It’s hard to know if you’re doing a good job at making websites.

Tracking revenue and seeing money charts go up are one indicator a website is doing a good job — but revenue by itself doesn’t speak to the quality and usability of a website. Most metrics don’t help you learn about the people who are unable to load or access your website, potential customers who are digitally locked out of your online experience and missing from the data.

With Luro we want to make it easier for your organization to ship better products that lead to happier, more successful customers. We hinder our ability to consider the broad range of human experiences when focused solely on revenue and click-through rates.

Luro is a companion app

When you’re deep in the woods of building a new feature or focused on optimizing a single component in a design system, it’s easy to lose sight of the greater health of the product. This is why Luro pairs your design system with your actual product. We want it to be easy for designers, developers, QA, managers, and executives to get a 10,000 foot view of the product you all work on every day.

It’s difficult to keep accessibility and performance top of mind across an organization. Spot checks are okay but time consuming to do for every page in your site. Your spreadsheet has a lifespan of a week before it gets lost forever in the company wiki or OneDrive. Performance and accessibility need continuous monitoring and attention.

We added Lighthouse accessibility and performance audits — the same page speed insights that impact your Google SEO ranking — into Luro so you don’t have to spend days and weeks auditing and assembling reports every time a fire breaks out. No more wondering if the homepage or cart conversion metrics might be suffering from a bad page speed, those metrics are already captured inside Luro, surfaced on every page, and updated every week.

When you begin a redesign, open that page up in Luro together with your team. This is the best way to give your accessibility and performance commitments visibility along with all the other insights you have connected to your pages. If you are the in-house Accessibility advocate (or Performance cop 😅), we want Luro to be a tool where you have the data you need to find opportunities and holistically diagnose potential problems at a glance.

Luro surfaces your hidden problems

We believe performance and accessibility in Luro will help surface your user-facing problems before they become larger business problems. In fact, we’ve already seen it in action. A week after one of our private beta members launched their website redesign, we noticed their performance score dipped to 15 out of 100 in Luro – unexpected for a brand new site where they paid a lot of attention to performance along the way.

That low score sparked further investigation and we diagnosed that someone had uploaded a 4.5 MB 😱 avatar image inside a homepage testimonial. An easy mistake that can happen in any CMS! We notified our customer about their performance dip and a quick re-upload got their performance score back up in the 90s on the same day.

We want everyone to have this experience. Getting the fundamentals solid first will set your organization up for success when you take on the next steps of in-depth auditing, user testing, and when you start building your product with (not just for) people with disabilities. Which, of course, you can document and connect back to your product all within Luro.

How to get started in Luro

If you already have a Luro, it’s easy to get started with Accessibility and Performance and takes about five minutes to get up and going.

In the “System > Pages” section of Luro, click the enormous “Add Pages” button to setup a site crawl.
Enter the URL of your site and click "Crawl". It takes about a minute.
When the crawl completes, select pages you want to add to Luro. You can always re-crawl your site, so we recommend adding a handful of your top level pages first.
After adding pages, go to the “Metrics > Accessibility” or “Metrics > Performance” section of Luro and click “Connect to Lighthouse”
Done! Your first Lighthouse crawl is now running and a fresh audit will show up every week.

At Luro we care about the quality of the products people build, the experiences of people building them, and the experiences of people using them. That’s why Accessibility and Performance are in the core of what Luro offers.

Figma Analytics in Luro

2023-03-09T00:00:00Z

We love Figma and use it as the basis for creating the components that power our design systems. Our private beta users feel the same, and while working with them to explore ways to connect their design systems to the rest of their product development workflows, we learned that being able to track Figma usage for components would be valuable.

How to get started with Figma Analytics in Luro

With your Figma components already integrated, you can start from the components page, either via the dashed box at the bottom or via the menu at the top.
Click "Add Team" and enter your 18-digit Figma Team ID (you can enter multiple Team IDs). Here’s how to find your Team ID.

And that’s it! You’ll begin to see component analytics surface on individual component pages.

Private Beta users can test this out right now. Give us a shout with any questions or ideas you may have while getting started. This release is just the beginning of what we have planned to help teams gain buy-in for their design system efforts and integrate with their processes.

Design System Documentation

2023-02-27T00:00:00Z

Where should design system documentation live, and can it evolve with the components it covers?

We’ve been researching how teams handle documentation for not only their design systems but for more general product development info. In addition to interviewing our private beta users, I wanted to pose the question on social channels:

Responses aligned with what we’d heard in interviews: “lots of different places, and I can’t find anything!” Here are a few to summarize:

No one will read what they can’t find, and collaborators are less likely to read when they’re in the middle of a task. So with Luro, we’re aiming to introduce a way for documentation to map to the most intuitive file structure teams have: their design system and the pages/views that comprise the product. Situations like this happen too often:

“Oh gosh, Ellie summarized that sign-up flow research last year. I can’t remember what the title of the file was and can’t find it anywhere.”

Instead, we want teams to have this experience:

“Oh yeah, the sign-up flow research! I can pull it up by visiting the forms component or the sign-up page in Luro!”

It’s been exciting to see others thinking about documentation in similar ways. We loved this post from Amy Hupe: We document our design systems - why don't we systematise our documentation?

Design systems seek to increase efficiency via common solutions that can be maintained centrally and reused in multiple places. So why don’t we apply this thinking to our documentation?

And this post from Chase McCoy is full of fresh ideas: Design systems as knowledge graphs

Design systems can offer products, and some of those may be software libraries, but a design system is not only a product or a library. Good systems are hyperobjects that capture decisions, language, patterns, history, and all of the things that make and have made your organization’s design what it is. They resemble knowledge graphs far more than products, and I’d like to see some of the emerging patterns around software for managing a knowledge graph applied to design systems.

We’ve already got many of the key insights teams want to map to their design system and pages in Luro with in-app written documentation up next. Curious? We’ve got a private beta waitlist right here!

Wrangling SaaS

2022-12-12T00:00:00Z

Teams spend a lot on SaaS tools, but they spend even more on the time and effort it takes to collaborate with them. The cost of not having what we need to do our work is high—time, money, morale, momentum, etc.

Does this sound familiar?

How much time do people spend in meetings, on the phone, and responding to e-mails? At many companies the proportion hovers around 80%, leaving employees little time for all the critical work they must complete on their own. Performance suffers as they are buried under an avalanche of requests for input or advice, access to resources, or attendance at a meeting. They take assignments home, and soon, according to a large body of evidence on stress, burnout and turnover become real risks.

Harvard Business Review, 2016

Problem 1: Access

“Hey! I got the user test results link, but I don’t have access. Could you add me?”

We’ve all wasted days waiting for access to the necessary information to do our work. Whether it’s a design asset or a research summary, tracking down the right person to give us the proper viewer role in the right SaaS tool is a real momentum buster.

Problem 2: Interruptions

“Sorry to bother you, but I need some analytics info for today’s meeting. Could you let me know how page views and conversion is looking this month ASAP?”

Just as often, we’re on the receiving end of requests—context switching chisels away at our days as we stop to answer questions and field requests. Instead, minds that could focus on innovation are entrenched in the ceremony of clicking, pasting, sending, and sharing.

Problem 3: Findability

“Ugh. I couldn’t find the ticket or the design specs anywhere. Could you send them ASAP so the team can stay on schedule?”

Whether it’s the firehose of chat messages, task-management tickets, or a sea of thumbnails, it’s hard to focus on innovation when everything is equally weighted. With many productivity and communication apps, a prototype that took six months to build and test has the same hierarchical weight as a request to increase spacing by 1 pixel. Furthermore, knowing what to search for becomes a miracle unto itself—recalling file names or who shared what becomes cumbersome detective work when all these things should be self-service.

Integrate SaaS and map it to your design system and live site with Luro.

We’re building Luro to be the central, cross-discipline platform for product development teams to share their most valuable insights and resources.

The most intuitive way to share across teams is by mapping SaaS insights and resources to the site map and design system.

For example, I might remember that a 6-month-old user test report for the sign-up flow lives in the company’s cloud storage, and the name was “Q3-UX-Sign-up-flow-dot-ppt,” which is possibly enough for me to go hunting for it. With Luro, all I’d have to know is that the test was done on the sign-up flow.

I visit the sign-up page in Luro, and I can see the complete user testing history in addition to performance scores, accessibility audit information, analytics, component usage, etc. It’s all there, and it’s all self-service.

Furthermore, while I’m doing my work, I have Luro open alongside as a reference. Suppose I’m heads down fine-tuning typography and animations in Figma. In that case, I’ll have a cross-silo view into every other aspect of the product I’m working on, informing my decisions along the way.

I can see the work of my teammates alongside my own, and suddenly what I am working on starts to feel more like what we’re building together. Alignment, buy-in, and shipping all seem more manageable because I can utilize so much more while doing less to maintain it. Let’s build together.

Expanding Upon Design Systems

2022-11-07T00:00:00Z

What if we expanded design thinking to encompass the entire product development process?

Design systems have done wonders for helping organizations build digital products. With a design system in place, visual consistency is easier to maintain, components become reusable, and redundant work is reduced.

With the right buy-in, design systems can do magical things for team collaboration. When contributors with different specializations (design, engineer, etc.) start looking at the same thing, perceptions align and friction melts away. As teams have become more distributed/remote, it’s more important now than ever to capture this collaborative magic.

In my experience, however, most design system management tools focus only on the intersection of design and code. This is likely a result of the amazing work done within the design and engineering community to evangelize and share knowledge about best practices. Why stop here?

A few years ago, while working on various projects at Paravel, we realized that this unified lens and collaboration model should extend to as many aspects of an organization as possible. Looking back at project friction points over the years, we observed that they extended far beyond the design & code space:

Struggle to gain buy-in across the organization and approval from leadership
Difficulty accessing data from testing, research, performance, and analytics that would inform design decisions
Significant gaps in knowledge sharing (and preventing knowledge loss) as team members shift roles and turnover happens
Misalignment of product development and marketing efforts

So we decided to extend design system thinking to all areas of an organization in order to create something new: Luro, a product development system.

Separate from the firehose of chats, tickets, and emails, organizations need a central hub to house and display the most important info about product and process. This info must be easily referenced, self-service, and it must combine information across all specializations and silos.

Example 1

I’m a designer, and Figma is my daily tool. I’m new to the team working on the signup flow. If, on Day One, I could see every component being used in the current flow, page speed insights, KPIs for the redesign, and the testing/prototyping history of the flow over time, I would not only be well equipped to do my work, I’d save hours of everyone’s time.

Example 2

I’m VP of product and spend a lot of time meeting bi-weekly to review status update slide decks from my four direct reports. These meetings help, but I’d also love to make this information self-service. It’d fit my schedule, and I’d feel much more up-to-speed with the status of roadmap objectives and reassured the teams are aligned on goals.

The tools we use (and the info we’ve got readily available) are the lens through which we view our products. We are building Luro to expand that lens so that teams can build together more effectively and with a unified sense of purpose.

I’ll be writing more about Luro in the coming weeks/months. In the meantime, the Luro waitlist is live! Sign up to follow along as we begin to roll things out.

luroapp.com

This post was originally published at trentwalton.com

Luro

Enhanced Accessibility and Performance Reporting

Aggregate accessibility issues across your product

Identify big performance bottlenecks

Plan your next maintenance project

Luro is Proudly Sponsoring Clarity

Sources of Truth

Sources of Truth in a Design System

Luro supports your source(s) of truth

Capture the Value of Your Design Work With Luro

The what and the why

The most intuitive file structure known to humankind

Simple Component Inventories

1: Start in Luro with no components

2: Start in Figma with component screenshots

Component Tracking is Here

Start tracking in Luro now

Join us

Stay Synced with Notifications

How to Organize and Share Research from Figma

Getting started the Luro way

How to add research in Luro

Sharing and organizing in Luro

Shipping a new feature

Introducing Activity Feed

Stay up to date with Luro’s new Activity Feed.

How Projects Work in Luro

Projects in Luro are a bit different than your typical project management tool.

Most project management tools are about pushing cards across a board

How projects are different in Luro

How to get started in Luro

Luro Now Has Documentation

The Documentation Creation and Editing Experience

Use Cases

Valuable Insights

Why We Have Performance and Accessibility Insights in Luro

Luro is a companion app

Luro surfaces your hidden problems

How to get started in Luro

Figma Analytics in Luro

How to get started with Figma Analytics in Luro

Design System Documentation

Where should design system documentation live, and can it evolve with the components it covers?

Wrangling SaaS

Luro provides a central, cross-discipline platform for product development teams to share their most valuable insights and resources.

Problem 1: Access

Problem 2: Interruptions

Problem 3: Findability

Expanding Upon Design Systems

What if we expanded design thinking to encompass the entire product development process?

Example 1

Example 2