As modern technology quickly evolves, machine learning has come to the forefront of the growing field of data science. These models are trained to through large data sets to imitate the way that humans learn and improve accuracy. With these models, businesses and consumers can better solve problems, make decisions, and format predictions.
While most of these model are stuck in complex code, mia encourages data scientists take it one step further by helping them deploy their machine learning models into a visual app that ordinary people can understand.
COMPANY
mia
TIMELINE
March 2021 - May 2021
ROLE
UX/UI Designer
TOOLS
Figma, Miro
mia has tasked our team to redesign their landing page to better communicate the features and value of their product. In addition, we were tasked to explore ways to make the form-builder to create web apps more intuitive. All with the end goal increase use engagement and drive conversions.
We created a new landing page that clearly demonstrates the value of mia through animations and helps build credibility through client testimonials. The form-builder features an interactive drag and drop format where users 'build' their own web apps.
The first round of interviews were to see how users interact with the current mia and define any pain points that they faced in terms of the site's current usability and functionality. From these interviews, we were able to determine areas for opportunities and improvement.
Key Takeaways
In order to gather more information about machine learning, we talked to data scientists to discover the difficulties that they face when it comes to deploying their ML models.
Key Takeaways
Based on the information collected from extensive user interviews, we were able to narrow down our target user.
Upon defining mia's end goal, we also identified 4 main opportunities and areas for improvement:
Landing Page, Upload a Model, App Creation, and Design System.
From our initial interviews, we discovered a couple key takeaways from our users about the landing page:
We wanted to make sure to convey the value of mia through the landing page by providing more information about how mia works, the benefits of mia, and highlight its use cases. In addition, we needed to make sure that users will trust mia in order to drive engagement and conversions. Below are our findings after testing the new design:
Before users can create an app, they first needed to upload their machine learning models. In the first step of the process, users are faced with a long page of requirements and information. In addition, all the users who participated in the usability tests encountered multiple error messages.
Information Overload
8/8 users felt that there is too much information displayed and not all of the information is relevant.
Error Messages
8/8 users encountered error messages at this step.
Confusing Order
This step occurred at the end of the process while users felt that it should have been the first question asked.
In order to simplify the form, we created a one screen form that is interactive and personalized to the user. Users will first be prompted to select the framework and framework version of their model and then the requirements for that specific framework would populate the screen. This makes sure that users only see the relevant information.
For many users, the app creation process was described as boring and tedious. To start off, we looked to a variety of other 'builder-like' s ites (ie. MailChimp, Wix, Typeform) for inspiration...
One of the main issues that we identified is that users are going into the app creation process blind. They have no idea what the app will look like until they get to the end of the process. Since these apps are supposed to be a visual representation of their machine learning models, it is important for users to be able to see exactly what they are doing while creating these apps.
From here we came up with two ideas that we A/B tested.
Majority of users preferred the builder design.
After deciding on the 'Builder Design', created different iterations of the design and continued to test with users. While testing our final iteration, 6/8 fully understood how to navigate through the builder and create their own app.
During our interviews, 12 out of 17 participants expressed negative opinions on the flaws within mia's inconsistent UI. Some participants deemed mia as untrustworthy and unprofessional. We wanted to create a new design system that is polished, builds rapport and also speaks to mia's identity.
Based on our original heuristics analysis, mia's bright teal blue background accompanied by the thin white text does not pass accessibility tests.
To replace the teal blue, we went with a dark purple-blue and a blue. We wanted the blue to evoke trust with users and the purple-blue to feel modern, 'techy', but also creative.
mia's original primary font was 'Quicksand'. We all liked the roundness of 'Quicksand' as it feels modern, creative, and youthful. However, we did not like how in larger font sizes, the rounded corners became more apparent and started to feel 'comicy'. As a replacement, we recommended 'Poppins' since it keeps the roundness of 'Quicksand' but with straighter edges instead.
