The ConfirmConnect mobile application originally launched by Pitney Bowes in 2015 serves as the mobile companion to the Confirm Enterprise Infrastructure Asset Management (EIAM) solution.
ConfirmConnect is used by field inspectors to log infrastructure defects and condition surveys.
PROJECT OVERVIEW
The brief was to create a unified visual identity for ConfirmConnect that would work consistently across mobile, tablet and desktop touchpoints, while staying aligned with the wider Confirm product family and Pitney Bowes Software's existing brand standards. This spanned early concept exploration through to a full style guide governing logo usage, colour, typography and iconography.
ROLE
UX/UI Designer
I led the wireframing and hi-fi design, and maintained the design system for two years.
TOOLS
Adobe Photoshop
THE OUTCOME
The flow was handed off to development and shipped in 2015.
DESIGN PROCESS & STRATEGY
The design process began with creating mood boards in Adobe Photoshop to establish an overarching visual language for ConfirmConnect. Inspiration for the early boards was drawn from a wide range of sources, spanning technology, design and typography to architecture and forms found in nature.
Confirm Brand Moodboard Exploration
Three moodboards labelled Modern, Organic and Oxygen, each combining reference photography, colour swatches and typeface samples, alongside a photo of the printed boards laid out on the floor for comparison, with one board labelled "Flexible

Early moodboard directions explored for the Confirm brand: Modern, Organic and Oxygen, each paired with its own colour palette and typography. Printing the boards full-size made it easier to lay them out side by side and compare directions before settling on the final visual language.

Confirm "Effective" Moodboard
A moodboard exploring the "Effective" brand attribute for Confirm, combining a word list of synonyms (efficient, powerful, compelling, forceful), typeface samples including Clarendon Condensed, Frutiger Condensed and Univers Next Condensed, photography of athletes and technology products, and a colour palette with button-style UI swatches in orange, red, blue and green

This board explored "Effective" as a brand attribute for Confirm, pairing a set of related keywords with candidate typefaces (Clarendon Condensed, Frutiger Condensed, Univers Next Condensed) and reference imagery chosen for its sense of performance and precision. The colour palette and button styles shown here fed directly into the UI screens developed later

Confirm "Oxygen" Moodboard
A moodboard exploring the "Oxygen" brand attribute for Confirm, featuring water and nature photography (a mountain, sea turtle, dewy leaves), device mockups of the Confirm app on a Samsung tablet and two smartphones showing menu items like Active, Energy and Essential, a blue-and-grey colour palette with button swatches, and the definition text "Oxygen combines with most elements, is required for combustion, and is essential for life in most organisms

This board explored "Oxygen" as a brand attribute, built around the idea of something essential and life-giving. Water, nature and refreshment imagery set the tone, while the app mockups test how attribute words like Active, Energy and Essential could surface directly in the product's navigation, alongside the cooler blue-grey palette this direction proposed.

Confirm "Rugged" Moodboard
A moodboard exploring the "Rugged" brand attribute for Confirm, set against a textured rock background, featuring an adventure film poster, off-road vehicles, a rugged digital watch, an underwater camera, a mining dump truck and a mountain biker, alongside the definition "strongly made and capable of withstanding rough handling," a Samsung tablet mockup showing menu items Strong, Sturdy and Tough, and a colour palette in earth tones with blue accents.

This board explored "Rugged" as a brand attribute, drawing on imagery associated with durability and rough conditions: off-road vehicles, outdoor gear and industrial equipment. As with the other directions, the reference imagery is paired with an app mockup testing how the attribute words (Strong, Sturdy, Tough) could work as menu labels, plus a proposed earth-toned colour palette.

ConfirmConnect Logo Concept Exploration
A grid of over 40 early logo concepts for the ConfirmConnect mobile app, each showing a stylised letter "C" combined with a pointing hand icon, in varying shapes (circle, rounded square) and colour combinations across blue, green, orange, red, brown and grey. Below the grid are colour swatches with hex values, a row of flattened icon variations, and two Sign In screen mockups comparing the icon at different sizes and colour treatments against the Pitney Bowes Software login form

More than 40 colour and shape variations were produced for the ConfirmConnect app icon, combining a "C" mark with a hand icon to reinforce the app's touch-driven interaction. Two of the strongest candidates were then tested directly on the Sign In screen to judge how each performed at a small size and against the Pitney Bowes brand colours before a final direction was chosen.

ConfirmConnect Final Logo
The final ConfirmConnect logo: an orange gradient sphere containing a stylised "C" and a signal/connectivity icon, paired with the "ConfirmConnect" wordmark in black with a trademark symbol

The final ConfirmConnect mark, selected from the earlier round of concepts. The orange sphere keeps continuity with the parent Confirm brand colour, while the added signal icon distinguishes ConfirmConnect as the connected, mobile-first product in the family.

ConfirmConnect Splash Screen
The ConfirmConnect mobile app splash screen, showing the orange logo and "ConfirmConnect" wordmark at the top, a row of four colour spheres in orange, pink, blue and green representing the wider Confirm product family, and the Pitney Bowes Software logo at the bottom

The splash screen introduces ConfirmConnect within the broader Confirm product family, represented by the row of four coloured spheres, one per product, while keeping the Pitney Bowes Software logo present for brand consistency across the suite.

ConfirmConnect Style Guide: Logo Usage
A style guide page titled "ConfirmConnect | Logo," with written usage guidelines on the left covering placement, sizing and a list of "do not" rules (do not stretch, redraw, or recolour the logo), alongside example applications on the Splash screen and Sign In screen, each showing the logo paired with the black Pitney Bowes Software logo.

This page from the ConfirmConnect style guide sets out how the logo should and shouldn't be used, including aspect ratio, placement relative to the Pitney Bowes Software logo, and explicit "do not" rules to prevent misuse as the brand was rolled out across the app's screens.

ConfirmConnect Style Guide: Logo Size and Position
A style guide page titled "ConfirmConnect | Logo size and position," showing the Sign In screen at 320 by 480 pixels with exact pixel measurements marked for the logo's clear space, spacing above and below the form fields, and the position of the Pitney Bowes Software logo, alongside isolated close-ups of the ConfirmConnect logo (185px wide) and the Pitney Bowes Software logo (151px wide) with their own dimensions labelled

This page defines the precise spacing and sizing rules for the logo on the Sign In screen, down to the pixel, so that developers could implement it consistently and the note about extra clear space on larger devices shows the guide was built with responsive layouts in mind from the start.

ConfirmConnect Style Guide: Colour Palette
A style guide page titled "ConfirmConnect | Colour palette," listing the application's colour system in five groups: Black & Grey, Blue, Green, Brown and Red, each with swatches and their hex codes (for example #001F51 for dark blue and #FF3300 for red), with a note that the palette was kept in line with Pitney Bowes Software's brand standards

The full colour system used across the ConfirmConnect app, organised into five families with exact hex values for each shade. Keeping the palette aligned to Pitney Bowes Software's existing brand standards, rather than introducing new colours freely, kept ConfirmConnect visually consistent with the rest of the product suite.

ConfirmConnect Style Guide: Colour Palette Applied to Sign In
A style guide page titled "ConfirmConnect | Colour palette | Sign In," annotating the Sign In screen with exact colour values: a background gradient from #F0F5FB to #DAE6F6, a #999999 field border, and the primary Sign In button's normal state specified as a gradient from #75B8FB to #3A5793 with a #4F6690 border, white text, and a #333333 text shadow

This page shows the colour palette applied directly to a real screen, specifying the exact gradients, borders and text treatments needed to reproduce the Sign In button and background consistently, down to the text shadow colour, so developers had no ambiguity when building the screen.

Design guidelineĀ for typography
ConfirmConnect Style Guide: Icons
A style guide page titled "ConfirmConnect | Icons," showing two icon families: triangular warning and roadworks signs in red, green and blue variants, and map pin icons combining phone, document and checkmark symbols in red, orange, blue, green and yellow. Guidelines note the icons are supplied as 8-bit PNGs on a transparent background, and list "do not" rules against stretching or redrawing them.

The icon system defines a consistent visual language for status and task types across the app, using colour to distinguish states (for example red for alerts, green for completed) while keeping shape and format fixed. As with the logo, explicit "do not" rules were included to prevent icons being redrawn or distorted as the app was built out.

Back to Top