ml5.js

Presented at Google Boston to the

AI Research team.

ml5js  is a javascript based creative coding platform that develops machine learning models and displays them in a friendly, comprehensive way for both artists and creative coders.

"

Role: Web design, User Experience Design, Visual Design, Research

Tools: Sketch, Paper, Invision, Adobe Illustrator

Team:  Milan Gary, Nicole Lloyd

Problem

The old website was not mirroring the mission statement of ml5js. It was not easy to navigate or clear for the users trying to understand the fundamentals of machine learning.

RESEARCH

Survey

78 people filled out the survey.

Which best describes your role?

This graph gave us a better idea of who was visiting and using the ml5js website and resources.

What features do you use the most?

Majority spend their time on the Examples pg.

What was your reason for using ml5js?

Majority use ml5js for creative independent projects

Google Analytics

To be expected, the most traffic on the website is on the 'Quickstart' pg and 'Getting Started' pg.

The average time spent on the 'Getting Started' page is 2 min.

The bounce rate is high for certain machine learning model pages.

Interviews

"

Model names are confusing and why do some links go to Stackoverflow?

...there needs to be more details on the expected input and output

"

"

What's the difference between 'experiments' and 'examples' 

Key Takeaways

1.

2.

3.

4.

56.5% of people visiting the website do not have prior knowledge or experience with machine learning or libraries. 

Information for various models are scattered creating a larger bounce rate. We should create a more consolidated Model page that consists of all the information needed to know about the model.


The survey showed us that the experiments pg is very popular but there's confusion between that and the examples page. We should create a Community page solely dedicated to the various projects by artists and creative coders.  

A better labeling system needs to be created and applied to the models in order to give the visitors a sense of what the model does before clicking into the individual model page.

Design

Info Hierarchy

Wireframes

User Flow

Final Prototype

Results

An increase in user traffic on both the model pages and resource pages

A reduced bounce rate on the pix2pix model page.

My communication skills with developers improved. We used the platform Figma to share the wireframes and discuss edits and additions.

Copyright © 2020 Milan Gary

Developed and Designed by Milan Gary

milangarydesigns@gmail.com.