Ted BoyerSr. Front-End Designer

Inkling Templates. Driving quality and innovation for digital learning authoring tools.

Founded in 2009 by a group of former Apple employees, Inkling has transformed the process of building device-responsive and interactive content. Many leading brands, including McDonald’s, Whole Foods, McGraw Hill, and ServiceNow, rely on Inkling as their industry training solution. Customers and users appreciate our product for its unique design, performance, and integrated capabilities.

As the Senior Front-End Designer on the Professional Services team, I play a pivotal role in our customers’ success. I work with customers early in their Inkling relationship to scope projects, listen to & address use cases and special requirements, code responsive brand-aligned templates, and train teams on advanced software use and techniques.

My recent work has evolved beyond customer implementations—I’ve spearheaded innovations that have enhanced our tools and processes. In the last two years, I’ve successfully integrated Master Template (our boilerplate authoring codebase) and Product (our core software Habitat), redesigned our Figma template, and substantially reduced our backlog of codebase issues and implementation lengths. This behind-the-scenes work has improved the experience for countless authoring teams, end users, and Inkling teammates.

My Roles

  • Front-end design
  • Research & development
  • Product strategy
  • Documentation

Team

  • Sr. Front-End Designer: Ted Boyer
  • Sr. Content Strategist: Susan Sarratt
  • Sr. Implementation Manager: Danette Ramirez

Work completed in 2022–2024 for Inkling

Customer implementations

Empowering Inkling’s B2B customers by leading the front-end design process.

Customers I’ve helped implement into Inkling
Customers I’ve helped implement into Inkling.

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.

Implementation process diagram
An overview of the implementation process.

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.

Case Study

Inkternal template

Helping Inkblots and leadership make the most out of our products.

Inkternal
Inkternal is Inkling’s organization-wide instance of our product for employees. The Inkling Library, shown above, lets users quickly find the content they need at hand.

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
Miro planning & brainstorming
I led collaborative working sessions with our team to define milestones, plan the new template, and brainstorm use cases.
Inkblotter designs
The new Inkblotter newsletter design reinforces the Inkling brand and provides fun recurring sections to inform, engage, and motivate.
Habitat custom template code
I developed the custom template using HTML, Sass, and CSS.
Inkternal template project slides
I socialized and presented the new template to our company, and made myself available for feedback and questions as users got up-to-speed.

Case Study

Figma boilerplate

Reducing implementation timelines through cutting-edge efficiencies.

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.

Our Figma pattern library
An overview of the Pattern Library.
Variables in Figma
Variables panel. These spacing variables get plugged into the pattern library components, which makes responsive design easier. With this approach, our mockups can adapt to different screen sizes in as easy as a couple clicks, saving us significant time and re-work.
Content mockups in Figma
An overview of Content Mockups (placeholder pages). A space to explore, design, and refine the customer’s source content as it’ll be brought into Habitat during conversion.
Grid structure in Figma
Designers can toggle the layout grid for a page to see its underlying grid structure.
Swapping a component instance in Figma
Designers can swap the instance to see how their pattern might look in a different style, while keeping content intact.
Example Design Brief pages
Alongside these improvements, I overhauled the Design Brief pages for visual consistency. The goal of the design brief is to outline which brand assets will be added to the template, and helps the customer imagine all of the available options they will have before the template is built.

Case Study

Master Template R&D

Establishing and driving a strategy and vision for our front-end authoring codebase.

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.

Example Jira backlog
Previous example of our Jira backlog.
Example Confluence documentation
I created new reference documentation, such as this Customer FAQ, to share in-depth knowledge and guides.
Master Template slides
I’ve also presented at company meetings to advocate for this lesser-known yet critical area of our product.
Automation ideas
I generated detailed ideas for automating Master Template and Professional Services processes. This was a massive breakthrough for me in articulating areas for improvement and sharing these with Customer Success leadership.