2023  ✦  Product Design

In the past decade, productivity software has advanced significantly, accelerating knowledge work. Artificial intelligence (AI) and large language models (LLMs) have further potential to automate repetitive tasks.

Embra, a cutting-edge AI platform, addresses the challenge of integrating personal, work, and desktop contexts into AI interactions, providing users with superior, tailored interactions. It offers flexibility with various LLMs, plugins, file integration, and custom commands for streamlined workflow automation.

Overview

In the past decade, productivity software has advanced significantly, accelerating knowledge work. Artificial intelligence (AI) and large language models (LLMs) have further potential to automate repetitive tasks.

Embra, a cutting-edge AI platform, addresses the challenge of integrating personal, work, and desktop contexts into AI interactions, providing users with superior, tailored interactions. It offers flexibility with various LLMs, plugins, file integration, and custom commands for streamlined workflow automation.

Staff Product Designer/Founding Designer

Client: Embra

Project Type: Product Design

Role: Staff Product Designer

Duration: 6 weeks

What our users expected

As we engaged with our early users, we learned that many of them were early adopters of AI. They had tested multiple AI tools for their work and often used different applications for different purposes.

Our users expressed interest in invoking Embra on top of their open apps, without interrupting their current workflow. Specifically, they indicated that they had developed a habit with applications like Raycast or Spotlight and wanted to replicate that with Embra. They wanted a way to quickly imbue Embra with context and access enriched AI responses without disrupting their flow.

Ideating the OS Overlay

To present user with a quick, contextual experience that surfaces them relevant suggestions and access to AI chat, we needed to ideate a product that was flexible, lightweight, but powerful enough to handle multi-step commands.

We decided to offer the OS Overlay which would allow users to invoke Embra overtop of their open applications without interrupting their workflow. This new product builds upon the existing Embra client application and provides users the ability to quickly invoke Embra, receive contextual AI responses, and kick off commands.

Proposed features

To ensure our implementation of the Overlay was accommodating the most high value user flows, we proposed the following features:

1. Quick invocation of Embra
2. Contextual AI suggestions
3. Streamlined AI chat
4. Command initiation
5. Handoff to client application
6. Flexible, lightweight design

Contextual suggestions and autocomplete

Our ability to provide contextual suggestions was initially restricted by our technology and build. We started by implementing subtle design components, including finer text and a streamlined pill shape. This helped introduce the concept of suggestions and optimize for clicking as we first developed the feature.

As the design of the Overlay progressed, we wanted to prioritized discoverability, user-friendly selection via taps or keyboard inputs, and smooth progression to recommended next actions. With that, the design of suggestions became more robust and clear.

We improved the visual design by using familiar UI patterns for contextual suggestions, ensuring consistency in both the Overlay and the Embra client app.

Emphasizing simplicity

A key focus of the OS overlay was to reduce the amount of visual components within the application in order for the user to focus their attention to the AI chat experience. Because our users were interested in a spotlight-like experience, we decided to remove navigation from the OS overlay. To accommodate for handoff between the OS overlay and the client application, we implemented a hotkey that allowed the user close the overlay and open their current thread in the client app.

Dogfooding to assess performance during development

As part of the development process, we dogfooded the OS Overlay to ensure its effectiveness. We used it amongst our team and gathered feedback  to assess its performance and impact on the user experience. We also shared early versions of the OS Overlay to Embra's user community via Discord and Slack to receive quick feedback. This allowed us to make necessary adjustments and improvements to optimize the user experience before launching the feature to the public.