The Designers’ Dilemma

July 11, 2023— Any product development process can be tricky. Challenging business goals, shifting requirements, and impending deadlines are only a few of the trials that designers face. In the early stages of product design, designers use prototypes to guide conversations with stakeholders and validate requirements through testing and user research. During this critical phase, one of the biggest challenges is to focus reviewers’ attention on functional specifications, content, and structure before worrying about details of UI design.

One of the biggest challenges is to focus reviewers’ attention on functional specifications, content, and structure before worrying about details of UI design.

Common Pain Points

In the early stages of product design, designers iterate through a lot of prototypes. To save time, they may start with screenshots from the existing product, or build low-fidelity mockups in the style they prefer. While these methods can be effective, each has its challenges.

• Framing the Conversation. When high-fidelity designs are presented during exploration workshops, discussions may steer towards small details of user interface and visual design. Reviewers and test participants want to help the designer by calling out small issues in the design mockups, but may lack context to understand what feedback is most valuable at that stage.
• Time Efficiency. If a designer decides to present low-fidelity mockups, they must dedicate working hours to building them in Figma. Since designers want to display their best work, they could feel pressured to focus on small design details that distract more than they add at this early stage.
• Consistency. If designers are developing low-fidelity prototypes in their own design style, there will be inconsistencies in the design language and user interface across a design team’s output. Communication errors could arise between designers and stakeholders, delaying milestones in the product development process.

To mitigate these risks during the early stages of design, the Morningstar Wealth design team needed a solution to create low-fidelity wireframes that could be swiftly deployed and responsive. We had two options: build our own wireframe kit or find an existing kit we could use.

Build Versus Buy?

Product development veterans remember the old methods of wireframing: drawing concepts in sketch books, cutting out illustrations, gluing diagrams together, and making multiple trips to the office copy machine. With the rise of digital collaboration, ready made ideation toolkits can be deployed in virtual workshops. Our team decided to develop our wireframe toolkit in Figma, our organization’s design collaboration software of choice.

Before building our own system in Figma, we considered utilizing a wireframe kit from an external source. There is an abundance of wireframe kits available for use through Figma’s community feature and third-party design teams online.

To help guide our decisions, we laid out the pros and cons for building our own wireframe kit vs. using a pre-existing one.

	Build Our Own	Pre-Existing Kit
Pros	No license cost Components are connected to our Figma design libraries Help new employees learn our design guidelines 100% in our control	Abstracts away from Morningstar UI Saves team development time Third-party Figma plugin for rapid placement Consistency across kit components
Cons	Requires development time Ongoing kit maintenance No third-party Figma plug-in Mimics high-fidelity designs too closely	Recurring license cost Missing components Dependent on third-party updates Potential design work outside Figma environment Different visual style than Morningstar Design System

Controlling Our Own Destiny

After getting input from the team, we decided to build our own wireframe kit based on these principles:

• When developing a new system, it is optimal to build in a fresh environment rather than adapting pre-existing foundations and connections. To make an analogy, imagine the challenges a city planner would face in trying to adapt an old-world city of cobblestone streets such as Lisbon to conform to the rigid grid layout of New York.
• By building and managing our own wireframe kit, we have 100% control over the design and roadmap decisions to satisfy our dynamic needs.

By building and managing our own wireframe kit, we have 100% control over the design and roadmap decisions to satisfy our dynamic needs.

Linking With the Figma Network

The Figma design system feature is fantastic for connecting different asset libraries within a design organization together. Every component that is published to a team’s Figma design asset library becomes a node in this network. Designers can switch, compare, or combine components from different asset libraries with ease.

By building our own wireframe kit in Figma, we can connect its components (nodes) to the current Morningstar design system network. This allows Morningstar designers to quickly adapt wireframe components to high fidelity prototypes during the iterative execution phase, accelerating the building process. Example: a designer can swap a button wireframe to a MDS button with a couple of clicks, maintaining the button’s X and Y position in a prototype’s frame.

After deciding to build our own wireframe kit, we rolled up our sleeves and got to work.

Introducing The Wealth Wireframe Kit

The Wealth wireframe kit is a collection of low-fidelity components in Figma that imitates the most popular elements from the Morningstar Design System and Morningstar Wealth Design Assets Libraries. The wireframe kit’s components were designed to be abstract rather than concrete based on the team’s preference during a vote. The structure of the wireframe kit follows the atomic design system methodology created by Brad Frost.

This example shows the wireframe kit being used in a desktop workflow for sub advisory.

This is another instance of the kit being used in an all-accounts list webpage.

To ensure there were no navigational issues while searching for wireframe components through Figma’s asset search feature, we optimized the metadata for each component. Examples of metadata keywords include “wireframe”, the atomic level of the component (Atoms, Molecules, Organisms), the component’s name, and variant property language.

For wireframe components that are in variant systems with different states (default, hover, active, etc.), we implemented interactivity between these states for Figma’s prototyping mode. Designers can switch the state of wireframes in the prototype presentation mode with ease, not having to worry about duplicating frames just to alter the state of one element.

Feedback From Designers

The Wealth Wireframe kit has been in use for two quarters now, and our team has identified numerous positive impacts from its implementation into low fidelity prototypes during the discovery phase. Some of the recent feedback we’ve heard from designers follows:

“The wireframe kit has proven to be a great framework for initial conversations of how a product could function to help facilitate conversations with product and technology. It's allowed us to focus on workflow architecture, concept, and the overall experience, keeping stakeholders engaged on functionality first.”

“By having access to premade components, I’ve been able to quickly drag and drop wireframes into my prototype. The responsiveness of the wireframe kit’s structure has allowed me to make rapid adjustments when a project’s requirements are revised.”

“I’ve noticed that prototypes with wireframes follow a connected design language and user interface. It has been easier for me to communicate, understand, and share low-fidelity prototypes with teammates and stakeholders.”

Based on usage metrics in Figma, the most popular wireframe components by insert count are the navigation bar (1,941 insertions), button (956), masthead (928), and data table (486). Over the last three months, the wireframe components have been incorporated into prototypes approximately 167 times on average.

The Power of Simplicity

Throughout the journey of building the Wealth wireframe kit, we learned invaluable lessons that shaped our understanding of user experience design. Thoughtful planning, organization, and collaboration with teammates is vital to developing a robust, dynamic system that supports design work. Regular feedback and iteration have allowed us to refine our wireframe kit, resulting in a more user-centric and intuitive experience. And we have gained a deeper appreciation for the power of simplicity and clarity in design.

We have gained a deeper appreciation for the power of simplicity and clarity in design.

By distilling complex ideas into the essential elements of components, we can communicate more effectively and enhance user comprehension amongst a broader audience.

The Path Ahead

As with any design library, our wireframe kit is always evolving. Open items that we are currently conducting exploration on are:

• Currently the Wealth wireframe kit exists in the same Figma design file as our Morningstar Investment Management Design Assets Library, which can be difficult for designers to find in a library of that size. How might we build a new design assets library that only contains our wireframe kit without interfering with ongoing design work that is utilizing its components?
• The initial build of the wireframe kit’s components was designed to be abstract rather than concrete. Because the components are without details, it can be difficult for designers or stakeholders to recognize some components. How might we add affordances to make wireframe components easier to recognize without steering away from the abstract theme?
• Our wireframe kit was built to service the needs of the Wealth design team, not those of other Morningstar business units. By collaborating with the Morningstar Design System team, how might we build a global wireframe kit in Figma that supports all Morningstar designers?

Special shout out to the Wealth design team for their invaluable feedback and support during the define and testing phases of this project. And a huge thank you to Caroline Collins, whose guidance and planning was instrumental to the success of our wireframe kit.