top of page
Context:
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.
ml5.js
Role: Web Design, UXDesign, Visual Design, Research
Methods: Qualitative Research,
Team: Milan Gary, Nicole Lloyd
Presented at Google Boston to the
AI Research team.
OverView
The Project
​
The website needed an intense redesign. 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.
The End Goal
​
To create an updated website with better information hierarchy and clarity around how to utilize the various tools it offers.
The User
​
In the redesigning process, we had to hone in on the various types of users who would use the platform.
​
We identified 3 key archetypes that would use the platform.
​
1. The Artist​
2. The Tech Educator
3. The Front End Developer
​
Design Process
1
Data Collection
2
Interview
+
synthesize
3
Sitemap
4
User flow
5
low -> high
Wireframes
Data Collection
Since this project is a redesign we had to collect more information on who currently uses the website and for what purpose. We created a survey that generated 78 responses.
​
Then we looked at google analytics on the backend of the website to gauge where heavy traffic landed and where high drop-off rates were.
Which best describes your role?
What features do you use the most?
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 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
We conducted 7 interviews with current users of the platform. Via these interviews, we utilized qualitative methodologies such as: eye-tracking, in-person design ethnography, and a prioritization exercise.
"
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'
Synthesis
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.
SiteMap
Based on the key takeaways from both the quantitative and qualitative studies we were able to redesign the information on the website to reflect the needs and desires of current users.
User Flow
From the information hierarchy stage, we started to draft various flows of how the user might move through the website.
Wireframes
Low fidelity wireframes were created in tandem with the various user flow diagrams. After presenting both the low and high fidelity designs to developers they incorporated it into the website.
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.
bottom of page