ml5.js

"

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

Tools: Sketch, Paper, Invision, Adobe Illustrator

Team:  Milan Gary, Nicole Lloyd

Problem

RESEARCH

Survey

78 people filled out the survey.

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

Majority spend their time on the Examples pg.

What features do you use the most?

What was your reason for using ml5js?

Which best describes your role?

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.

I’m not really sure what the difference is between examples and experiments

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

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.

Info Hierarchy

Wireframes

User Flow

Final Prototype

Results

The site is currently live!

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 © 2019 Milan Gary

Developed and Designed by Milan Gary

milangarydesigns@gmail.com.