Ted Boyer
Sr. 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 revolutionized the process of building device-responsive and interactive content. With its unique design, Inkling offers seamless performance and an accessible, integrated product suite. Many leading brands, including McDonald’s, Whole Foods, McGraw Hill, and ServiceNow, use Inkling as their industry training solution.

As the Senior Front-End Designer on the Professional Services team, I play a pivotal role in our customers’ success. I work with them to scope projects, code responsive brand-aligned templates, and support teams with change management and advanced design training.

My recent work has evolved beyond customer implementations. I’ve spearheaded R&D initiatives that have enhanced our tools and processes. Over the past two years, I’ve achieved significant progress in integrating Master Template (our boilerplate authoring codebase) and Product (our core software Habitat). I’ve also streamlined our Figma template, introducing efficiencies and automating laborious processes. This has led to a substantial reduction in our backlog of codebase issues and implementation times.

This work has helped shape me as a front-end designer/design engineer and improved the experience for countless authoring teams, end users, and Inkblots.

My Roles

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


  • 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. 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.

Implementation process diagram
An overview of the implementation process.

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.

Case Study

Inkternal template

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

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. 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:


  • Pain points
  • Use cases
  • Goals
  • Brand guidelines


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


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

Go Live

  • Company launch
  • Gather feedback
Miro planning & brainstorming
I led working sessions with our team in Miro to define milestones, plan the new template, and brainstorm use cases.
Inkblotter designs
Example designs from the new Inkblotter newsletter, built-in as part of the template. The new 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 times through cutting-edge efficiencies.

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.

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 strategic 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 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.

Example Jira backlog
An 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.