Don’t just add AI on top: Rethinking mobile email UX for all workflows

Published in

UX Collective

4 min read3 days ago

Many UI designers are currently tasked with extending existing interfaces with AI features, such as “copilots” and chatbots. On desktops, these are often added in sidebars — but on mobile devices, where screen space is limited, AI is typically layered on top of existing UIs as popups.

In this article, we explore the drawbacks of this design pattern and discuss a better alternative. Drawing on our research in Human-Computer Interaction, we introduce a redesign inspired by microtasking. We use this to improve the experience of replying to emails on smartphones.

The problem: AI “on top” hides context for using it

Mobile email UIs are a prime example for adding AI “on top”: The image below shows how several email apps added AI with a popup or overlay.

Unfortunately, this design wastes valuable screen space, because the AI popup hides the incoming email or existing draft. This forces users to remember key details from the original email while crafting an AI prompt and reviewing the generated response. This cognitive burden becomes especially problematic for longer emails or in typical mobile scenarios where users are frequently interrupted.

Leaving UI space unused, while requiring users to recall information, indicates that current AI replies are not integrated well.

The solution strategy: Microtasking keeps context

To address these issues, we applied principles from microtasking, leading to a new UI concept we call Content-Driven Local Response (CDLR). It restructures the UI for email replies into two steps:

This figure illustrates the process of replying to an email using the “Content-Driven Local Response“ feature with three screenshots: Left, incoming email with two local responses inserted as card views, including text suggestions. Centre: Usual draft UI showing the previously inserted text snippets and an “improve” button. Right: Screen shown when clicking that button, shows AI-completed email with text changes highlighted in light green. — The redesign: (1) While reading the email, tap any sentence to insert a local reply, optionally with AI sentence suggestions. (2) On a usual draft UI, connect the local replies to one coherent email — or (3) let AI do just that. Image by the author.

Step 1 — Local response: Instead of switching to a separate AI popup, users can insert responses directly within the email as they read. In a sense, the email text itself becomes the interface: Tapping a sentence inserts a response card where users can jot down a reply, notes, or keywords. This tap also signals the AI to generate sentence suggestions, which users can accept with a tap or ignore.
Step 2 — Connecting the local responses: Once users finish reading, they transition to the email draft screen, where all local responses are collected. Here, they can refine these snippets into a full reply manually — or let AI generate a coherent message from them.

Result: Flexible workflows and user control

We evaluated this design in a user study with 126 participants, comparing it to two baselines:

Manual replies: Users wrote responses without AI.
AI-generated replies: This UI mimicked the industry standard of entering a prompt for a fully AI-generated response.

Our findings show that Content-Driven Local Response (CDLR) provides a flexible middle ground between these extremes. By allowing users to draft local responses while reading, the design allowed users to engage more with the incoming email and their own thoughts on it. At the same time, AI support helped reduce typing effort and errors.

Shows time spent on reading/writing in the reply process as a horizontal bar chart. Three bars compare the new ”local responses” design against two baselines, namely fully manual typing and full AI reply generation. Colored bar segments and line styles show that the local responses sit inbetween the baselines in terms of total time and allowed participants to spend a higher proportion of time on the reading part, since they could also add local replies while reading. — As our study (N=126) showed, our design (center) involves users more, also while reading. Image by the author.

Moreover, participants also valued the added control over the final message. While full AI generation was faster, the new design also covers fast workflows: When preferring a quicker workflow, users can skip the local response step and jump straight to AI drafting. In this way, the new UI supports very flexible workflows.

This design empowers users to decide when and how to involve AI, for example, to balance speed and control.

Design lessons learned

A core principle of microtasking is keeping relevant context visible, allowing users to recognise information rather than having to recall it.

Initially, we applied this idea to help users see the incoming email while prompting AI and reviewing its output. Through our user-centred design process, we refined it further: the ability to insert local responses while reading is useful on its own — even without AI.

Put as a design insight for AI integration:

Rather than adding AI “on top” of existing UIs, we should design for users’ workflows — whether they involve AI or not. Such flexible UIs empower users to decide themselves when and how to involve AI.

So how can we redesign for these flexible workflows? Here’s our recipe:

Identify micro-decisions that users make in the workflow that currently lack explicit interaction. In email replies, this meant recognizing that users naturally decide which parts of an email to respond to while reading.
Enable users to express these moments in interaction. In our case, we allowed users to tap any sentence while reading.
Integrate AI specifically and optionally at these decision moments. For example, in our design, tapping a sentence also triggered (local) suggestions.