SignBox - A secure signing app for iPhone and iPad
“
Sign any PDF with a signature that stays on your own device.
SignBox
iPhone and iPad app, 2014-2015
About the project
Applixya, a software company in Amman, made secure iPad apps for executives and officials to sign and approve their correspondence on the move. SignBox was its idea for everyone else: an iPhone and iPad app that signs any PDF. Between September 2014 and January 2015 we ran the idea scope and logo brief, wrote the use cases, mapped the flows and wireframes, and designed the brand and every screen.
Project
SignBox App
Industry
Digital Signature
Location
Amman, Jordan
Date
2014-2015
“
Client Request
Applixya wanted to take the signing system it sells to companies and ministries to anyone with an iPhone or iPad, in an app that signs any PDF, anywhere.
Applixya
Idea scope, September 2014
Design Pillars
Core UX Principles
Saved only on the device and opened with the owner’s fingerprint or passcode.
Open a PDF, tap Sign, choose a stored signature and drop it where it belongs.
Every screen drawn for iPhone, and for iPad in portrait and landscape.
From the Use Cases
What People Need From a Signing App
A Lost Password
Each signature has its own password and three tries. If the password is lost, the signature is deleted and set up again.
Control Over the Copy
A modification password flattens the signed PDF, and an open password and permissions decide who can edit, copy or print it.
First Time Here
New users get a seven-screen walkthrough, shown only on their first visit.
The Challenge
Problem Statement
The Main Goal: Make Secure Signing Simple
Applixya’s signing products were made for ministries and large companies. SignBox had to keep that level of security for anyone with a phone. The signature is locked to its owner and signed PDFs carry their own passwords, yet signing still takes only a few taps on a small screen.
“
Secured. Simple. Easy.
SignBox Slogan
Applixya, 2014
Our Approach
Solution
From Idea Scope to Every Screen
Idea scope, logo brief, use cases, card sorting, user flows, wireframes, the brand and the full interface for iPhone and iPad. It is an example of our Mobile App Design work.
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 - Flows and Wireframes
User flows and a wireframe map of every screen, with rules and notes, approved in November 2014.
03 - Brand and Interface
The logo and icon set, then 50 iPhone screens in December and the iPad screens in January 2015.
Before & After
The Blueprint & Evolution
Wireframe to Final Screen
We wireframed each screen before the visual design.
Before: the modification password wireframe, November 2014.
After: the same screen in the final iPhone design.
Design
Key Features
A Signature in Your Style
Pick a stroke, an ink color and a font for a name signature, then place it on one page or on all of them.
Passwords for Every Document
A modification password with a strength meter, an open password for each file and a passcode to open the app.
Design System
Visual Identity
Wordmark
Sign in a light weight and Box in bold, set in Diavlo, with Roboto for the interface.
Color Palette
SignBox green for the icon and main actions, charcoal bars, and blue, orange and gray as ink colors.
UI Logic
Clear states for each step: weak and strong passwords, a free trial, restoring a purchase, and a check before a mark goes on every page or comes off.
Impact
A Complete Design for iPhone and iPad
Results for SignBox
Applixya received the brand, the user flows, the wireframe specifications and every screen for iPhone and for iPad in both orientations.
SignBox
Result
By the Numbers
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.
Process
Mapped Before It Was Drawn
Use Cases, Cards and Flows
We wrote the use cases with Applixya, sorted them on cards into user goals and functions, and turned them into user flows with rules for each screen. The wireframes were approved in November 2014, before the visual design began. You can see some of the results below.
Final Showcase
The SignBox App
