Codeship

CI/CD build funnel redesign — landing through first build

Role: IC Designer · Client: CloudBees

uiwebux-researchproduct-design

About the client

A challenge set by CloudBees — redesign the Codeship build funnel from first visit through to a first build triggering. I started with a current-state critique: the landing copy, fold position, and signup flow all had friction points. Then redesigned across four surfaces: a cleaner landing page, a single-page quick-start wizard (account → project → build settings → go), a post-setup projects dashboard, and the watching-for-first-build state. The exercise became the door into six years at CloudBees.

Discover — Define — Design

Build Funnel Study

A (limited) study into the current state

01 Discover

Codeship — current landing page, friction annotations — 001

Codeship — current landing page, friction annotations — 001

Codeship — current signup screen — 002

Codeship — current signup screen — 002

Codeship — current connect screen — 003

Codeship — current connect screen — 003

Codeship — current org setup screen — 004

Codeship — current org setup screen — 004

Codeship — current org setup, continued — 005

Codeship — current org setup, continued — 005

Codeship — current privacy settings screen — 006

Codeship — current privacy settings screen — 006

Codeship — current build configuration screen — 007

Codeship — current build configuration screen — 007

Codeship — current connect flow, step 2 — 008

Codeship — current connect flow, step 2 — 008

Codeship — current repo selection screen — 009

Codeship — current repo selection screen — 009

Codeship — current install flow — 010

Codeship — current install flow — 010

Codeship — current project screen — 011

Codeship — current project screen — 011

Codeship — current plan selection — 012

Codeship — current plan selection — 012

Codeship — current tests configuration — 013

Codeship — current tests configuration — 013

Codeship — current build results screen — 014

Codeship — current build results screen — 014

Codeship — current results, variant — 015

Codeship — current results, variant — 015

Codeship — current watching-for-builds state — 016

Codeship — current watching-for-builds state — 016

Codeship — current results detail view — 017

Codeship — current results detail view — 017

Codeship — current UI summary: friction points identified — 018

Codeship — current UI summary: friction points identified — 018

Metrics and Goals for improvement

02 Define

Codeship — target user definition — 019

Codeship — target user definition — 019

Codeship — goals and success metrics — 020

Codeship — goals and success metrics — 020

Diverge/Converge on Ideas to reach goals

03 Design — Ideate

Codeship — ideation sketch, diverge/converge — 021

Codeship — ideation sketch, diverge/converge — 021

Codeship — alternative flow review — 022

Codeship — alternative flow review — 022

Codeship — new alternative flow direction — 023

Codeship — new alternative flow direction — 023

Screen design

UI Wireframes

Codeship — redesigned landing page — 024

Codeship — redesigned landing page — 024

Codeship — redesigned connect screen — 025

Codeship — redesigned connect screen — 025

Codeship — quick-start wizard, single-page setup — 026

Codeship — quick-start wizard, single-page setup — 026

Codeship — help popover pattern — 027

Codeship — help popover pattern — 027

Codeship — trigger a build screen — 028

Codeship — trigger a build screen — 028

Codeship — build triggered, builds list — 029

Codeship — build triggered, builds list — 029

Codeship — projects dashboard, variant 1 — 030

Codeship — projects dashboard, variant 1 — 030

Codeship — triggered build state, variant 1 — 031

Codeship — triggered build state, variant 1 — 031

Codeship — alternative flow overview — 032

Codeship — alternative flow overview — 032

Codeship — configure screen, variant — 033

Codeship — configure screen, variant — 033

Codeship — triggered build, watching state — 034

Codeship — triggered build, watching state — 034

Codeship — triggered build, success state — 035

Codeship — triggered build, success state — 035

Codeship — projects dashboard with illustrated background — 036

Codeship — projects dashboard with illustrated background — 036

Part of the CloudBees selected work →