Beacon Resource Library Builder

A screenshot of the Beacon resource Library Builder tool
3,000 libraries created
14,130 resources uploaded
40% increase in MRR

Give the people what they want.

After extensive research I led the visual design process for a new product that would ultimately increase Monthly Recurring Revenue by 40%

Following extensive user research (see previous case study) I designed a new product to help our customers save time and generate more leads.

My Role

  • UX Design – user interviews, wireframes, usability tests
  • UI Design – mockups, prototypes
  • Front End Development – HTML, CSS
  • Marketing – Promo videos and animation


I’ve written extensively about my approach to wireframing in the Dashboard Redesign case study.

Templating System

I designed multiple templates so people could upload their content and instantly have a beautiful resource library of their own.

User Interface

Since our core users were small business owners it was important that we didn’t overwhelm them with too many options in the interface. I designed a series of contextual menus that would appear when a user clicked on a specific item on screen. Customers would use these menus to help users change colors, fonts and imagery.

Designing For Heavy Use

From user interviews I knew that some customers planned on uploading thousands of resources to a single library. This meant that the ‘resource management’ view of the library was hugely important. I designed a system that facilitated both high level and low level tasks so a user could work efficiently from a single screen.

High Level Tasks

These tasks include:

  • Reorder resources
  • Find a specific resource
  • Group resources together
  • Delete multiple resources

Low Level Tasks

These tasks include:

  • Change resource title
  • Change resource thumbnail
  • View resource file
  • Change opt-in settings of a resource


I chose Font Awesome’s ever expanding library of icons to help guide users throughout the interface.

Front End Development

I built the HTML and CSS structure of my designs with Bootstrap. This meant that I could make sure that the mobile view was perfect before the developers took over.

Prototyping / Interaction Design

For a project like this flat mockups only scratch the surface. I needed to experiment with various solutions to the numerous interactions that would take place with this type of product.

This is a Figma Prototype that I created to help with a discussion around menu elements in the new product:

Ultimately this iteration didn’t make it into the final product but the prototype did help to illustrate problems that were not immediately apparent when working with flat mockups.


I created a series of custom animations and videos that were used in promotional materials and help docs.