AE Machines - Web App
Project Builder Interface & Website
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
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.
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.
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
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).