Google Gemini Smart Context hero

Google Gemini Smart Context

A redesign of the Google Gemini home screen for iOS, built on top of a full recreation of the app. Rebuilding it first is what let me tell Gemini's deliberate constraints apart from its unused space, and the redesign replaces the generic prompt row with two suggestion stacks that read the time of day and the work already in progress.

Timeline
4 weeks
Team
Independent
Role
Product Designer
Focus
Mobile Design
Interaction Design
Interface Analysis
Overview The Recreation Reading the Original An Idea I Set Aside Research The Redesign Reflections
Overview

The app knows a great deal and opens with none of it

Gemini can hold a long technical conversation, read a photograph, and write working code. Then you open it and get your first name, a text field, and a row of suggested prompts that would look identical on anyone else's phone. The assistant is genuinely capable. The screen you meet first uses none of that capability.

I recreated the app end to end before changing anything. That turned out to matter more than I expected, and not because it made the mockups accurate. Redrawing an interface at full size forces you to work out what every decision is buying, and several of the things I had listed as problems turned out to be trades Gemini had already made on purpose. The redesign is what was left once those were off the table.

The Recreation

Rebuilding the parts that do not come in a kit

Gemini does not follow Material Design. It runs on its own design kit, which meant almost nothing could be pulled from a library and the recreation became the largest single piece of work in the project. None of it appears in the redesign. All of it had to exist before the redesign could be measured against anything real.

A custom typeface

Gemini uses Google Sans Flex, which has rounded terminals rather than sharp ones. It reads as Google's answer to SF Pro Rounded. I drew the characters I needed as vectors instead of substituting something close, because a near miss on the type is the first thing that makes a recreation look like a recreation.

Every icon as a vector

The icon set is Gemini's own. I rebuilt each one rather than swapping in a standard equivalent, since the corner rounding and the stroke weight are most of what makes the interface feel like this product and not a generic one.

The keyboard and the status bar

Apple's materials kit does not carry either of the ones actually on my phone, so both were built from scratch. They are the furniture nobody looks at, and they are also the reason a screenshot of the recreation passes for a screenshot of the app.

The flow below runs left to right in the order a session happens, with the redesigned home screen sitting in its place so the whole thing reads as one product rather than a rebuild and a proposal kept apart. It follows a single thread: a beginner asks what a Python if statement does, gets a structured answer with working code, and then tells the assistant the formatting was wrong.

Sign-in screen reading Meet Gemini, your personal AI assistant
01Signing in. The account is already known, so the only decision left is whether to continue as yourself.
Redesigned home screen showing late-night coffee and the Python chat
02The redesigned home screen. Late-night coffee on one side, the Python thread waiting on the other.
Home screen with the evening column moved on to dinner spots
03The evening column has moved on to dinner near campus while the work column stays where it was.
Home screen with the work column moved on to the study app project
04Now the work column moves too, on to the study app project and its open questions.
Side drawer with new chat, search, images and library
05The drawer holds four destinations, recent chats beneath them, and the account at the bottom.
A short chat answer explaining a Python if statement
06A short answer, with the response actions under the text rather than behind a menu.
A structured long answer with headings and a bulleted list
07Headings and lists break a long answer into parts that can be scanned rather than read straight through.
A code block followed by two suggested next steps
08After the code block, two next steps about the script just written.
Feedback sheet asking why this rating was chosen
09Thumbs down opens the feedback sheet straight away, with the common reasons as chips.
Back in the chat with the rating held and a thank you toast
10Submitting returns to the chat with the rating still showing and a toast at the bottom.

Scroll or drag sideways to follow the flow

Reading the Original

Three decisions I argued with, then understood

These are the three places where my first reading was wrong. In each case I had written down a problem, and in each case working out what the alternative would actually cost turned the problem into a trade I would have made the same way.

The input bar never moves

The bar is pinned to the bottom at all times, and it is opaque, so it permanently covers a strip of whatever is behind it. In a long code block the last lines sit underneath it. That looked like a straightforward cost paid on every screen for no visible return.

The alternative is a bar that scrolls away with the conversation, and that means every follow-up starts by scrolling to the bottom to find the field again. Asking a follow-up is the single most common thing a person does after reading an answer. Gemini is trading a permanent small occlusion against a step removed from the most frequent action in the product, and on those terms the fixed bar is clearly the cheaper of the two.

Dismissing the keyboard is a gesture with nothing to announce it

Nothing on screen says the keyboard can be pushed away. There is no handle, no chevron, no label. Judged purely on discoverability it fails, because a first-time user has no way to learn the gesture from the interface itself.

The keyboard covers close to half the display, and any visible control for dismissing it would have to live in exactly the space the dismissal is trying to give back. A permanent affordance would be paid for in every session in order to help the first one. The gesture is also carried in from the rest of iOS rather than taught here, since Mail and Messages behave the same way, and because it tracks the finger continuously it doubles as a way to peek at what is behind the keyboard without committing to closing it.

Code runs off the side of the screen

A code block that needs horizontal scrolling looked like an obvious failure. You cannot read a line without dragging it into view, and the line you want is often the one furthest off screen.

The alternatives are wrapping and shrinking, and both damage the code. Indentation carries meaning in Python, so a wrapped line stops being safe to read as written. Shrinking to fit runs into the minimum text sizes accessibility guidelines set, which is a floor you cannot design underneath. Gemini is choosing to keep the code honest and make the reader work for it, which for code is the right way round.

An Idea I Set Aside

A fullscreen code view, and why it did not become the project

The overflow was the first thing I wanted to fix, and I built the fix before I questioned it. A control on the code block opens it fullscreen, where the same script gets the whole width of the phone, the chat input is still reachable underneath, and the reader can zoom into a particular part of the script.

It helps, and it does not solve the problem. A long line is still a long line. Past a certain length you are panning again, only now with more of the line visible at once. That is a better version of the same compromise rather than a different answer to it.

A code block in the chat running off the right edge, with a new expand control at its top right The same script opened fullscreen, with the whole width of the phone and the chat input still reachable The fullscreen view zoomed in, with lines running past both edges again

Then rotating the phone, which I liked and still dropped

The next thing I explored was letting the phone turn. Landscape gives a long line the wide edge of the display, so the eye travels down the script instead of sweeping left to right and back again on every line. I built it, and I still think it is the better way to read code on a phone.

The code view rotated to landscape, with full lines fitting across the wide edge of the screen

I did not keep it. The question I had not asked was who reads code on a phone in the first place. Almost nobody does it by choice. People write and review code at a desk, and the mobile case is checking a snippet or looking something up, not reading a script end to end. Rotation is a real improvement to a situation that hardly arises.

Spending the redesign there would have meant solving the problem I happened to notice rather than the problem the product actually has. Setting it aside is the decision I am most confident about in this project, and it is the one that pointed me at the screen everybody sees instead of the one a few people reach.

Research

What the opening screen is actually doing

So I went back to the screen people see most, which is the one before any conversation exists. The greeting sits in the middle of the display and almost everything around it is empty. A first-time user is being asked what they want from a product whose range they have no way to judge, and the suggestions offered to help are general enough to apply to anyone.

I also watched classmates open their assistants rather than asking them how they use them. Almost nobody read the suggested prompts. People went straight to the field and typed, or into the chat history to find a thread they had already started. The most valuable space on the screen was being scrolled past on the way somewhere else.

01

The prompts get skipped

The suggestions are general enough that reading them costs more attention than typing the question already in your head.

02

Most opens are continuations

People came back to a thread they had already started, but resuming one meant remembering it existed and then going to look for it.

03

The context is there and unused

The app already knows the hour, the location, and the last conversation. None of that reaches the first screen.

The dead space is the opportunity. It is the one part of the app where nothing is being traded away for anything, which is what made it worth redesigning when the code view was not.

The Redesign

Two stacks answering two different questions

The greeting stays. Underneath it, instead of one row of generic prompts, there are two labelled stacks. The left stack reads the moment, meaning the time of day, the weather and where you are. The right stack picks up work already in progress and offers a way back into it. Each stack holds four cards and you swipe through them, with dot indicators showing your position in the set.

For your evening
Card suggesting late-night coffee shops near Oakland, naming Shibam Coffee on Centre Ave, open till 11 pm Card suggesting dinner spots near campus that are open now, on Forbes and in Squirrel Hill
Pick up where you left off
Card resuming a chat called Python Script Help, suggesting elif chains or nested if statements next Card resuming a study app design project, noting that streak logic and push notification timing are still open

Two of the four cards in each stack. Drag sideways or use the dots. The stacks run on their own timing, the way they do on the phone.

Both stacks had to earn the space they took from the text field, so each card carries a reason rather than a category. The evening card does not say "restaurants near you", it names Shibam Coffee on Centre Avenue and tells you it closes at eleven. The work card does not say "recent chats", it names the Python thread and the specific thing left to learn in it. A suggestion is only worth reading if it is more specific than the question you were already going to type.

Glass rather than a flat fill

The decision I went back and forth on longest was the surface of the cards themselves. A flat fill would have been easier to read and would have sat unambiguously on top of the screen. It also fought with the gradient Gemini already runs behind the home screen, and it made the cards look like objects pasted onto the interface rather than part of it.

The glass treatment lets that gradient stay visible through the card, so the stack reads as a layer of the screen it is sitting on. It is the harder of the two to keep legible, and it is the one that makes the addition feel like it belongs to Gemini rather than to me.

The stacks move independently

These three states are the same screen at three moments. The evening stack moves from late-night coffee to dinner nearby while the work stack stays on the Python thread, and then the work stack moves on to the study app project with its open questions. Neither waits for the other, which keeps the screen from reading as a slideshow with one hand on the controls.

Home screen showing late-night coffee and the Python chat Home screen with the evening stack moved on to dinner spots Home screen with the work stack moved on to the study app project
Before
A row of suggested prompts
The same set whatever the hour and whatever you were last doing
After
Two labelled stacks
One reads the moment, the other reads the work
Reflections

The most useful thing this project taught me was how to argue against myself. The fullscreen code view was a real improvement, I liked it, and it was still the wrong thing to spend a redesign on. Noticing a problem and establishing that the problem is worth solving are two separate tests, and I had been treating them as one.

Rebuilding the app first is what made that judgement possible at all. Until I had drawn the input bar, the keyboard and the code block at full size, I was reacting to Gemini's decisions rather than understanding what each one had bought. Three of the things on my original list of problems came off it that way, which is a better outcome than three more features would have been.

If I kept going I would work on what happens when the context is wrong. A suggestion that misreads the moment is worse than no suggestion at all, and I never designed the case where a card is simply unhelpful, or how someone would say so and have the screen learn from it.

Back to Work