LEAD UX UI DESIGNER
Map and Code a Business with AI
Dot-Star is a SaaS platform that uses natural language processing to map business processes and automate backend code.
THE CHALLENGE
Design an AI-based process to effectively integrate multiple stakeholders in business definition and deployment.
MY ROLE
Product Designer, User Research, Interaction & Visual Design, Prototyping, Video Editing and Motion Graphics
Automatically draft a business process and service map to tailor the user needs
I assisted Dreamdev Technologies, an Irish company, with their Dot-Star project. The company’s owners’ idea was to revolutionize the process of developing a business by integrating the process into code generation.
Dot-Star aims to craft an application that seamlessly translates natural language into visual process maps and auto-generated code, helping managers, designers, and development teams speed up the work and reduce errors.
My goal was to research, analyze, and propose usability solutions that improve patient appointments in an Electronic Health Record (EHR) system, addressing the issues highlighted by physicians.
View the Figma Presentation below for a complete overview
Design Decisions
Dot-Star comprises two key phases: Business Process Mapping and Code Deployment. To facilitate this, we have divided the interface into two distinct sections: Process Map and Service Map.
Process Map
Using Natural Language to Map Business Process
Business managers, designers, and developers map the system in this section. I aimed for a flowchart approach similar to apps like Miro, utilizing a user-friendly and intuitive design to facilitate system mapping. The main input field captures each process step in natural language and is editable.
* This video is an early version of dot-star and has some UI design differences from the current version
Designing Workflow Dynamics
In crafting Dot-Star’s workflow, I delved into the nuances of process steps, integrating the step processes, user actions, system reaction, edition, and decision trees. The focus is on embedding simplicity and utility within the system’s procedural flows.
Service Map
Streamlining Feature Implementation and Code Deployment for Developers
The Service Map allows developers to view approved features, edit actions and reactions, add queries, and configure settings for deploying code to their Git repositories. This area is designed to streamline the transition from concept to deployment, facilitating a more efficient development workflow.
Mobile version
Branding & UI Design
Logo
The owners had a concept in mind for the logo, and I assisted in refining the idea and selecting the color palette and typography.
Color Palette
I used HueHue, a free plugin I developed for Figma, as no other plugin option offered precise control over color quantity or hexadecimal values. Creating HueHue was my way of contributing to the community, enhancing the design process, and utilizing tools innovatively.
Duotone Iconography
I designed icons with a duotone effect to match the product’s two signature colors. This choice visually enriches the interface and reinforces brand identity from a product designer’s perspective, ensuring consistency and recognition across user interactions.
Conclusion
Tackling the usability issues of Electronic Health Records (EHRs) was more than a design challenge; it was a personal journey that validated the importance of UX and a good design is needed to improve the daily lives of physicians.
The research and design process showed that sometimes, even small changes in the interface and workflow of EHR systems could significantly reduce physician burnout and enhance patient care.