Background. Getting to work directly with our customers is a favorite part of my job. Inkling’s customers vary in both size and industry, and each customer’s content use cases differ. This means that every implementation has a unique set of challenges to solve for, which is both interesting and rewarding.

Kickoff. During kickoff, the Sales team briefs us internally to align on customer context & critical items. Then, we meet with the customer to formally kick off the project and demo the platform end-to-end for their team.

Discovery. We begin the design process with a thorough discovery. The Front-End Designer (myself) will assess and document the overall state of branding, content, and materials to work with. Then, I meet with our Content Strategist to share notes, identify problem areas, propose solutions, and prepare for customer discovery. In that session, we’ll confirm what we observed, clarify our assumptions, and address open questions. Finally, we debrief internally to align on objectives for the next steps.

Design Mockups. Before jumping in on development, we build mockups to iterate and align on a design vision. I explore proposed treatments for content and patterns and generate ideas for specific focus areas. Once I have the work in progress and ready for review, our Professional Services team will critique how the designs work and look. Then, I take notes and refine the mockups into clear directions, enhancing them for presentation. As a last step, we’ll walk through the mockups with the customer, where they can provide feedback and discuss. We integrate their comments, polish them, and receive the final sign-off.

Template Development. Once we have the green light to proceed with development, I set up the template, customize patterns based on our use case-aligned mockups, and test my work for quality, robustness, and authoring experience (AX) edge cases. Our codebase consists of HTML, Sass, CSS, various forms of media, and other bits of software. The template gets handed off to the Content Strategist so they can collaborate with me on creating content samples.

Conversion. I’ll work closely with our Content Strategist here to create content samples. We take representative pages from the customer’s source content to test and preview how the conversion rules will affect content at scale. We ship the customer’s source content to our partner, who brings all content into Inkling using the new template. The content gets returned in batches for review and approval.

Background. Prior to this initiative, the authoring templates available for internal use were reaching 10 years old and sorely out-of-date. Inkblots were missing out on the latest functionality we provide to customers, a larger and more comprehensive set of patterns (content building blocks), and the ability to create engaging Inkdocs with the recently refreshed Inkling branding.

In 2023, we kicked off a project to design and develop a brand new Inkternal template to provide Inkblots with these latest authoring tools.

Team. I led the Inkternal template project, with members representing UX, Marketing, and HR as support.

Objectives. Our goals were to:

1. Align look & feel of the template to the new Inkling brand for consistency across materials
2. Provide a useful and more thorough set of patterns for authors to design their content
3. Include the latest functionality from Master Template, our boilerplate customer project
4. Create patterns specific to the Inkblotter newsletter to allow the HR team to use and familiarize with our own product

Process. Our process took about 4 months alongside higher-priority customer work:

Discovery

• Pain points
• Use cases
• Goals
• Brand guidelines

Design

• Look & feel direction
• Pattern ideas
• Inkblotter designs
• Review & refinement

Development

• Set up template
• Build in brand elements
• Iterate on patterns
• QA testing

Go Live

• Company launch
• Gather feedback

Background. Our Figma boilerplate is a cornerstone for the design mockups phase of each implementation, but the previous version needed some critical features and efficiencies, and needed to be kept up-to-date. Because no patterns were built-in, we had to “recreate the wheel” to build simple layouts, which slowed us down significantly. And tedious manual work was involved in updating the Design Brief pages (which outline the customer’s branding as it will appear in their template).

In 2023, I built 37 essential starting points for content mockups across top pattern categories. I also connected these components to Figma’s brand new Variables feature to make them breakpoint-responsive. Instead of reworking mockups for Web, Tablet, Mobile, etc., each layout can now reflow in just a few simple clicks, thanks to these advanced components.

Furthermore, I:

• Researched and implemented Figma plugins like Table Creator, Font Awesome, and Contrast to automate existing manual processes
• Redesigned customer-facing pages to reflect a more coherent, consistent look & feel
• Documented the latest updates in our Confluence space to ensure designers can understand processes moving forward

Thanks to this Figma boilerplate overhaul, we saved ~18 hours on mockups for one of our largest customers (49 hrs scoped / 31.25 spent), and I’m excited to see how this can further reduce implementation times.

Background. Master Template is the boilerplate starter project for every customer template. In the implementation process, we create a copy of it to add the customer’s branding, pare down the pattern library, and build custom design patterns. This boilerplate approach lets designers reuse what works well, accelerating development.

Challenges. We’ve faced several challenges in the past:

1. Many cooks in the kitchen: Multiple designers have touched the patterns and code along Inkling’s decade-long history, and there hasn’t been much structured documentation or principles for how we approach development.
2. Large backlog accumulated: Our Jira backlog included roughly 80 issues, which will take time and research to fix. Furthermore, these issues comprised bugs, ideas for improvement, and long-term upgrades, and nearly all needed to be cataloged with more detail, time estimates, and logical groupings.
3. Not enough dedicated time: With heavy customer workloads, there often isn’t enough time in the year to dedicate fully to R&D.
4. Integration with Product: Historically, Master Template and the Product side haven’t interacted or communicated enough to inform each other of their work and priorities. This de-prioritization led to half-baked workarounds and a lack of support for research and building new features.

Vision. After becoming well-versed in how we build our templates, I set out to take the helm of our R&D process.

Process. In 2022-2023, I achieved significant progress individually and cross-functionally as the solo designer. I released two new versions of Master Template with substantial authoring/user interaction fixes. I took full accountability for the codebase, processes, documentation, and training/company outreach. I partnered with teams within the company to evolve its integration with Product and Engineering. I also brought back regular meetings with the Professional Services team to share sprint progress, get feedback, and solicit QA testing needs. On a personal level, I gained deep familiarity and confidence with the Master Template backlog and process in general, which felt exciting!

More recently, I advanced this integration by establishing a strategic vision, driving advocacy, and facilitating tighter team coordination and communication. First, I drafted high-level, long-term goals for Master Template, then detailed a roadmap to identify priorities and collaboration requirements. I’ve been meeting regularly with a Product Manager each month to voice concerns, share progress on our respective initiatives, and support each other. It’s been tremendously helpful to stay informed more deeply regarding roadmap items. I’ve also resolved product- and platform-level questions through our partnership, which has supported me in completing R&D issues.

Beyond this 1:1 collaboration, I’ve even involved other departments like UX and Engineering to provide feedback, gather knowledge (e.g., accessibility and screen readers), and learn about opportunities. Staying in sync has proved crucial as more Habitat features continue to be developed and released.

Results. Over two years, I’ve reduced our backlog by 75% (60 issues completed), documented release notes for each new version, and triaged new issues with greater detail. For many new patterns and improved functionality on existing ones, I’ve used modern CSS like :has() and aspect-ratio to progressively enhance current features and reduce the amount of code written. I also identified and removed nearly 90 unused patterns from the codebase to speed up development and implementation times.

This work has unlocked our ability to simplify, streamline, and create parity between the Figma boilerplate and Master Template.