Unlocking the Power of UX for Arduino Digital Products

Giulia Biamino
Arduino Engineering
9 min readNov 15, 2023

Meet the Arduino UX Design Team, a dynamic group dedicated to crafting seamless and user-centric journeys that elevate interactions and experiences with Arduino digital products. 🚀🌟

As our talented engineers have perfected the functionality of Arduino digital products, it’s now time to shine a spotlight on the bunch of top-notch designers that’s been working diligently behind the scenes!

The Arduino UX Design Team is a small, young and agile group of passionate individuals with different backgrounds and a common passion for design. We are musicians, makers, travellers, hikers, clubbers, surfers and art lovers.

While we’re scattered across various locations, our creative hub is at the heart of our Torino offices. It’s where we come together for brainstorming sessions, collaborative workshops, and design hacking. This team of brilliant individuals is responsible for curating the experiences of over 100,000 users who engage with Arduino’s digital products on a daily basis, striving to make their interactions satisfying and valuable.

Our dedication is to the diverse individuals who engage with our products, whether they are seeking to elevate themselves as professionals, creators, educators, or makers.

As UX Design Team at Arduino, we embark on a mission to empower Arduino in crafting exceptional digital products that not only effortlessly sell but also foster greater adoption. Our commitment to this vision lies in our relentless pursuit of enhancing the user experience across various digital touch-points and applications, throughout the entire customer journey.

We aim to transform Arduino’s mission of democratising technology into a design north star: everyone, regardless of their technical background, should be able to use Arduino digital applications and create complex IoT projects with just a few clicks.

The Arduino Ux Design Team oversees the user experience for a range of digital products, including:

  • Arduino Cloud Platform
  • IoT Remote App
  • Arduino IDE, Web and Cloud Editor
  • A set of Arduino public websites like Project Hub, Arduino Docs, and various other digital touch-points of the Arduino Eco System.

The inherent complexity of our work lies in the management of intricate products within a highly complex ecosystem. Moreover, we cater to a diverse spectrum of user profiles, necessitating a nuanced approach to our software solutions. Our user base encompasses the following categories:

  1. Makers and Hobbyists, Creative Technologists and Professional Makers
  2. Enterprises, Developers and Engineers involved in intricate product and system management
  3. Education Professionals and Professors who impart knowledge in the domains of IoT and coding.
  4. Students of different levels learning IoT and coding.

Navigating this multifaceted landscape demands a thorough understanding of these distinct user groups and the specific challenges they encounter. Making assumptions in such a context is a risky, underlining the importance of comprehensive knowledge about people using our products and the hurdles they face.

That’s why We maintain a great focus on our users, with a special emphasis on engaging with our community. Arduino makers are an enthusiastic and collaborative bunch, and their valuable input makes our work significantly more insightful.

🚀 Some recent achievements

Here are some recent design updates driven by our commitment to listening to our users and continuously improve.

Arduino Cloud 👉🏼

Arduino Cloud and IoT Cloud initially appeared as two distinct platforms, each with its own look, feel, and navigation. This inconsistency created the impression that they were separate products. To address this, we’ve introduced a unified navigation system with a scalable design, ensuring immediate access to all sections. The information architecture has been revamped into a new sidebar navigation pattern, enhancing accessibility to various cloud sections, including IoT environment, courses and resources, sketches, and editor access. Alongside these improvements, we’ve given the user interface a fresher and more refined look to enhance clarity for our users.

We’ve also revamped the home page of the platform to offer a central hub for all the crucial info our users need. Our aim was to create a personalized experience for everyone, making onboarding easy with targeted content and clear overviews. Now, from this main page, users, whether they’re makers, students, teachers, or professionals, can swiftly check their plan’s usage, open recent files, and access content tailored to their profile. We’ve made sure that whatever you are, you always have what you need right at your fingertips.

Months ago we also introduced a new way to create and manage triggers and notifications on the Arduino Cloud Platform. A highly requested feature from makers and business professionals dealing with complex IoT projects.

Triggers offer a straightforward yet powerful capability, enabling our users to effortlessly stay updated on all your Arduino IoT Cloud projects. Instead of repeatedly monitoring your dashboards for the latest updates, you can simply establish triggers that promptly notify you the moment any changes take place.

Triggers are made of two fundamental parts: a condition and an action.
If you have at least a very little familiarity with Arduino programming, you might think it’s similar to a simple “If — Then” function.

Since this was a completely new feature, we wanted to make it familiar to our users by taking advantage of an existing mental model.
So we decided to make this parallelism explicit in the interface by putting an “If” label before the Source & Condition section, and a “Then” before the Actions section.

If-then container on the left

This has the added benefit of making it immediately clear if the trigger is complete or is missing any of the two parts.

The section on the right works both as a menu to select the “ingredients” to add to the “recipe”, and as a checklist to see at a glance how the Triggers is composed; this will become very useful if eventually many actions are added, to avoid having to scroll all the way down in the main editing area.

Side section on the right for condition and actions selection

The Triggers feature launched as a MVP with just one source and one Action, but the plan is to expand it by adding more of both. We designed the interface to make it flexible enough to accommodate any kind of future improvement without the need to redesign and redevelop the page completely.

IoT Remote App 👉🏼

With the introduction of the latest release of the Arduino Cloud Web App, we’ve also dedicated efforts to craft a new navigation concept for its mobile companion, the IoT Remote App. For those who doesn’t know the app, the Arduino IoT Cloud Remote phone application empowers you to oversee and regulate all your dashboards within the Arduino IoT Cloud. Additionally, the app enables you to tap into your phone’s internal sensors, including GPS data, light sensor, IMU, and more (depending on your device).

In conjunction with the recent launch of the updated Arduino Cloud Web App, we have diligently devised a fresh navigation concept for its mobile counterpart — the IoT Remote App. Initially, the app boasted a straightforward design, rendering any elaborate navigation unnecessary. However, as features expanded, we opted to transition from the initial burger menu solution to a bottom menu. This strategic shift enhances user experience by providing immediate access to sections and simplifying interactions, aligning seamlessly with the evolving functionality of the application.

We listened to the resounding requests of our users and introduced the Dark Theme to our mobile app. This addition prompted a comprehensive review of our design components, particularly focusing on the integration of a new color palette. In adherence to best practices, we prioritized the effective communication of elevation through lighter surfaces while steering clear of stark blacks and whites. Instead, we diligently selected colors from Arduino’s brand palette to ensure brand adherence along with accessibility.

The primary challenges we encountered were centred around the visualization of the dashboard, where readability of numerical data was a must. Additionally, our diverse array of widgets demanded a cohesive color conversion strategy that could be universally applied.

After extensive exploration and experimentation, we harnessed the power of Figma tokens and variables, providing a structured framework for the new mode. This approach facilitates effortless toggling between light and dark themes and streamlines communication with our development team

Our mobile app is tailored for seamless dashboard monitoring and control of various IoT setups, whether it’s a smart home configuration, a DIY project, or a more intricate IoT arrangement. Recognising the need expressed by our users to effortlessly share dashboards with others also from mobile, we introduced the ‘Share Dashboard’ feature within the app.

Share Dashboard from IoT Remote App

Users can easily share dashboards with family, colleagues, or clients. Accessed through a kebab menu, the feature simplifies the selection of recipients from the Arduino Cloud Platform. Just type their username or email, utilize autocomplete, and tap the ‘Share’ button for quick sharing.

📐 What’s important for us

Of course, we care about beauty and we believe in its power of persuasion. The foundational skills of aesthetics, including layout, whitespace, rhythm, color, and form, drive us to shape usable and pleasant artefacts. Additionally, we work with a well-known, strong and positively regarded brand, and we take the responsibility of carrying its legacy forward very seriously.

But most of all in Arduino we are the first and foremost pursuers of usability with the challenge of concealing the complexity of our products, ensuring that users enjoy an effortlessly intuitive experience through minimalist design solutions.

Operating as a united, collaborative team, we place a strong emphasis on cooperation and knowledge sharing. Our shared goal is to enhance teamwork and curate our design system, pursuing solid consistency from conceptual ideas to individual design elements.

But most of all we combine design skills with analytical capabilities for iterative improvements. User tests, interviews, diaries, and data insights are shaping our design making it more proactive.

🏛️ Our Pillars

Combining these concepts, we’ve condensed our approach into five fundamental design pillars that unify our design team:

1. Inclusive Empowerment

Our designs empower all users, not just the highly skilled, by creating accessible and user-friendly solutions that cater to diverse needs and contexts.

2. Timeless Modularity

We design agnostic and modular solutions that transcend trends and fashions, providing lasting value and recognition while adapting to evolving requirements.

3. Simplicity with Depth

We strive for simplicity in design while maintaining depth by offering advanced functionality for users who seek more complexity and control.

4. Embracing Honest Change

We embrace constant evolution and change in our designs, ensuring backward compatibility to provide a smooth transition for existing users.

5. Designing with Heart

We infuse care and empathy into our design process, reflecting genuine consideration for the users’ emotions, experiences, and well-being.

These are just a taste of our latest updates, and we’ve got some exciting new user experiences in the oven, ready to be served up soon! 🚀🎉

It’s an exciting journey ahead for improvement and growth. We can’t wait to share more about our approach and vision while we continue to build it. Together, we aim to transform Arduino’s mission into unforgettable user experiences that resonates with the entire Arduino community and beyond.

--

--