My charge: take engineering wireframes and create a visually appealing interface for a machine learning platform.
Project Background.
For the purposes of this project, NDA “SynthAnalytic” is the proxy that will represent the “company”.
The firm aims to create a comprehensive machine learning platform with both basic and enterprise-level entry points, depending on the end user's knowledge of AI coding languages such as Python, C++, and Java. Similar to other platforms that use open-source AI code, a user can access models and customize the code to start building and testing various machine learning options. Their goal is to establish a presence in the machine learning industry by offering a highly competitive pricing model to attract new corporate customers.
The Challenge.
I consulted on designing and building a complex UI mockup for the development team and designing the B2B site. The design strategy was a typical waterfall approach, as the engineers had a very good vision for the final product based on their research of other platforms. This kept my overall responsibilities firmly in the visual and user interface design lane.
The Result.
This was a challenging task due to the tight timeline. However, we managed to create a functional and visually appealing user interface and visual design that positioned the startup to compete effectively with other leading machine services in terms of usability allowing it to compete on the same level as other leading machine learning services in terms of usability.
User journey clips.
Landing Flow
Landing to Build Center Flow
Build Center “Edit Text” Flow
Build Center “Dark Theme to edit code in Mirror Cell” Flow
Animated branding element.
I strongly believe that the best user interface design should incorporate visual elements that appeal to users’ aesthetic preferences. Just because a SaaS product may seem dry in concept due to its focus on end users’ needs, it doesn’t have to be visually unappealing. A strong branding identity can really add the necessary spark.
Design —> Code
I made sure that the elements could realistically be implemented by the developers. Before showing the graphic to the team, I studied the production deliverable. I want to give credit to Jeroen on YouTube. You can watch his detailed walkthrough on integrating CSS with “Tailwind” by clicking here: FrontendFYI. His guidance was crucial in creating a code package for the development team.
Advanced prototyping.
I took full advantage of Figmas advanced variable capabilities. It was the only way to create a fully functioning, realistic experience for the engineers to use and be able to provide feedback on the specific user functions.
