← Back

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 signup screen
002
Codeship — current connect screen
003
Codeship — current org setup screen
004
Codeship — current org setup, continued
005
Codeship — current privacy settings screen
006
Codeship — current build configuration screen
007
Codeship — current connect flow, step 2
008
Codeship — current repo selection screen
009
Codeship — current install flow
010
Codeship — current project screen
011
Codeship — current plan selection
012
Codeship — current tests configuration
013
Codeship — current build results screen
014
Codeship — current results, variant
015
Codeship — current watching-for-builds state
016
Codeship — current results detail view
017
Codeship — current UI summary: friction points identified
018

Metrics and Goals for improvement

02 Define

Codeship — target user definition
019
Codeship — goals and success metrics
020

Diverge/Converge on Ideas to reach goals

03 Design — Ideate

Codeship — ideation sketch, diverge/converge
021
Codeship — alternative flow review
022
Codeship — new alternative flow direction
023

Screen design

UI Wireframes

Codeship — redesigned landing page
024
Codeship — redesigned connect screen
025
Codeship — quick-start wizard, single-page setup
026
Codeship — help popover pattern
027
Codeship — trigger a build screen
028
Codeship — build triggered, builds list
029
Codeship — projects dashboard, variant 1
030
Codeship — triggered build state, variant 1
031
Codeship — alternative flow overview
032
Codeship — configure screen, variant
033
Codeship — triggered build, watching state
034
Codeship — triggered build, success state
035
Codeship — projects dashboard with illustrated background
036

Part of the CloudBees selected work →