Artboard 10 Copy 13.png

AE Machines - Web App (2015)

UX / UI Design for responsive web app and website for AE Machines (@aemachines), a Champaign-Urbana, IL based company designing tools to make automation design and implementation accessible to a broader group of people and businesses.

 

AE Machines - Web App

Project Builder Interface & Website

…A drag and drop design interface so that the young and non-technical can have fun learning about the internet of things. It will truly broaden the opportunity for the Internet of Things…
— Adam J. Hecktman | Director of Technology & Civic Innovation at Microsoft

Winner: 

2017 Product Design of the Year

Recognizes a product design that is unique, improves user experience, and impacts productivity as well as the greater good


Client:

AE Machines (@aemachines) is a Champaign, IL based company designing tools to make automation design and implementation accessible to a broader group of people and businesses.

Role:

UX / UI Designer

Project Description:

AE Machines approached us to create a web app allowing users to prototype simple machines that run on an Arduino microcontroller. Without any knowledge of code, users can choose hardware and design software by creating "movement patterns" based on senses and actions.

Project Goal:

AE Machines needed a foundational product to live demo with users at events and generate investor interest. The web application needed a responsive user interface intended for both desktop and tablet. I created the workflows (WCAG 2.0 accessibility compliant), interaction design and all visual graphics, as well as a redesign of the AE Machines website incorporating their cleaner branding aesthetic to match the product.

You can explore the Beta version here.


 

Discovery

Identifying Business Goals

I began the project identifying scope and business goals by conducting stakeholder interviews.  After gaining a general understanding of the "project builder" necessities, we began to explore the journey of a customer and identify potential pain points and opportunities.

 

Mapping the Customer's Journey

A customer journey map noting where the UX / UI and MVP project focus would be.

 

Arduino Crash Course

New to automation design and Arduino, I had my developer friend Steve give me a crash course on Arduino basics. It was just enough to fill my knowledge gap and give me confidence in understanding the project.

 

Whiteboard Sessions with Team + Client

Collaborative sketching meetings with the client provided an understanding of the details and uncovered business needs, client thought process, and workflows that needed further iteration.

 

 

Design

Paper Prototyping UI Ideas

Early ideas were vetted by running through mock project builds and testing basic layouts and workflows with a large paper prototype. By failing quickly and not focusing on digital concerns, I quickly exposed problems and iterated solutions that I presented to the client and team for feedback. 

 

Starting Small - Digital Layouts for Touch & Tablet

Designing first with tablet size and touch interactions in mind, early layouts were quickly prototyped in Sketch to consider spacing and touch sizes. Early, rough animated wireframes were used to explore, share and discuss ideas with both the client and project team. The wireframes unified the team's understanding of the project goals and helped define and evaluate the MVP features and create the project backlog.

A GIF showing a clip of early iteration that explored layout and interaction.

 

Another GIF showing the how the interactive elements and workflows evolved early before time and effort was put into code.

 

Sketching and Sharing

Iterative sketches helped explore and share finer details and interactions. It was a very effective way to elicit quick feedback from the client and the development team and kept everyone on the same page as the project moved forward.

 

Utilizing Style Tiles

Style tiles were created by our graphic designer Tyler to set the course for the project. Utilizing style tile #4 (client selected), I moved forward with the design of the web pages and the build page application.

 

Site Design

Expanding on the style tile, I created the layout style for the "Build" page intro, the "Transfer" and "About" pages.

 

Responsive Design

The design had to scale from tablet to large screen and accommodate touch, mouse, and keyboard (for accessibility) inputs.

Responsive design - tablet size version

Responsive design - large screen version. Using the additional horizontal screen space, the primitive and hardware card palettes are moved to the outer edges with the content stacked vertically to better support browsing with the mouse scroll wheel.

 

Shopping for Parts

Selecting "Shop Parts" will generate a shopping list of the hardware parts needed to build the project. Users can browse and add parts to their amazon.com cart for easy ordering and shipping.

 

Designing Card Interactions

Defining the interaction of a card, showing the expansion when selected and the ability to configure and delete.

 
 
 
 
 
 

SVG Icon Set

We knew we wanted SVG icons to represent primitives and hardware elements on our build cards because they required less performance and could be easily manipulated to help cue users.

 

Onboarding and Help Ideation

The help screens were intended to be a quick introduction / user onboarding feature for how to use the build interface. Given the limited time frame and budget, I was only able to deliver a visual template with examples of the implementation. It would have been great to go deeper and help develop an interactive help feature that coached users as they created their first project.

 

 

Tutorial Video

Below is a lovely tutorial video made by AE Machines on how to create a machine prototype (I was not involved in the making of this).

 

 

Some Kind Words from the Client:

 
Jon and I worked together on the frontend redesign for the AE Machines website. Jon was great at iterating over different design ideas and incorporating our feedback into his next idea. He was able to take a dated looking website, based on technology that he was not initially familiar with, and completely change the user experience to fit the needs of our company. I would love to work with Jon again.
— Eric Minnick | Co-Founder/ CEO at AE Machines
 
The site redesign was transformative, and Jon's role in the team was critical to that end result. His probing of our current process and careful analysis of our users led to an amazing initial direction and final result for the website. I think his greatest strength is taking nothing at face value, always digging deeper to understand nuances of the task at hand. I recommend Jon for any project — the more complex the better!
— Amy LaViers | Co-Founder / CTO at AE Machines