Build and deploy AI models on the cloud quickly and with ease!
In a 3-week sprint, we redesigned the dashboard to be more operational, refined the branding with a new color scheme and design system, and improved the UX of two main processes. The result is a dashboard that delivers critical information quickly, is consistent and professional, and easier to use.
Innocuous AI approached us to enhance their platform's user interface, user experience, and design and branding. Our goal was to make the platform more user-friendly and appealing to data scientists by creating a polished and cohesive look and feel.
Given that data science isn't our primary expertise, our initial focus was on understanding the platform. We created a user flow diagram which we then had reviewed by experts at Innocuous AI.
We were on the right track with our understanding but were advised that each process could be carried out independently because they are different features. See revised user flows for each process below.
To assess the platform's usability, we conducted a heuristic evaluation using Nielsen's ten principles.
The platform violated five main principles, with severity ranging from 3 to 4 on a scale of 0-4, where 4 indicates a "usability catastrophe"
The progress bar when creating an experiment skips over “Recipe”. Users cannot see what fills that step and this could be confusing (1.1 & 1.2).
On the summary of creating an experiment (2.1), if users note an error on one of the stages they are unable to go back to that stage and edit. The edit button takes them back to the start of the process.
There is no message to prevent users from losing all their preferences selected when creating an experiment or endpoint. Images 3.1 & 3.2 show the progression of steps for creating an experiment. Image 3.3 shows preferences lost after having left the page and coming back.
Documentation linked on the platform is outdated (4.1), users have to go to the website to see up-to-date documentation (4.2).
The selection for GPU is red (5.1) which typically has a negative connotation or cancellation meaning to users.
We faced challenges in conducting a task analysis on Innocuous AI's competitors, as many of them had paywalls that restricted our access. Also, despite these applications being competitors, they varied greatly in terms of features and functionality. Watching online tutorials did not yield much inspiration or provide ideas that we could integrate into our design.
Below are Innocuous AI’s main competitors.
Our design team took inspiration from Discord's default dark UI and playful graphics to infuse a fun and engaging experience into our design.
We also recognized the growing trend of light and dark modes in modern applications, and decided to incorporate this feature into our design.
We primarily gathered insights through conducting six interviews, which included two industry interviews, two contextual inquiries, one pre-onboarding interview, and one post-boarding interview. These interviews proved to be instrumental in providing us with valuable information.
For the industry interviews, we directed our questions towards exploring the use of other platforms and the processes involved.
Could you give us a background on your position and how you use data science?
What platforms do you use to create models and synthesize data?
Can you talk about the onboarding process for these platforms - what kind of documentation was available and how was it accessed?
Our contextual inquiries yielded significant value as they enabled us to observe and identify pain points that were directly related to the platform.
Describe your experience while using Innocuous AI.
What suggestions do you have for improving the user experience of our platform?
Was there anything difficult to understand, if so, what and why?
Our onboarding questions were primarily focused on evaluating the user experience and perceived usability of the platform.
What interests you about Innocuous AI?
Can you tell me about any particularly frustrating experiences or specific pain points you've had while using a similar platform?
Would you recommend Innocuous AI to others? Why or why not?
Once we had gathered all the interview responses, we synthesized the data into an affinity map and identified three main insights.
There is no common workflow between all data scientists.
Users prefer dark backgrounds but like the ability to change to light.
There is no common workflow between all data scientists.
John was created as a result of the insights we gained from the interviews and the affinity map.
Job title: Data Scientist
Goals and needs
Deploy models efficiently and securely
Integrate with existing tools and workflows
Relevant documentation and guidance
Element of fun to allow escape monotony
John often spends a lot of time setting up and configuring cloud services, which can be time-consuming and error-prone. Easy access to relevant documentation and a seamless onboarding process are not always provided.
After assessing the needs of the users and the current functionality of the platform we created our problem statement.
Our problem statement was developed with John’s goals and pain points in mind.
Users need a fun, interactive platform with consistent design standards along with supporting guidance so that they can more easily and confidently use the platform.
We produced a series of sketches to evaluate a range of design solutions and concepts. These sketches formed the foundation of our design, guiding our decision-making and helping us to create a compelling user experience.
We then digitized the sketches and created a mid-fi prototype which we could use to test our design.
Our contextual inquiries revealed that the current flow of the platform was logical and easy to follow. In the redesign, we concentrated on rectifying UX violations while enhancing the user experience. During this project we concentrated on improving the dashboard, configuration board, and the process of creating an experiment.
We decided to use an operational dashboard that provided an overview of all three features. As price and cost transparency was one of Innocuous AI's key features, we ensured that users could monitor their funds as soon as they logged in. We included an activity log that enabled users to track their own and others' activities on the platform.
We decided to analyze and revamp the process for creating an experiment. We focused on enhancing the UX and visual layout since the original flow was functioning well.
An operational dashboard has been implemented specifically for the experiment feature, which will allow users to keep track of all activity related to their experiments in one place.
To address the issue of the progress bar skipping over the "Recipe" section in creating an experiment, we removed it from the progress bar and provided clear instructions at the beginning.
Once our mid-fi prototype was built we created a testing environment in Maze to see how it would perform.
During user testing, our goal was to assess the intuitiveness of the current flow with the minor modifications we implemented. We created five tasks to evaluate the changes made to the dashboard, Cloud IDE, and Experiment pages. The redesign was tested with six people.
The user flow once again proved to be intuitive with a 100% success rate for all tasks. However, we did get some feedback about the placement of the power switch on the Cloud IDE page.
Originally, the power switch was placed on the upper left-hand corner, which caused a bit of confusion.
Two users mentioned that the placement of the power switch didn't seem logical considering the downward flow of the page.
Testers were clicking on the code editor buttons, resulting in an 81.2% misclick rate that can be seen on the heatmap. We kept this in mind while developing the high fidelity prototype.
We understand the importance of branding in creating a unique identity for Innocuous AI. We believe that every detail matters - from the colors and fonts we choose to the language we use.
In this section, we'll share the steps we took to develop a distinctive brand, and how our branding decisions helped us to stand out in a crowded market.
The “8-Bit Kitsch” stylescape informed the direction of the color, imagery, and visual quality of the hi-fi prototype.
In order to create a cohesive and consistent experience for users, we developed a design system that encompassed key elements such as color, typography, logo, dashboard design, and components. Our goal was to establish a visual language that not only reflected Innocuous AI's brand identity but also facilitated the creation and maintenance of future design work.
We chose our color scheme to reflect our goal of providing a seamless and error-free experience. The background color, “Space Cadet”, was chosen to create a sense of professionalism and to help the user focus on the content of the platform.
The accent colors were selected from the 8-bit stylescape which was unanimously the favorite branding theme of the users.
We chose the “Lato” sans serif font to be used throughout the platform for several reasons. Lato is a clean and modern font with a large range of weights and styles, making it versatile and suitable for a variety of design contexts.
We altered the logo by making the emblem smaller to create balance and hierarchy. The name of the company was enlarged and given more prominence.
We used an 8x8 grid system for the Innocuous AI platform. It’s a versatile and flexible layout system that can accommodate a wide range of design elements, making it suitable for a platform with multiple components and functionalities. The grid system allows us to align elements and content consistently, creating a sense of visual harmony and coherence across the platform.
We designed an operational dashboard layout to accommodate Innocuous AI’s current functionality with room for growth. This platform is suitable for 7-8 pieces of information.
We created a design system with hundreds of components that utilize the type, color, and spacing guidelines established above.
The library includes light and dark mode components, allowing Innocuous AI to offer a light and dark mode.
Here’s a closer look at some of the features we developed for Innocuous AI to enhance the experience for the user.
Below are shots of our proposed redesign and the current login screen.
While we appreciated the original design's attempt at being fun and unique with its ghoulish character overlaying the product name, we felt that we could improve upon it.
To maintain a fun and engaging design, we incorporated a glitchy, tech-inspired background and added animation.
We also gave the user the ability to login with their discord or slack account information.
After some research into dashboards, we decided that it needed a complete redesign. The following quote helped guide our approach to designing a dashboard that would effectively communicate the relevant data to our users.
“A dashboard is a visual display of data used to monitor conditions and/or facilitate understanding.”
- Big Book of Dashboards
We focused on creating a clear, concise visual display that would allow users to quickly monitor the conditions and metrics most important to them. We also ensured that the dashboard was easy to understand, with clear labels and intuitive navigation, so that users could easily find the information they needed.
User’s eyes navigate dashboards starting at the upper left hand corner and move right. The most critical information must be placed in the upper left corner to ensure the user is aware of the current state of the platform. Users then scale top down with the least critical information in the lower right corner.
With that in mind we included the status of the cloud IDE in the top left corner so that users could be informed of its status because when the cloud IDE is on it’s costing the user. This is a massive improvement on the visibility of the platform’s system status.
We also redesigned the side navigation bar. Adding a gradient, different variations of the logo and some additional functionality: with the user now able to “pause all activity” with the click of a button.
We used this as another opportunity to add some more animation to the platform. It also gives the user more control and freedom when using the platform as they can click through the different sections with ease - something that isn’t possible with the current version.
We revamped the user interface for configuring server settings to make it more engaging and interactive. To achieve this, we incorporated 3D shapes and icons for each of the sections.
A message appears underneath the notification icon in the top right corner which informs the user that the previous step has been saved, so if they were to leave the process for any reason their progress wouldn’t be lost - which will save them time and prevent any unnecessary frustration.
Innocuous AI’s north star is for the user to be able to navigate the platform without reading the documentation. These tooltips (which would appear when hovering over the “i” icon) help in that mission by guiding the user with helpful information at important steps of the process.
The founders wanted to make the file manager look and feel like you are using your own computer. Adding a feature whereby the user can quickly preview a document from the file manager instead of having to download it first will dramatically increase that sense of working on a local machine.
After speaking with industry professionals we thought that this would be a great feature to include. Staring at code for hours can be a strain on the eyes. Speaking with industry professionals, they all said that they would appreciate the ability to be able to switch between a dark and light mode.
This is the most recent high-fidelity prototype that illustrates the user:
configuring the Cloud IDE, and
deploying an experiment.
I’ve used the MoSCoW method below to help ensure that the next steps are clearly defined and prioritized.
Conduct further user testing to validate the design changes and ensure they are meeting user needs.
Implement the final design changes across all pages of the website.
Conduct a competitor analysis to ensure the website is staying competitive in the market.
Consider adding additional features, such as personalized recommendations, to improve the user experience.
Integrate social media sharing buttons to allow users to easily share products on their social media channels.
The importance of research: Through this project, I learned the crucial role that research plays in design. By conducting contextual inquiries and heuristic evaluations, we were able to gain insights into the user needs and pain points, which informed our design decisions.
The power of collaboration: Working with a team of designers, branding specialists, and data scientists taught me the importance of collaboration in creating a successful product. By working together, we were able to leverage each other's strengths and expertise to create a cohesive and effective design.
The power of prototyping: Creating mid-fi and hi-fi prototypes helped us test and iterate on our designs, leading to a more user-friendly and intuitive platform. Prototyping also helped us communicate design decisions to stakeholders and gather feedback.
The challenge of designing for a technical audience: Designing for data scientists and other technical users presented unique challenges, such as balancing functionality with ease of use. This taught me the importance of understanding the audience and tailoring the design to their specific needs.
The need for continuous improvement: Design is an ongoing process, and there is always room for improvement. Through this project, I learned the importance of gathering feedback and data on the design, and using that to inform ongoing iterations and improvements to the platform.
