The Publishing design team at The New York Times are envisioning and building a new ecosystem of publishing tools for newsroom users.

While working with the team, I saw the need for designers to get ideas visualized more quickly, to validate ideas earlier in the development process. The above process takes time investment to build these wireframe components. Designers have to think through the level of fidelity to convey information to stakeholders effectively.

THE GOAL

The idea was to create a shared wireframing kit that gives all tool designers the ability to prop up ideas and validate hypothesis early.  This was supported by -

1.
Providing a holistic wirefrmaing kit that provides new Ink users a sense of the capabilities that Ink has to offer

2.
The kit helps identify Ink component gaps at an earlier stages of a product team’s process. It also provides a smooth transition into high fidelity designs because of the
1-to-1 component relationship thats build into the system

3. 
Using wireframes enables a cross-functional team to tackle concepts ealier, in lower fidelity. This helps keep teams aligned and moving quickly

Understanding the needs

I began by delving into the existing practices to glean insights and understand how the kit could address these needs. Various research methods and workshops were employed to gather diverse information.

1. An internal audit helped in identifying the current practices and roadblocks among teams

2. Affinity mapping to categorize data from user interviews with designers across platforms to understand their needs. This process helped identify and eliminate techniques previously tried during wireframing activities

3. To visualize the needs identified, a mapping was done on a spectrum of important variants like color, typography, on 10 external kit to provide an initial visual guidance

Collaboration

Working alongside designers to develop the kit was key for the it to be successful. Multiple workshops were conducted with teams during crit sessions, techniques like preference voting, blind testing to explore type density along and usability workshops.

Ink Lite Demo

Ink Lite aids in the quicker conversion of a low-fidelity to a high fidelity frame in 15seconds!

“When I present my work to engineering stakeholders, I can tell that they grasp the difference between low and high fidelity mockups immediately, and that means it’s so much easier for them to give feedback at the appropriate altitude”

~ Lead Designer, Publishing group

“These def look ~~in progress to me! I think anything that uses Ink components tends to feel Official and anything that uses a monospaced font screams prototype to me”

~ Senior Software Engineer

“I love it. It's made the wire framing stage of my work a million times easier”

~ Senior Product Designer, Publishing