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.

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.

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

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.

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

🎨

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.


Enter password to view case study