Background. Working directly with our customers is a favorite part of my job. Inkling’s customers vary in size and industry, and each customer’s content use cases differ. Every implementation has unique challenges to solve, which is both exciting and rewarding.

Kickoff. First, 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 for their team.

Discovery. The Front-End Designer (myself) will thoroughly 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 the customer-facing 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 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 ready for review, our 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 sign-off.

Template Development. Our codebase consists of HTML, Sass, CSS, various media, and other bits of software. I set up the template, customize default patterns based on our use case-aligned mockups, and test my work for quality, robustness, and authoring experience (AX) edge cases. 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. Before this initiative, the authoring templates for internal use were ten years old and sorely outdated. Inkblots were missing out on the latest functionality we provide customers, a more extensive and comprehensive set of patterns (content building blocks), and the ability to create engaging Inkdocs with the recently refreshed Inkling branding.

In 2023, I led a project to design and develop a new Inkternal template to provide Inkblots with these latest authoring tools. The team included members representing UX, Marketing, and HR as support.

Objectives. Our goals were to:

1. Align the look & feel of the template to the new Inkling brand for consistency across materials
2. Provide a practical 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 product

Process. Our process took about four 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 mockup 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. The previous boilerplate also required tedious manual work to update the Design Brief pages (which outline the customer’s branding as it will appear in their template).

Initially, 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 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). I’m excited to see how this can further reduce implementation lengths.

Background. Master Template is the boilerplate starter project for every customer template. In the implementation process, we create a copy 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. At the time, we faced several challenges:

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: Our Jira backlog accumulated to roughly 80 issues, which need substantial time and research to fix. Furthermore, these issues comprised bugs, ideas for improvement, and long-term upgrades, and nearly all needed 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 has led to half-baked workarounds and a lack of support for research and building new features.

Vision and Process. After becoming well-versed in how we build our templates, I set out to take the helm of our R&D process. I achieved significant progress individually and cross-functionally as the solo designer:

• Released two new versions of Master Template with substantial authoring/user interaction fixes
• Took full accountability for the codebase, processes, documentation, and training/company outreach
• Partnered with teams within the company to evolve its integration with Product and Engineering
• Brought back regular meetings with the Professional Services team to share sprint progress, get feedback, and solicit QA testing needs
• Gained deep familiarity and confidence with the Master Template backlog and process in general

More recently, I advanced this integration by establishing a development roadmap, 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 86% (67+ 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 tasks.

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