Product design case study

CoThinker

The AI writing companion, redesigned for iPhone and Mac.

iOS · macOSAudit · UX · UI · Prototypes

CoThinker for Mac: Enhance shows the original prompt beside the enhanced one

CoThinker for iPhone: the Enhance tutorial step

Started from: The previous Android app
Designed for: iPhone and Mac
My work: Audit, flows, UI, prototypes
Delivered: Two clickable prototypes and a design system

01 The brief

Take the Android app to iPhone and Mac — without just copying it.

1The ask

Design CoThinker’s onboarding and one core writing journey for iPhone and Mac.

2The rule

Start from the existing Android app, but don’t simply copy its flow.

3The approach

Audit the Android app first. Wherever there’s a better flow, use it.

StartPrevious Android appWhat already exists

Step 1Product auditUse it like a new user

Step 2Is there a better flow?Yes — for the main screen

ResultiOS + macOS designOnboarding, workspace, states

CoThinker’s three tools: Scribe writes it for you Enhance sharpens a prompt Voice speech to clean text

02 Where I started

Previous Android screens

The beta I was given: an onboarding, then four tabs — Home, History, Studio and Insights.

Previous Android screens

Previous Android: welcome screen — **Welcome**Value prop and Get Started.

Previous Android: daily activities checklist — **Personalise**“What do you do in a day?”

Previous Android: three taps setup — **Setup**Enable and switch keyboard.

Previous Android: Try to scribe tutorial — **Try to scribe**A sample on the keyboard.

Previous Android: Studio tab — **Studio**A second place to write.

Previous Android: History with Collection cards — **History**History, Saved, Collection.

03 Product audit

I used it like a first-time user and noted what tripped me up.

My annotated audit board: photos of the Android app with notes — **The audit board.** Tap any image to see it full size.

Audit detail: Scribe button next to the send button on Home

FINDING 01

Scribe looked like a send button

What: Same blue as Send, right beside it — and it moved you to Studio.
Why it hurt: 8 of 10 testers thought nothing had happened.
Direction: One input, one send. Results appear in place.

Audit detail: Studio redirect and my notes

FINDING 02

Two places to start writing

What: Home and Studio both had an input.
Why it hurt: More taps and more thinking before you could even prompt.
Direction: One workspace. Studio becomes a simple launcher.

“Am I supposed to begin Scribe in Home or in Studio?”My audit notes

Audit detail: the setup screen with a text glitch and my note

FINDING 03

Setup living on the home screen

What: A “finish setup” banner on Home, leading to a glitchy screen.
Why it hurt: Clutter on a small screen before you’ve written anything.
Direction: Finish setup inside onboarding. Home starts clean.

Audit detail: History categories that look tappable

FINDING 04

Categories that looked like buttons

What: Category chips in History that didn’t do anything.
Why it hurt: They looked tappable but were only information.
Direction: Compact History with real filters. Stats move to Insights.

The summary

Cluttered first impressionToo much at once.

Unclear navigationScribe → Studio redirect.

Overlapping featuresHistory, Collection, Templates.

Not mobile-optimisedDense settings.

Product audit summary panel — **Audit summary**Journey, friction points, opportunities.

Key findings by area table — **Key findings by area**What existed, what didn’t work.

04 The key decision The crux

People already know how to talk to AI. So I used that.

My brief was the onboarding and one core journey. But the audit kept pointing at the same thing: the main screen made you pick a feature before you could write. That’s what I redesigned.

01 · THE MENTAL MODEL

Users already have it

The people using CoThinker use apps like these every day. A conversation above, one input below — nothing new to learn.

ChatGPT

Claude

Gemini

Antigravity

Chat above, input belowThe pattern they all share

CoThinkerSame familiar pattern, its own tools

02 · THE FLOW

From five steps to three

On Android, writing with Scribe meant a detour through another tab. Now everything happens where you type.

Previous Android5 steps

1Open Home

2 · looks like SendTap Scribe

3 · unclearMoved to Studio

4Start prompting

5Result

Redesign3 steps

1Type or speakOne input

2Tap Scribe or EnhanceRight above the input

3Result, right thereRefine, copy or send to Claude

03 · FEATURES AS BUTTONS

Every tool, one tap from where you type

What’s on your mind?Describe it and I’ll draft it for you.

Scribe1 Enhance2

Speak your mind, I’ll help you write3

Scribe“Write it for me.” Drafts from a short ask.

Enhance“Sharpen my prompt.” A better prompt for any AI.

Mic = dictationSpeak instead of type. No separate screen.

Before: these lived behind a separate Studio tab and a redirect.

iPhone Scribe: make it shorter revises the draft

05 Initial sketch to high fidelity

Flow first, pixels later.

I mapped the first-time journey, sketched it in rough screens, then designed it for both platforms.

1WelcomeSplash, Get Started

2What it doesCapabilities, speed

3PersonalisePick your use

4Setup3 switches + mic permission

5TutorialScribe → Enhance → Speak

6WorkspaceWrite, refine, use

First-time user journey with edge cases — **First-time user journey**Its edge-case row became the permission, error and retry states.

Initial sketch: tutorial with Scribe, Enhance, Speak

Mac

The tutorial

Same three steps. Added a progress line, streamed results, and Copy / Redirect to Claude.

Mac

The main screen

Bubble, Scribe and Enhance, one input — kept as-is. Navigation went into a menu on iPhone and a sidebar on Mac.

Mac

Personalisation

Same six options as Android, as a native multi-select. A grid on Mac.

06 iOS App

Calm, dark, built around one input.

Blue only for what’s active. Glass only for what you touch. SF Pro throughout.

All screens preview

Onboarding

Logo, welcome, what it does.

Splash

Personalise and setup

Including permission and recovery.

Microphone permission — **Mic permission**

Microphone denied — **Denied → Open Settings**

Tutorial

Scribe, Enhance, Speak.

Tutorial spoken to written — **Spoken → written**

Workspace

Results, refinement and errors.

Error with Try Again — **Error → Try Again**

Voice and navigation

A menu instead of a tab bar.

07 macOS App

Not the phone, stretched.

Same onboarding and tools, laid out for a desk: a sidebar, side-by-side views and shortcuts.

SidebarNew, History, Studio, Insights, plus Recent.

Side by sideOriginal next to the result.

List and detailHistory works like Mail.

DashboardInsights uses the full width.

Keyboard first⌘⇧O new · ⌃1 ⌃2 tools · ⌃3 voice

AppearanceLight, Dark and accent colours.

Existing desktop screens with my audit note

The existing desktop version

It was in good shape, so I kept its sidebar structure and the idea of sending prompts to other AI tools, and brought it into the same design language.

“Doing pretty fine. Not a lot of tweaks.”My audit notes

All screens preview