Year
2024
Keywords
iOS app, brand palette, email design, marketing assets
Clara AI
Clara AI
AI-Driven iOS App
Brand and interface design to support an AI-driven product
Problem
GenAI is poised to transform tech forever – but it's untested in many industries.
GenAI is poised to transform tech forever – but it's untested in many industries.
GenAI is poised to transform tech forever – but it's untested in many industries.
In 2024, large language models (ChatGPT, Perplexity, etc.) began transforming digital engagement. While healthcare showed interest, adoption was still emerging. Within this context, a digital healthcare education company explored creating a healthcare-focused AI chatbot to enhance user experience. The company chose to test genAI adoption using Minimum Viable Product (MVP) methodology.
HMW Question
Given the constraints of an MVP, how might we test the product-market fit of a conversational AI agent?
Solution
Develop and test a conversation interface using a visual language and interface patterns that are fresh, scalable, and ready for rapid rollout.
Develop and test a conversation interface using a visual language and interface patterns that are fresh, scalable, and ready for rapid rollout.
Develop and test a conversation interface using a visual language and interface patterns that are fresh, scalable, and ready for rapid rollout.
For this multi-step initiative I created fast, iterative designs to assist in testing whether this format of AI would receive engagement from the company's audience and user base. I produced a brand style and visual system to apply to all elements. I also developed a scalable design system in Figma for the product's multiple interfaces. I then worked closely with stakeholders and the AI development team as the new product, now called Clara, was built and launched.
Responsibilities
Responsive web and app designs
Design system components
Brand palette expansion, application
Logo modification, application
Design handoff and UAT
Email design
Responsive web and app designs
Design system components
Brand palette expansion, application
Logo modification, application
Design handoff and UAT
Email design
Responsive web and app designs
Design system components
Brand palette expansion, application
Logo modification, application
Design handoff and UAT
Email design
Logo Design
A logo for Clara had been generated, but needed to be visually connected to the digital healthcare platform's existing brand. I modified the original file and produced a number of variations for different applications of the brand.
Energizing Brand Palette
I built on the company's color palette to generate an array of vivid RGB colors in a spectrum of attractive shades that would be applied to Clara's interface and marketing assets.
Clara 1.0 (Pop-Up Chat)
The first version of Clara was an engaging chatbot on the homepage of the company's e-learning platform. I created user flows and designs quickly and worked with a product owner to transfer to the AI team.
Simple User Flow:
Interface Designs:
Although this product had a fast launch date, the most challenging aspect was incorporating Clara onto the website in a way that reflected the clean, fresh style of the brand. The website featured many dynamic elements that I had to balance with the chatbot to produce a positive user experience.
Results of 1.0: Success!
Initial performance indicated strong interest, leading to a group brainstorm of how the experience could evolve. The next phase focused on translating Clara into a standalone iOS app to better study its usability and potential.
Clara 2.0 (iOS App)
Updated User Flow:
iOS App Designs:
Using Apple's HIG (Human Interface Guidelines) and Figma files that Apple provides to developers, I designed features like cards, menus, and buttons that translated Clara from her current UI to one that followed HIG. This included screens like login/register, authentication, error messages, loading elements, form fields and updated chat flows.
Video: I applied Clara's brand style and guidelines to the interactive chat interface I created in Figma.
Like the first version, I collaborated in development handoff, user acceptance testing, weekly stakeholder meetings, and periodic app updates to keep the experience usable and engaging.
Conversion-Centric Marketing Design
To support adoption, I designed branded marketing emails and visual assets in Figma, collaborating closely with the development team to ensure design consistency through final result. The campaign emphasized Clara’s connection to the parent brand to reinforce trust and familiarity.
Logo Design
A logo for Clara had been generated, but needed to be visually connected to the digital healthcare platform's existing brand. I modified the original file and produced a number of variations for different applications of the brand.
Energizing Brand Palette
I built on the company's color palette to generate an array of vivid RGB colors in a spectrum of attractive shades that would be applied to Clara's interface and marketing assets.
Clara 1.0 (Pop-Up Chat)
The first version of Clara was an engaging chatbot on the homepage of the company's e-learning platform. I created user flows and designs quickly and worked with a product owner to transfer to the AI team.
Simple User Flow:
Interface Designs:
Although this product had a fast launch date, the most challenging aspect was incorporating Clara onto the website in a way that reflected the clean, fresh style of the brand. The website featured many dynamic elements that I had to balance with the chatbot to produce a positive user experience.
Results of 1.0: Success!
Initial performance indicated strong interest, leading to a group brainstorm of how the experience could evolve. The next phase focused on translating Clara into a standalone iOS app to better study its usability and potential.
Clara 2.0 (iOS App)
Updated User Flow:
iOS App Designs:
Using Apple's HIG (Human Interface Guidelines) and Figma files that Apple provides to developers, I designed features like cards, menus, and buttons that translated Clara from her current UI to one that followed HIG. This included screens like login/register, authentication, error messages, loading elements, form fields and updated chat flows.
Video: I applied Clara's brand style and guidelines to the interactive chat interface I created in Figma.
Like the first version, I collaborated in development handoff, user acceptance testing, weekly stakeholder meetings, and periodic app updates to keep the experience usable and engaging.
Conversion-Centric Marketing Design
To support adoption, I designed branded marketing emails and visual assets in Figma, collaborating closely with the development team to ensure design consistency through final result. The campaign emphasized Clara’s connection to the parent brand to reinforce trust and familiarity.
Logo Design
A logo for Clara had been generated, but needed to be visually connected to the digital healthcare platform's existing brand. I modified the original file and produced a number of variations for different applications of the brand.
Energizing Brand Palette
I built on the company's color palette to generate an array of vivid RGB colors in a spectrum of attractive shades that would be applied to Clara's interface and marketing assets.
Clara 1.0 (Pop-Up Chat)
The first version of Clara was an engaging chatbot on the homepage of the company's e-learning platform. I created user flows and designs quickly and worked with a product owner to transfer to the AI team.
Simple User Flow:
Interface Designs:
Although this product had a fast launch date, the most challenging aspect was incorporating Clara onto the website in a way that reflected the clean, fresh style of the brand. The website featured many dynamic elements that I had to balance with the chatbot to produce a positive user experience.
Results of 1.0: Success!
Initial performance indicated strong interest, leading to a group brainstorm of how the experience could evolve. The next phase focused on translating Clara into a standalone iOS app to better study its usability and potential.
Clara 2.0 (iOS App)
Updated User Flow:
iOS App Designs:
Using Apple's HIG (Human Interface Guidelines) and Figma files that Apple provides to developers, I designed features like cards, menus, and buttons that translated Clara from her current UI to one that followed HIG. This included screens like login/register, authentication, error messages, loading elements, form fields and updated chat flows.
Video: I applied Clara's brand style and guidelines to the interactive chat interface I created in Figma.
Like the first version, I collaborated in development handoff, user acceptance testing, weekly stakeholder meetings, and periodic app updates to keep the experience usable and engaging.
Conversion-Centric Marketing Design
To support adoption, I designed branded marketing emails and visual assets in Figma, collaborating closely with the development team to ensure design consistency through final result. The campaign emphasized Clara’s connection to the parent brand to reinforce trust and familiarity.
Results
Clara converts! Data proves it – AI agents can satisfy user demands and deliver consistent value to busy, on-the-go healthcare professionals.
Clara converts! Data proves it – AI agents can satisfy user demands and deliver consistent value to busy, on-the-go healthcare professionals.
Clara converts! Data proves it – AI agents can satisfy user demands and deliver consistent value to busy, on-the-go healthcare professionals.
4.7
Rating (out of 5) in the app store, with almost 100 reviews by verified providers
4.7
Rating (out of 5) in the app store, with almost 100 reviews by verified providers
4.7
Rating (out of 5) in the app store, with almost 100 reviews by verified providers
🚀
Iterative approach to product design led to success through small, measurable steps
🚀
Iterative approach to product design led to success through small, measurable steps
🚀
Iterative approach to product design led to success through small, measurable steps
🎨
Cohesive brand maintained product look & feel across all channels
🎨
Cohesive brand maintained product look & feel across all channels
🎨
Cohesive brand maintained product look & feel across all channels
Following the launch and promotion of Clara 2.0, the updated experience attracted greater engagement from healthcare professionals, and the app soon received positive reviews and ratings from users, marking the success of the novel platform. With the website chatbot and app combined, Clara continues to serve a global audience of providers and practitioners through daily interactions.
Following the launch and promotion of Clara 2.0, the updated experience attracted greater engagement from healthcare professionals, and the app soon received positive reviews and ratings from users, marking the success of the novel platform. With the website chatbot and app combined, Clara continues to serve a global audience of providers and practitioners through daily interactions.
Following the launch and promotion of Clara 2.0, the updated experience attracted greater engagement from healthcare professionals, and the app soon received positive reviews and ratings from users, marking the success of the novel platform. With the website chatbot and app combined, Clara continues to serve a global audience of providers and practitioners through daily interactions.