→ deploy scalable AI infrastructure on any cloud, using any hardware ☁️
→ ui/ux design, design systems 👨🏽💻
→ jul 2024 - aug 2024 🗓
→ a2labs.ai 🔗 🌎
role
Design the Web Application for A2 Labs allowing users to launch any AI model with their desired cloud and hardware. Role requirements were as follows:
- one-click deployment UX
- simplified yet informational UI (a tough balance)
- dynamic UI to account for models of all types and tech specs
pre-design process
To map out my design roadmap, I first outlined the web app's contents:
- Log In / Sign Up
- Log In with email verification or password
- Forgot password
- Home Page
- Search/Filter/Browse AI Models
- Filter by task, name, author, etc.
- Select AI Model [Card]
- Optimize Model [Modal]
- Deploy
- Credits Page
- Manage Credits and payment method(s)
- Dashboard
- View/Manage all live deployed models
- View model analytics
- Profile
- Edit profile elements
After outlining, it’s clear to see the UI heavily depends on the AI Model Card and the Optimize Model Modal. This is where the user either continues with the service or drops off if they can’t find what they need.
UX Focus: AI Model Card
With a complex product that juggles cloud types, hardware types, and AI models, user education and UI clarity are vital keystones to a proper UX. I began with educating myself on direct and indirect competitors to see how they display different AI models. When researching, I had these points at top of mind:
- What tech specs are shown for each model?
- What tech specs are hidden for each model?
- How quick/easy is it to deploy a model?
- How are models able to be filtered/sorted?
After compiling competitors Model cards, I outlined which information was shown.
Many of these cards felt cluttered, especially given they were on pages with at least 10 more of the same card with different content. There was a tough line to balance between too little and too much info.
Through surveying, it was clear users wanted the platform to pick what was best for them (75%) rather than customizing every little detail (8%). With this knowledge, I began experimenting with which information to display on these cards.
Given user feedback, I decided to lean off of choice and highlight the abilities of each model. If users are looking for certain specs, they can easily scan to find them and select what they’d like.
But I’d fallen on an issue. When repeated, the cards made the home page quite cluttered. As the web app is optimized for desktop I decided it’d be best to utilize the mouse hover feature to show and hide extra information.
With this final design, the user is not front-loaded with too much information, but is shown finer details upon hover of a Model Card.
UX Focus: Optimization Modal
I started this design process with the impossible task of allowing users to optimize their model in every way possible. My plan was then to whittle down the interface from there.
Some of the customization elements I was juggling were:
GPU / CPU / INF2 Models | Tokens / Second | Sort by Performance / Cost |
Hosting Service | Tokens / Dollar | Auto / Manual Selector |
Hosting Location | Number of GPUs | Recommended Models |
Initial passes of this design organized the information well but felt overwhelming and cluttered. The UX lost site of the product’s mission to match users and their desired models with minimal friction. Below, I will show four different iterations.
Iteration #4 was close but still felt cluttered while lacking some key tech specs. The VRAM, Model type, CPU / GPU type, and the computer number format. I then decided to hide this information behind selection of the Model. The UI cleared up while giving the user even more information to work with. A win win.
Below is the finalized version of the Optimization Modal, split up into Manual and Auto pickers.
Through extensive work and iterations, I had a solution with the least friction and complexity while still showing users everything they needed to see. The auto or manual options allowed this modal to work both with simple and/or complex users.
final designs
Please browse the final designs for the A2 Labs Web App.
conclusion
In this project, I learned the importance of information architecture in an effective user experience. Just because you can give the user every option possible does not mean you should. Surveying your intended audience can a clearer understanding of user needs, but users may still not know what is best for them if that product has yet to exist.
The A2 Labs Web App is being built by the development team and set to launch in the Fall of 2024. Keep up with updates below!