Componentized templating system

Using templates as components to create new pages quickly and efficently

While I was at PuppySpot, I worked with the business, marketing, and product teams to create a system that will facilitate converting their older "legacy" web pages to a new, modern design. This system also needed to help them to rapidly deploy new pages and update sections when needed.

I designed a component system based on a series of templates that can easily be stitched together in arbitrary order.

Once the component templates were created, the frontend team could quickly create a new page layout by simply including the components in the order that Marketing wants. At the same time, they can tie each component to the CMS.

Creating new pages becomes trivial for the Frontend team, and Marketing is now able to adjust and fine-tune content and images without needing to go through another development/release cycle.

Examples: The basic component system was created in Sketch to hand off to developers and designers, showing all the templates and how they should change depending on viewport size. I then created a prototype of the templates and individual pages. For a quick overview, see the Sketch and full template overviews below, or explore a more in-depth before/after comparison.

Design stage 1: Sketch Templates

Sketch templates showing all templates and how they behave across different viewport widths.

Design stage 2: Prototypes

Working prototype showing example of how all the components behave. Some with a parallax scrolling effect, and some without. The parallax effect is 100% CSS, and can be applied to any component, although it is best on A, B, C, or D.

Evolution of a design

Progress through the first few iterations of a design

The project was to make an interface that was more colorful and less clinical for a gene sequencer. The instrument was originally intended for a less scientific audience. Whereas the usual audience for these instruments are large universities and labs, this instrument was going to be marketed towards doctors, veterinarians, and other smaller, non-research oriented places.

Creating a streamlined and simple-to-follow interface for genetic testing was the primary task

The interface was to be a touch-screen, about the size of an iPad. Touch targets and legibility of information presented per screen also needed to be considered.

These prototypes were completely interactive, built from standard HTML5, CSS, and JavaScript. Having a working prototype greatly facilitated troubleshooting the workflow, finding pain points, and bridging the gap between hardware, software, and interface early in the process. When questions arose or pain points were identified, it allowed for quick changes early in the development process.

Marketing was still working on the final color palette when I was making these, so instead I used some of the standard company colors. While the final version doesn't use any of these colors, the basic workflow I designed and refined though extensive user testing is still there.

I decided to divide up the process, and have each screen represent a single task the user needed to accomplish before proceeding. Some screens required user input, and others were to show that the instrument was busy processing, calibrating, or sequencing.

I wanted a fluid interface that moved in from the right, and off to the left. Some steps could be completed while the instrument worked on other tasks. Using a two-paned layout was the answer, providing a way for the user to enter information and still see the instrument's progress.

Check out the extensive comparison of all iterations of the design to see how user research, feedback from the hardware and software developers, and marketing all came together to create the final product.

Final version of a prototype workflow and initial startup for a genetic sequencing device with a touch interface.

Illustration & Photography examples

Ok, not really. While i'm working on getting those ready, here's a nice little Pong animation I made using just CSS.