CIRCUITO.IO

Automagical circuit design software by Roboplan.

BACKGROUND

circuito.io is an online circuit design tool for Makers and Prototypers, built by the team at Roboplan. Users can select primary components for an electronic project and circuito.io will automatically generate schematics, a detailed Bill of Materials, test code and wiring instructions.

As the sole Product UX/UI Designer at Roboplan, I participated in all product development, design and research activities. From designing new features and a full product UI redesign, to conducting research and product analysis, through handoff and management of product development.

THIS CASE STUDY

Roboplan is a fast paced startup working under Agile methodology, so product updates and changes are made quickly. As such, this case study is organized by quarter, in order to clearly present a glimpse of the main work that was done in correlation to each quarter's business goals and KPIs.

RESEARCH PLAN

The ideal persona, at this stage in the product, for circuito.io was called the 'Maker' - in short, an individual who creates small robotic projects as part of a hobby. Research had been conducting to learn the habits and personalities of this end-user, but it had never been organized. Working with the PM, I created relevant use cases, persona workflow documents and product feature outlines.

WALKTHROUGH

When I started at Roboplan, circuito.io was live with just under 10,000 monthly active users. There was no walkthrough, on-boarding or any other explanation for a new user of how to user the software. My first task was to create an on-boarding experience.

Due to the short timeframe to launch this feature, together with the PM we decided to create a 4 page walkthrough with a basic explanation of what the software is and how to get started.

LIVE SCHEMATIC

This biggest project of Q4.2017 was the update to 'Live Schematic'. Before this update, users would have to select their components, drag & drop them onto the workspace and then 'submit' to be taken to a new page where they could view their schematic. If any changes in components were made, users would have to 'submit' again. Once 'Live Schematic' was implemented, the schematic was created for the user on the spot in the workspace. I designed all interactions and UI for the new feature.

NEW USER MARKET RESEARCH

Roboplan decided that in order to make the product viable for their business goals, they would need to build a stronger base of professional users. I was tasked with conducting market research in order to learn more about a new theoretical persona, 'The Entrepreneur.' Our hypothesis was that hardware engineers with new product ideas, looking to bring their products to market could benefit from using the circuito.io software.

After sending out a survey and contacting over 50 entrepreneurs, three of which agreed to an interview, we came to the conclusion that 'The Entrepreneur' was not a viable persona who's needs matched up with our product. Our hypothesis worked under the assumption that 'The Entrepreneur' was also a hardware engineer, but we discovered that in the majority of cases these roles are filled by two separate people; the business minded entrepreneur who had the product idea, and the hardware engineer who is hired to build the idea.

PRODUCT REDESIGN

In order to enhance the user experience and make key product features more accessible, I completely redesigned the UI of the app.

This redesign also included the creation of a landing page for circuito.io as well as 'product pages' - full pages of information about the different components available on circuito.io.

STYLE GUIDE

Up until this point, there was no set style or brand guidelines for circuito.io. Every design element was arbitrary, "generally" trying to keep with some consistency. After pushing the importance of this, I finally had the opportunity to work closely with the dev team in order to build this.

The style guide not only enhanced the look and feel of circuito.io, but also increased productivity and automation between dev and design.

BLOG REDESIGN

Following our app redesign, and as part of our quarterly KPI goal to increase user traffic, the Marketing team wanted to move our blog from it's buggy Wordpress home to a new, cleaner and easier to navigate site, built by our dev team using in-app CMS. The blog redesign included a new landing page and navigation, blog post pages and project pages.

DESIGN & BUY

circuito.io provided US users with the option to purchase the components for their projects directly through circuito.io. Another KPI of this quarter was to increase the amount of monthly purchases. To encourage this action from users, I imprelemted several new features:

1.  Redesigned the 'Parts' page to provide more information on each component as well as adding an 'Add to Cart' button

2. Created a 'Cart' button that appears on all pages of the app. When hovered upon, the a dropdown of the items in the user's cart appears.

3. Brought the checkout process (which had originally been hosted on FoxyCart) into the app, to created a more seamless checkout process as well as to increase reliability and user trust.

'AGREE TO TERMS' TESTING

Due to legal requirements, all users must agree to terms before entering the circuito.io platform. Originally, the 'agree to terms' was located as a checkbox on the first page of the walkthrough.

From a user's perspective, this was a huge pain point and we were seeing a large drop-off of users at this stage in the walkthrough and decided to take a closer look at the walkthrough to see how we can make it more user friendly.

I designed multiple potential solutions and conducted usability tests in order to find the most effective one. After employing the new design, we saw a dramatic increase of users making it past this stage in the flow.

FEATURE UPDATES

There were three other main feature updates that I worked on this quarter.

Updated both content and design of the FAQ page.

Redesign of the 'Suggest a Part' feature.

Ran usability testing for the addition of a new controller, Raspberry Pi.

PRO RESEARCH

When our pro-user hypothesis was disproved, we took what we learned and changed directions to focus on the 'Hardware Engineer' persona - a young hardware engineer working for a small company. Learning from my first round of research, I built a new research plan. I created and sent out out multiple surveys across a variety of mediums, totalling over 1,000 responses and conducted over 35 interviews .

SEE MORE OF MY WORK