Tools: HTML + CSS (LESS), JavaScript (ES6, React, TypeScript, JQuery, Backbone.js), PHP (Symfony)
Responsibilities: Design and develop features to serve the user experience and improve funnel metrics; write unit tests; QA and fix bugs
Geppetto is Gumstix's web app for creating circuit boards. It aims to hide the technical details of electronic design by presenting a user-friendly interface with drag-and-drop components. The final product that users receive is a physical circuit board based on their in-app design.
A Few Notable Features
The following features were re/designed and coded end-to-end by me (with blessings from the higher-ups).
Board Builder
Programmatically generates a Geppetto board based on the user's functional requirements. The Board Builder automates the application workflow, offering a fast path to a finalized design. So far, over 4,000 designs have been generated, and the Builder has improved sign-up rates by approximately 20%. Its main draw is in introducing new users to Geppetto and showing, quickly, what Geppetto can produce.
Users select their desired components from a list of suggestions. The Board Builder will check data requirements and compatibility. For example, in the above image, the Builder detected that Audio Codec was a requirement of Speaker.
On submission, Geppetto places components onto the board and establishes available connections.
This board is still incomplete (red) because it is missing power sources. Geppetto will detect this and offer an option to find power components.
Components Library
I reworked the components library with two goals in mind:
- Reduce manual effort taken in navigating category shelves.
- Reduce unnecessary screen real estate.
The previous implementation used JQuery UI Accordion, which took up a lot of vertical space. When users wanted to open another shelf (such as COM Connectors), they had to scroll through the list of components and find it, every time. The new implementation is a custom React component (with a Backbone.View wrapper for interfacing with legacy code).
Design Helper
A tutorial tool that examines the user's design state, and informs them of errors. This feature is aimed at improving the Geppetto user funnel, where:
- Users can see exactly what is wrong with their design. For example, if one of their components is not connected, it will inform them which component it is.
- Users are notified when their design is fully valid and can be ordered.
