Overview

BACKGROUND + Problem

The main purpose of the wireframing process in product design is to give clear insight on page structure and user interaction.

When designing wireframes, designers often get caught up in visual details, spending more time on creating and sourcing elements than focusing on user flows and structure.

GOAL

Streamline the process of creating wireframes to allow designers to focus on the structure and functionality of the screen as opposed to its visual representation.t

SOLUTION

A simplified wireframe design kit for designers to quickly concept and build wireframes and user flows in Figma.

ROLE

Product Designer

Go to Solution

Research

WHAT MAKES A GOOD WIREFRAME?

For my research, I studied existing design kits, wireframe-focused articles by other designers, case studies, and my own experience as a designer.

Focusing on mid-fidelity wireframes, which gives the audience enough context without stylistic choices, this led to the following insight on what makes a good wireframe:
‍

Wireframes should be a blueprint of a page's structure, layout, information, and functions.
Wireframes should be focused on communicating ideas, user flow, and goals.
Wireframes should plan the hierarchy of content.
Wireframe should show how a user interacts with it.

PAIN POINTS

Designers don't want to reinvent the wheel everytime they have to make wireframes.

Designers lose time by focusing on creating or sourcing design elements.

Wireframes can often be too stylized and distract the audience.

Wireframes can easily get too specific which takes away from the intention of the screen.

OVERVIEW

Restaurant owners need it to be customizable to their brand while still being simple to edit. Customers need it to be accessible and intuitive to navigate.

Various Figjam Notes

Solution

A simplified wireframe design kit for designers to quickly concept and build wireframes and user flows in Figma.

WHAT IS FIGMA?

The library will be built in Figma, an extensive design program used for interface design. Figma allows the library to be used in collaboration between teams and to the Figma community of designers.

WHAT ARE COMPONENTS?

Components are elements you can reuse across multiple designs. They help to create and manage consistent designs and can be highly customizable.
*For example, a design can utilize one button component across an app design that can be customized by size, color, and font weight.

Figma Link in Progress

Primary Goals

Flexible Building Blocks
(placeholders)

Organized Library

General Icon System

Consistent but Non-stylized Design System

User Flow Elements

Ready-made Templates

The Process: Zone, Layout, Specify

Depending on timeline, the wireframe process can be quick in some projects and more detailed in others. Block placeholder components make it easy for designers to brainstorm structure by zoning sections, or go straight to laying out more specific content.

Example: User Flow

Hardwired includes annotation and directional elements that designers can use to present user flows.

Design Library

BUILT IN FIGMA

Hardwired's components and templates are designed on a 4pt grid system for flexibility and consistency. The design library is ever growing and consists of base components such as buttons and input fields as well as more complex components such as user registration forms and data tables.

Component Overview

Content Placeholders

Content blocks can quickly be specified by choosing one of the pre-built settings or using a label.

Text Placeholders

With block and single-line options for text placeholders, designers can switch between different text weights and sizes as they build.

Prebuilt Assets

Assets such as navigation bars can be customized (font weight, icons, labels) straight from the library.

Conclusion

KEY TAKEAWAY

Overall, I found that there will always be ways to make a design system work better and the only way to find out how was by continuously testing.

I built Hardwired while working on multiple projects simultaneously. This allowed me to test out components within different scenarios. This led to multiple rounds of edits that ultimately made the library more efficient.

Simplicity vs. Specificity

I focused on giving designers the flexibility of specifically calling out certain elements while leaving others vague. For example, section headers often need to be specified so the audience knows what they’re looking at, but image captions can be left as a text block placeholder and changed within the settings when necessary.

Going Back to the Research

In the process of building out the system, it was easy to get caught up in visual details and creating complex settings within components. By coming back to the research insight and what makes a good wireframe, I was able to stay on track with the initial goals in mind.

Moving Forward

As I create more wireframes, the design library will grow to have more elements. I also plan on integrating the use of variables within component settings to further streamline the editing process.

After testing with designers, the end goal is to publish it to Figma’s community for all to use.

Cindy Q. Nguyen

Cindy Q. Nguyen

Restaurant owners need it to be customizable to their brand while still being simple to edit. Customers need it to be accessible and intuitive to navigate.

More Projects

Contact