OpenAvailable for product design roles · remote & relocation
All work Case study Chrome extension · Redesign Brand + product + web

GoFully: redesigning a screenshot extension around one promise, nothing leaves your device.

GoFully already did a lot: full-page capture, text reading, markup, redaction and PDF export, all offline. The old extension and website said all of it at once. I redesigned the brand, the extension and the website so the tool is calm to pick up and private by default.

Role
Product Designer, End-to-End Redesign
Product
Chrome Extension · 5 Browsers
Scope
Brand, Design System, Extension UI, Website
Status
Redesign Designed · New Site in Development
Redesigned GoFully website hero: Screenshot the whole page. Share it ready to go, set in an editorial serif on a soft sky gradient, with one Add to Chrome button
Brand guide41 pages

From positioning and voice to the app icon at 16 px, written so design and code read from one source.

Extension screens70+

Popup, on-page overlays, editor, settings and guides, each state designed in light and dark.

Rule on every screen1 action

One primary action per screen, in navy. Everything else stays quiet.

01Overview · What is GoFully

A capable tool that looked like every other screenshot extension

GoFully is a Chrome extension for full-page screenshots. It scrolls a page, waits for lazy images, handles sticky headers and stitches one clean image. It reads text out of any capture in six languages, marks up and redacts, beautifies captures for posts and slides, and exports PNG, JPG, WebP or PDF.

Everything runs inside the browser. There is no account and no server. Capture, editing, text reading and redaction all happen on the device, which is rare for this category of tool.

The redesign brief was to keep every feature and change how it feels. The product had grown feature by feature, and the extension, the store listing and the website showed it. The goal was one calm, consistent product whose strongest idea, privacy, comes first.

Category
Productivity · Chrome Extension
Role
Product Designer
Scope
Brand, Design System, Extension UI, Website
Users
Developers, QA Testers, Writers, Researchers, Privacy Teams
Works in
Chrome, Edge, Brave, Arc, Opera
The opening insightOn the old website, "100% on-device" was a small badge above the headline, and the headline itself was about features. The one thing that set GoFully apart from the dozens of screenshot extensions in the Chrome Web Store was the quietest thing on the page.

02The problem · The old GoFully

Every feature, all at once, on every surface

The extension worked well. What it said about itself, in the store, on the website and in its own UI, made it hard to see why.

A headline made of features

  • The old hero read Full Page Screenshot Tool. One Extension. Every Job.
  • The paragraph under it named WebAssembly OCR, 4K export and PDF in one sentence.
  • The privacy promise sat in a small badge above it all.

A generic identity

  • The icon was a glossy camera with flash rays.
  • In the Chrome Web Store, it sat next to other screenshot extensions using camera icons too.
  • Nothing in the mark said what made GoFully different.

Busy visuals that hid the UI

  • Store screenshots and site mockups layered gradients, tilted devices, arrows and handwritten callouts.
  • The product UI itself was small inside each picture.
  • Each surface used its own style, so the extension, store and site did not read as one product.
Old GoFully website hero: Full Page Screenshot Tool. One Extension. Every Job., with two badge pills, a long feature paragraph and a tablet mockup covered in handwritten callouts
Before The old website hero. Two badges, a feature-list headline and a 40-word paragraph before the first button. "100% on-device" is the small badge at the top left.
Old Chrome Web Store screenshot: Capture Anything using Gofully, with capture mode chips over a Google homepage
Old Chrome Web Store screenshot: Capture Entire pages in one click, on a navy background with tilted mockups
Old Chrome Web Store screenshot: Edit every detail, your way, with an annotated editor mockup
Old Chrome Web Store screenshot: Hide sensitive information instantly, with a tilted invoice
Before The old Chrome Web Store screenshots. Four images, four different layouts. Gradients, tilted mockups and callouts compete with the UI they are meant to show.
Old GoFully popup with capture modes, shown over a website mockup
Old GoFully annotation toolbar over a website, with handwritten callouts
Old GoFully history screen with a grid of past captures
Old GoFully text capture result panel
Before The old extension UI, as the old website presented it: capture popup, annotation, history and text capture.
Where it broke downGoFully was private, precise and free. The way it looked said "another screenshot tool". The redesign had to make the product's real strengths visible on every surface, starting with the brand.

03Direction · Positioning and values

One promise for every screen: capture the whole page, keep every pixel private

Before drawing anything, I wrote down who GoFully is for and the problem it solves. The audience is everyday sharers: developers, QA testers, writers, researchers and privacy teams who send screenshots every day. The problem fits in three words from the brand guide: three tools, one leak. Long pages get cut off, private data slips through, and a capture needs three apps before it can be shared.

I then collected references for each surface (landing pages, extension popups and in-page UI, editors, components and store screenshots) and kept them as an internal moodboard, filtered for fit with a calm sky-and-navy direction.

Four values that settle every design and writing choice

When two options look equal, the guide says to pick the one that serves these better.

Private

Everything runs on the device. No account, no upload, no tracking.

Precise

Pixel-exact captures, checked seams and crops that keep the marks.

Fast

One click or one shortcut from page to finished file.

Friendly

Plain words, soft shapes and a clear next step on every screen.

Positioning slide: the promise, who it is for, the problem and the answer
Brand moodboard slide: calm blues, soft rounded shapes and real product screens
After Positioning and moodboard, from the 41-page brand guide: calm blues, soft rounded shapes and real product screens, so GoFully reads as a precise tool that is easy to pick up, never a toy.

04Brand · Mark, voice, type and colour

From a glossy camera to a viewfinder drawn as a G

The new symbol is a camera viewfinder drawn as the letter G. It still says "screenshot", and it can only be GoFully. Each of its four parts has a job, so the guide asks to keep every part whenever the mark is used.

Old GoFully icon: a glossy blue camera with flash raysBefore
New GoFully icon: a white viewfinder G on sky blueAfter
New GoFully icon on deep navyNavy
The extension icon, at its real store size of 128 px. The old camera blends in with other screenshot tools. The viewfinder G keeps the meaning and adds a name.

Four parts, each with a job

Viewfinder frameThe rounded square of a camera screen. It holds the mark together at every size.
Lens ringFocus. The ring pulls the eye to the centre, where the capture happens.
Shutter dotThe moment of capture. Kept round, solid and off-centre.
TailCloses the shape into a G. Never trimmed or straightened.
Logo anatomy slide numbering the viewfinder frame, lens ring, shutter dot and tail
After Logo anatomy, from the brand guide.
Logo variants: primary lockup, reversed lockup, full-colour symbol and one-colour symbols
Minimum size slide: 16 px toolbar, 32 px favicon, 48 px extensions page, 128 px Web Store
Variants and minimum sizes. Chrome shows the symbol at 16 px in the toolbar, so the mark had to read at that size. Below 32 px the wordmark drops and the symbol stands alone.

A voice that says what happened, and what to do next

The voice is a calm expert: plain words, real numbers, no hype and no exclamation marks.

Do
Don't
"Screenshot saved. 4,200 px captured."
"Your amazing screenshot has been successfully saved!"
Toasts state the result in a few words, and errors say what to do next: Copy failed. Try Save PNG.

Colour with a tested ground for every text pair

Sky Blue #6AB0FF and Deep Navy #014073 lead the palette. Archivo carries headings and Inter carries everything people read and click. Every text colour was checked against its background, which set one hard rule: Sky is a fill and an accent, never text on white. Dark mode keeps the navy family instead of plain black, so GoFully still feels like GoFully at night.

RolePairContrast
Body textInk on White · #152333 / #FFFFFF15.9:1 Pass
HeadingsNavy on White · #014073 / #FFFFFF10.6:1 Pass
Primary buttonWhite on Navy · #FFFFFF / #01407310.6:1 Pass
Muted textSlate on White · #4B5C70 / #FFFFFF6.9:1 Pass
Accent on darkSky on Ink · #6AB0FF / #1523337.0:1 Pass
Text on Sky fillsNavy on Sky · #014073 / #6AB0FF4.7:1 Pass
Never for textSky on White · #6AB0FF / #FFFFFF2.3:1 Fail
Type in product: display 40/48, heading 28/36 and 20/28, body 14/22, label 13/18, caption 12/16
Status colours in light and dark, and the navy-based dark mode palette
After Type scale in product, and status colours with the navy dark mode.

05Design system · Foundations and components

Soft corners, a 4 px grid and two quiet shadows

The values live as variables in the Figma file, so design and code read from the same source. Navy does the work, and Sky shows focus and selection.

Radius by role

6 px inputs, 10 px buttons, 16 px cards and 24 px dialogs. Toggles and tags use a full pill.

Two shadows, tinted navy

Raised for cards and the result bar, Overlay for menus, dialogs and toasts. Never pure black.

One icon weight

A 24 px grid, 1.75 px stroke, round caps and joins. No filled icons except state dots.

Shapes from the symbol

Rings, viewfinder corners and a label chip, used one at a time, never all three together.

UI foundations: radius, 4 px spacing grid, elevation and icon rules
Components: primary, secondary and ghost buttons in four states, inputs, toggles and toasts
After UI foundations and core components, each control shown in default, hover, focus and disabled.
Design System v2 foundations page: colour, type scale, spacing and elevation
Design System v2 components page: buttons, chips, inputs, toasts and menus
After Design System v2 in Figma: foundations and the component library.
Icon set on a 24 px grid with a single stroke weight
Line illustrations for empty, blocked and error states
Icons and empty-state illustrations, drawn in the same line weight.

07Extension · On-page overlays

Overlays that sit on any website without fighting it

Most capture modes happen on the page itself. People drag a region, hover to pick one element, or pick a panel that scrolls inside its own box. After a capture, a result card offers copy, save, edit and pin. Text capture hands back text to paste, draw on page marks up a live site before it is captured, and a pinned capture floats over any page as a reference.

Overlay: dragging a region over a payment page
Drag a region
Overlay: hovering highlights one element to capture
Pick one element
Overlay: result card after a capture with copy, save, edit and pin
Result card
Overlay: text captured from the page, ready to copy
Text capture
Overlay: drawing on the live page with a toolbar of pens and colours
Draw on page
Overlay: a pinned capture floating over the page with hover controls
Pin to screen
After Capture, read, draw and pin, all on a realistic test page.
Six-step storyboard of a scroll capture moving down a long article
Scroll capture, step by step. The page scrolls, images load and the capture builds into one tall image.

08Extension · The editor

Everything after the capture, in one quiet window

The editor holds crop, arrows and shapes, text, blur, auto-redact, Beautify and export. Auto-redact scans a capture for details like emails and card numbers and covers them before anything is shared. Beautify adds a background, padding, a browser frame or a 3D tilt for posts and slides. Light and dark share one layout; drag the slider to compare them.

Old annotation view with a dense toolbar and handwritten callouts
Before Tools spread along a crowded bar
New editor with a slim tool rail, the canvas centred and one properties panel
After One tool rail, one canvas, one properties panel
The editor in dark mode The editor in light mode Light Dark
Auto-redact results listing found details to cover
Auto-redact results
Editor blur tool over private details
Blur
Beautify: the capture on a blue gradient background with padding and shadow
Beautify
Export settings dialog
Export settings
After Hide, polish and export without leaving the editor.

09Extension · Settings, guides and help

The quiet screens got the same care

Settings, step-by-step guides, a welcome page that teaches the first capture, and help articles. Guides collect a series of captures with a line under each and export one PDF or Markdown file, which turns a set of screenshots into onboarding docs or a bug report.

Welcome page shown after install, teaching the first capture
Welcome, after install
Step-by-step guide with captures and captions
Step-by-step guide
Settings: capture options
Settings, capture
Help article: capture one element
Help article

10Website · Old and new

From a list of features to one sentence anyone can repeat

Old: Full Page Screenshot Tool. One Extension. Every Job. New: Screenshot the whole page. Share it ready to go. The privacy promise moved from a badge into the first paragraph: all on your computer, with no account.

I tried three hero layouts against a realistic long article, then storyboarded every feature demo frame by frame, so the site shows the real extension working on a real page instead of tilted mockups.

New website hero Old website hero Before After
Before The live site at gofully-extension.vercel.app.After The redesigned site, captured from its development build.
The full old landing page: repeated tablet mockups, feature blocks, a comparison table and testimonials
Before The whole old page
The full redesigned landing page: features with live demos, privacy, price comparison, FAQ and install steps
After The whole new page
Both landing pages, top to bottom. Fitting for a full-page screenshot tool. Click either one to open it full size.
Three hero layout options for the new landing page
Three hero directions, each tested against the same long article.
Storyboard frames for each feature demo on the landing page
Feature demo storyboards. Each step holds briefly, then animates to the next, and demos pause on hover or off-screen.
The new GoFully symbol in the browser tab and toolbar
The new GoFully app icon
After The new mark where people meet it: the browser toolbar and the app icon.

11Where it stands · And what's next

One product, one look, one promise on every surface

Designed: the new brand and its 41-page guide, Design System v2, more than 70 extension screens and states in light and dark, and the new website.

Built: the new website runs in development and is not live yet; the live site and store listing still show the old design. The extension's current release is v1.1.3.

Next: v1.2 pushes further on privacy and precision

Redact page

Covers emails, card numbers, phone numbers, ID numbers and API keys on the live page, before the capture.

Measure

Hover any element for its size, padding, margin and text style, measure gaps, and copy any colour as hex.

Delayed capture

Wait 3, 5 or 10 seconds to catch an open menu or a tooltip.

QR codes and barcodes

Read on the device, with a safe Open button for web links.

The features didn't change. What changed is that every surface, from a 16 px toolbar icon to the landing page, now says the same thing: capture the whole page, keep every pixel private.

ProductGoFully Chrome Extension
RoleProduct Designer, End-to-End Redesign