SignBox Signing App

A PDF signing app for iPhone and iPad that keeps the signature on the device.

Digital Signature · Mobile App · Jordan

·

Applixya

Scroll to explore

var(--variable-lVkmgb23s)

SignBox Signing App

A PDF signing app for iPhone and iPad that keeps the signature on the device.

Digital Signature · Mobile App · Jordan

·

Applixya

Scroll to explore

var(--variable-lVkmgb23s)

Scroll to explore

SignBox Signing App

A PDF signing app for iPhone and iPad that keeps the signature on the device.

Digital Signature · Mobile App · Jordan

·

Applixya

var(--variable-lVkmgb23s)

SignBox Signing App

A PDF signing app for iPhone and iPad that keeps the signature on the device.

Digital Signature · Mobile App · Jordan

·

Applixya

Scroll to explore

var(--variable-lVkmgb23s)

PROJECT OVERVIEW

CLIENT

Applixya

MY ROLE

Design Lead, via Plexable

SCOPE

Idea scope, use cases, card sorting, user flows, wireframes, brand and the full iPhone and iPad interface.

VALIDATION

Applixya signed off the wireframe map in November 2014, and the app shipped on iPhone and iPad.

TIMELINE

September 2014 to January 2015

TEAM

Delivered through Plexable with the Applixya team.

The context

Applixya sold signing products to ministries and large companies, where security was assumed and setup was somebody's job. SignBox had to carry that same security to anyone holding a phone.

Work began from an idea scope agreed with Applixya in September 2014, in Amman, against a slogan of theirs from that year: Secured. Simple. Easy.

My responsibility

From the first use case to the last iPad layout, I made the design calls: what a signature is allowed to do, where a password gets asked for, and how little of that a person has to understand.

The order mattered more than any single screen. I drew the logo, the icon set and the full interface on top of a wireframe map that was already settled.

Design direction was mine to hold, but the material under it was not invented alone.

The hard part afterwards was keeping three layers of password from turning signing into paperwork.

01

What I owned

Drawn by me: the wordmark, the app icon, the ink palette and the screens they live on.

01

What I owned

Drawn by me: the wordmark, the app icon, the ink palette and the screens they live on.

02

How I led

I held the sequence: nothing was drawn in colour until the structure underneath it had been argued out and agreed.

02

How I led

I held the sequence: nothing was drawn in colour until the structure underneath it had been argued out and agreed.

CONSTRAINTS & TRADE-OFFS

Security written for ministries does not shrink politely. Each signature needed its own password, each file could carry two more, and the app itself wanted a passcode.

On a phone screen that is a lot of fields between a person and a signed PDF.

01

The constraint

Three separate password layers, one small screen, and a signature that must never leave the device.

01

The constraint

Three separate password layers, one small screen, and a signature that must never leave the device.

02

The trade-off

Lose a signature password and the signature is deleted, then set up again: three tries, no way back. A trade-off I took instead of building a recovery path.

02

The trade-off

Lose a signature password and the signature is deleted, then set up again: three tries, no way back. A trade-off I took instead of building a recovery path.

● RESEARCH & CONTEXT

What People Need From a Signing App

We wrote the use cases with Applixya and sorted them on cards into user goals and functions. Three worries shaped most of it: a lost password, who can edit the signed copy, and what a person meets on first launch.

● PRODUCT DECISIONS

Make Secure Signing Simple

Keeping the signature off any server settled most of the rest. There is nothing to ask a back end for, nothing to sync, and nothing to restore once a signature password is gone.

Signing had to stay one unbroken run from document to placed mark, with the password questions pushed to the moment they actually matter.

01

01 Idea Scope and Use Cases

Our first meeting with Applixya in September 2014 set the idea scope, the logo brief and the use cases.

01

01 Idea Scope and Use Cases

Our first meeting with Applixya in September 2014 set the idea scope, the logo brief and the use cases.

02

02 Flows and Wireframes

User flows and a wireframe map of every screen, with rules and notes, approved in November 2014.

02

02 Flows and Wireframes

User flows and a wireframe map of every screen, with rules and notes, approved in November 2014.

03

03 Brand and Interface

The logo and icon set first, then 50 iPhone screens in December and the iPad screens in January 2015.

03

03 Brand and Interface

The logo and icon set first, then 50 iPhone screens in December and the iPad screens in January 2015.

● PRODUCT ARCHITECTURE

Three Layers of Lock

The app splits into three layers of lock, and the screens follow that split. A passcode opens the app. A stored signature will not come out without the owner's fingerprint. Each document carries its own open password, plus permissions for editing, copying and printing.

A modification password sits above all of it and flattens the signed PDF.

● PROCESS & EVIDENCE

Most of what is on paper is states rather than screens. Weak and strong passwords, a free trial, a restored purchase, and a check before a mark goes on every page or comes back off.

Each state was specified next to the screen it belongs to, where a build team would meet it.

01.

The Signature Stays Home

Saved only on the device and opened with the owner's fingerprint or passcode.

04.

A Signature in Your Style

Pick a stroke, an ink colour and a font for a name signature, then place it on one page or on all of them.

02.

Sign in a Few Taps

Open a PDF, tap Sign, choose a stored signature and drop it where it belongs.

05.

Passwords for Every Document

A modification password with a strength meter, an open password for each file and a passcode to open the app.

03.

Made for Both Screens

Every screen drawn for iPhone, and for iPad in portrait and landscape.

06.

Wordmark and Palette

Sign light and Box bold in Diavlo, Roboto for the interface, SignBox green for actions, charcoal bars, and blue, orange and grey as ink.

01.

The Signature Stays Home

Saved only on the device and opened with the owner's fingerprint or passcode.

03.

Made for Both Screens

Every screen drawn for iPhone, and for iPad in portrait and landscape.

05.

Passwords for Every Document

A modification password with a strength meter, an open password for each file and a passcode to open the app.

02.

Sign in a Few Taps

Open a PDF, tap Sign, choose a stored signature and drop it where it belongs.

04.

A Signature in Your Style

Pick a stroke, an ink colour and a font for a name signature, then place it on one page or on all of them.

06.

Wordmark and Palette

Sign light and Box bold in Diavlo, Roboto for the interface, SignBox green for actions, charcoal bars, and blue, orange and grey as ink.

01.

The Signature Stays Home

Saved only on the device and opened with the owner's fingerprint or passcode.

02.

Sign in a Few Taps

Open a PDF, tap Sign, choose a stored signature and drop it where it belongs.

03.

Made for Both Screens

Every screen drawn for iPhone, and for iPad in portrait and landscape.

04.

A Signature in Your Style

Pick a stroke, an ink colour and a font for a name signature, then place it on one page or on all of them.

05.

Passwords for Every Document

A modification password with a strength meter, an open password for each file and a passcode to open the app.

06.

Wordmark and Palette

Sign light and Box bold in Diavlo, Roboto for the interface, SignBox green for actions, charcoal bars, and blue, orange and grey as ink.

01.

The Signature Stays Home

Saved only on the device and opened with the owner's fingerprint or passcode.

03.

Made for Both Screens

Every screen drawn for iPhone, and for iPad in portrait and landscape.

05.

Passwords for Every Document

A modification password with a strength meter, an open password for each file and a passcode to open the app.

02.

Sign in a Few Taps

Open a PDF, tap Sign, choose a stored signature and drop it where it belongs.

04.

A Signature in Your Style

Pick a stroke, an ink colour and a font for a name signature, then place it on one page or on all of them.

06.

Wordmark and Palette

Sign light and Box bold in Diavlo, Roboto for the interface, SignBox green for actions, charcoal bars, and blue, orange and grey as ink.

STRATEGY & RESEARCH

ABOUT ME

null

WIREFRAME TO SCREEN

ABOUT ME

null

DESIGN SYSTEM

ABOUT ME

null
null
null

SECURITY

ABOUT ME

null
null
null
null

FINAL UI

ABOUT ME

null
null
null
null

IPAD

ABOUT ME

null
null
null
null

VALIDATION

ABOUT ME

null
null
null

OUTCOMES

ABOUT ME

null
null
null

STRATEGY & RESEARCH

ABOUT ME

null

WIREFRAME TO SCREEN

ABOUT ME

null

DESIGN SYSTEM

ABOUT ME

null
null

SECURITY

ABOUT ME

null
null
null

FINAL UI

ABOUT ME

null
null
null

IPAD

ABOUT ME

null
null
null

VALIDATION

ABOUT ME

null
null

OUTCOMES

ABOUT ME

null
null

OUTCOMES

A Complete Design for iPhone and iPad

Applixya received the brand, the user flows, the wireframe specifications and every screen for iPhone and for iPad in both orientations.

The iPhone set came first, the iPad set after it.

50

iPhone screens

From the splash and walkthrough to signing, passwords and settings.

3

Layouts

iPhone, plus iPad in portrait and in landscape.

7

Walkthrough screens

Shown once, on a person's first visit.

WHAT I’D IMPROVE

What I Would Change

Design the warning that comes before the three-try limit, not just the screen after it.

Push more of the walkthrough into the interface, so fewer screens have to teach it.

WHAT I LEARNED

What It Taught Me

Security built for ministries does not scale down by removing fields; it scales down by deciding when to ask.

Writing use cases with the client, then sorting them on cards, settles arguments about structure before a screen is drawn.

HIRING A HEAD OF PRODUCT DESIGN?