Clarifying the product offering and reducing visual complexity with architecture analysis, usability testing and prototype development for Arduino.com
Clarifying the product offering
and reducing visual complexity
with architecture analysis, usability testing and prototype development for Arduino.com
Date Completed
June, 2019
Overview
Arduino products came to market in 2005 as a tool for students and hobbyists. However, its e-commerce site is visually and navigationally complex, providing little explanation of the product for those new to the maker movement. A UX initiative was severely needed to support Stem education, parents, students, and teachers with clear, consistent, minimalistic architecture, taxonomy, and labeling.
I set out to completely redesign Arduino’s uses of visual language and information architecture to reduce cart abandonment, and improve information scent. The final in-code prototype was informed by content and heuristics analysis, task-based usability testing, and minimalist visual language.
I acted as a UX team of one for this research while also consulting with other UX professionals in my network when considering audience and task-specific organizational schemes in e-commerce.
Process
To better understand Arduino
as a business and a brand, I
started the initiative with domain
research and business model
analysis.
Business Model Analysis
Arduino is one of the most visible and successful brands in the maker-space. Started in 2005 the company produces open source hardware with a business model for capitalizing on a company based on giving everything away. The only piece of intellectual property the team reserved was the name Arduino, which it trademarked. If anyone wants to sell boards using that name, they have to pay a small fee to Arduino.
Primary model, knowledge based
Open source products inspire more interest and more free publicity than a piece of proprietary, closed hardware. What's more, excited makers are encouraged to hack Arduino products and contact the Arduino team to offer improvements. This strategy works to both grow the brand and capitalize on the free work of makers interested in participating in the maker community and improving the product and brand.
Secondary model, hub
Arduino's open source business model inspires a community of makers and positioned the company as, "a service for empowering others to do things for themselves" as opposed to competing on volume or price by selling more circuit boards, or kits or books or magazines. This strategy produces two returns for the company. Clients of Banzi's design firm often want him to create Arduino-powered products. For example, one client wanted to control LED arrays. Poking around online, Banzi found that someone in France had already published Arduino code that did the job. Banzi took the code and was done
- The growing Arduino community performs free labor for the consultants. Clients of Banzi's design firm often want him to create Arduino-powered products. For example, one client wanted to control LED arrays. Poking around online, Banzi found that someone in France had already published Arduino code that did the job. Banzi took the code and was done.
- The open source business model encourages competition and a larger market while Arduino matains a competitive edge on innovation and quality.The Arduino team understoods its device and customers better than just about anyone else, in part due to their place a a hub for the community and the work they do a makers with Arduino's products.
To develop a sense of how the business model is aligned with taxonomy and labeling, I mapped the landing page, and reviewed sub page navigation of the current site
Arduino home
The home page displays 29 links, 21 of which are redundant, 10 of which are blog pages. The page provides little structure to support the user's initial orientation and gulf of execution.
Store
Breadcrumbs are not displayed on the landing page. The navigation system does not include a home link and is not function consistently. The current page is indicated for the subcategory “kits” but not for “shipping policy.” The Navigation system does not remain in a consistent location across all categories.
Online tools
Visiting online tools loads the page in a new tab without an apparent reason, preventing continuous site navigation.
Education
The navigation system of anchor links is not functioning correctly. Selecting “Arduino Education” after visiting “resources” does not scroll back up to that section. The color change indicating the current location does not load instantly, confirming having selected the link.
Reference
The navigation system is inconsistent across categories, disappearing when visiting “libraries.” The navigation system also inconsistently indicates the current location. Color state change showing the current location is non-working.
Blog
The navigation system drops down below the fold during use. The horizontal orientation would maintain consistency with the “project hub.”
Project hub
Visiting the online tools link loads the page in a new tab without an apparent reason, preventing continuous site navigation.
Arduino user groups
The navigation system appears in an inconsistent location and scrolls up out of view when links are visited.
Products
The navigation system of anchor links is not functioning correctly. The color change indicating the current location is not displaying the category being viewed.
With the architecture mapped and analyzed for heuristics and visual design mistakes, I was ready to task users with making purchases and finding information to see where they were struggling and why
Current bounce rates for Ardino are greater than 45%. To work toward reducing the frustrations involved I chose to work with extreme users. I focused on older and less technical users with no knowledge of Arduino products.
I planned and conducted task based user testing of scenarios important to Arduino's business goals as a knowledge based business acting as a maker-space community hub
Scenario #1
A high school senior is working on an obstacle avoiding robot and needs two parts. He has found the project outline on the projects hub.
- Arduino Uno
- SG90 Servo Motor
Rational
Arduino Uno is one of the companies primary products. What if any problems are encountered finding it? Do users find it by visiting a top level link and see it quickly in a scroll or do they find that they need to conduct a search for it by name
Scenario #2
An 8th grade student is looking for Arduino certification information as part of a STEM program.
Rational
This information is found in the education category. Testing for its ease of use will show if audience specific categories are working.
Scenario #3
A student is looking for a two player game project he was talking about with an interested friend.
Rational
This information is located in the project hub, which is in the category community. This scenario would test the taxonomy and labeling and tell me if this essential category needs to be surfaced to top-level navigation as its category.
.svg)
To begin designing a revised interface I set out to define the end goals for the initiative, amplify existing benefits and create new benefits for key behaviours
End Goals
Draw more students, parents and teachers into the maker movement by supporting and increasing intrinsic motivations like interest, enjoyment and satisfaction with maker experiences and Arduino products.
Key Behaviors
- Find and purchase the right product for a project
- Find a project in the project hub to inform a purchase
- Post a completed project in the project hub
Behavioural triggers, motivations, and ability
Supporting the motivation of those new to Arduino and experienced makers is essential. To ensure that both can engage in critical behaviors, building triggers that support and focus motivation is central to the design of taxonomy and labeling for key behaviors.
- Trigger: Label site taxonomy with action oriented terms for key behaviors
- Trigger: Develop product onboarding CTAs that clarify the process for identifying a project by skill level and selecting the appropriate hardware
Barriers
- Cognitive overload: Limit the number of choices for users within the first gulf of evaluation to overcome bounce rates associated with choice overload.
- Cognitive overload: Ensure that users have the confidence to make the decision involved in key behaviors to overcome the bounce rates associated with decision paralysis and procrastination.
- Mental models: Influence what people pay attention to in complicated situations, and define how people approach and solve problems. Ensure that users have a clear understanding of how to decide on a project, and or purchase the correct hardware.
With end goals, key behaviors, triggers and barriers defined I identified related problems encountered by users
Scenario #1
Key behavior: purchase
The participant has a list of parts for a project which he is tasked to find on the site.
Observed barriers: cognitive overload
- Poor use of visual language to add meaningful structure
- Too many navigation options
- Confusing labeling and organizational schemes. There are three routes to the desired product. Store, Buy An Arduino, and Hardware. Each is less definitive than the action oriented label — Shop Arduino.
Behavioral trigger
Trigger the desired behavior by placing first in primary navigation as an action oriented call to action.
Scenario #2
Key behavior: find information
Participant is looking for Arduino certification information as part of a STEM program.
Observed barriers: mental models
- Banner blindness may be an issue due to the location of the category in a place that violates extrinsic consistency.
- Vague labeling makes it unclear if "education" is a category for teachers, or learning Arduino.
- The context for labeling is inconsistent. Professional, sets a pattern of meaning that defined education as a category for teachers.
Behavioral trigger
Trigger the desired behavior through extrinsically consistent use of audience specific and task oriented organization schemes.
Scenario #3
Key behavior: define product purchase
The participant is looking for a two player game project he has been directed to.
Observed barriers: mental models
- The category "community" is not aligned with the user intent for those seeking a project. Participating in community is part of a separate goal from finding a project to defining purchase decisions.
Behavioral trigger
Trigger the desired behavior by placing a task specific call to action in primary global navigation. A category, "browse projects" would support the user intending to make a purchase by providing the list of needed hardware.
With formative research complete I began addressing identified barriers for key behaviors with wireframes organizational schemes and a revised sitemap
To reduce cognitive overload I took a minimalist approach and set out to reduce the overall complexity of the interface, and offer clear triggers for desired behaviors with a task based org scheme of action oriented category labels.
To provide a clear mental model for users new to Arduino, I used a slider of images depicting the steps in the process of finding and selecting hardware for a project paired with an introductory paragraph and lightboxes explaining the steps of the process.
Having defined organizational schemes I conducted a content assessment to evaluate needed changes to content for pages deeper in the site
The revised information architecture was prototyped in Webflow allowing for animated interaction design to play a role in further users testing
Reflections & takeaways
This study was enjoyable in a few ways. It was refreshing to work on a problem that proved to need visual communication design as much as information architecture. When participants had to pick up the scent of information required for their task, the initial gulf of execution was long and filled with frowns and grimaces. Whitespace, type alignments, and spot color play a vital role in the structure of information that supports users' initial encounter with the prototype.
The challenge of site redesigns like Arduino is, at least in part, that you really can't test your redesign thoroughly without doing more work on development than can be done strictly as a test. The critical tasks tested here are only testable on a site where all of the pages exist to end up on the wrong page. For the next round of testing, I might focus on testing time to initiate action for participants' gulf of execution. This would tell us something essential and concrete about the changes made.