Designer, Morningstar Wealth
Helping teams focus on fundamental questions
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.
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.
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.
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
Dependent on third-party updates
Potential design work outside Figma environment
Different visual style than Morningstar Design System
After getting input from the team, we decided to build our own wireframe kit based on these principles:
By building and managing our own wireframe kit, we have 100% control over the design and roadmap decisions to satisfy our dynamic needs.
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.
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.
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.
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.
As with any design library, our wireframe kit is always evolving. Open items that we are currently conducting exploration on are:
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.