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.

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.