Marketing campaign managers need quick asset approvals to ensure they hit their launch dates.
But stakeholders are often away from their desks, resulting in slower turnaround times.
So we made an app for that. Simples!
The Simple marketing collaboration platform launched in 2010, before mobile devices became ubiquitous.
Background
The platform UI was therefore non-responsive and only usable on desktop devices, where the target audience spent most of their their time. However cumulative user feedback indicated that the time-critical step of approving campaign assets was being held up by stakeholders who were increasingly expected to work across different locations, and also while on the move.
My first project on joining Simple in 2015 was to design a native mobile app to address this gap.
Objective
The key challenge was to translate, extend and improve the desktop approvals workflow across to a mobile context, taking full advantage of native iOS app capabilities like multi-touch and GPS etc as appropriate.
Android was not considered viable for the MVP release due to the dominant position of Apple devices in the marketing industry in 2015.

Team
Product designer
3 developers
Product Manager

Tools
Workshops
Whiteboarding
Pencil on paper
Sketch
Invision

Deliverables
Wireframes
User & UI flow maps
Low-fi prototype
Hi-fi prototype
Style guide

Timeframe
6 months to MVP launch
18 months of iterative releases
The Approval workflow personas and use cases had already been mapped before I joined Simple.
After reviewing the documentation I ran a "reverse brief" style workshop to confirm my understanding and address some knowledge gaps. Then I created a mobile-specific multi-user process flow map which was played back to the internal team plus a small group of end users and iterated upon several times.

Personas & use cases

Paul
Content Producer
I need quick approval turnaround so I can hit my deadlines.
I need 2-way feedback so I can clarify the exact changes required.

Anna
Approver
I need to action approval requests while I'm out and about so I don't hold up the campaign.
I need to know what order to tackle approvals in.
I need context for each approval so I can give meaningful feedback.

Marnie
Campaign Manager
I need to track the status of all approvals across all my campaigns so I can intervene where necessary and deliver on time.
User flow map
This high-level process map shows key interaction points along the critical path.

Scope of work
The initial scope shown below was a little ambitious, so we scaled the initial release down to a true MVP subset of core features, then iteratively released updates over the following 12 months:
Onboarding including login, password reset and quick tips
Approvals list - pending plus completed (archive)
Asset review & approval
Single or grouped assets - Approve / Reject / Request changes
Author description and project context
Asset interactions: Zoom & pan, Markup, Compare versions, Download & share
Comment threads
Multiple-tier approval hierarchy plus followers
History log for compliance auditing
Asset metadata
Utility functions
Help
Workspace switching
Profile management
Wireframes
Mid-fidelity design
After validating the paper wireframes with a small group of users, we created a medium fidelity Sketch/ Invision prototype for more extensive testing.
UI flow map





































User testing results
A number of design iterations resulted from user testing with the lo-fi prototype, including:
Landline numbers were still used by office-bound production staff as an optional secondary contact method
The asset preview button was not immediately obvious so we enabled the entire thumbnail as a large clickable area
Dropdown access to asset versions was problematic as only one was visible at a time, so we shifted to a simpler numeric icon-based approach and removed the filenames which increased visual density of the UI without weren't adding any value
The action label "Decline" didn't resonate with users so we ideated a number of alternatives and finally decided upon "Reject" which we initially assumed might be considered too harsh and abrupt.
Users disliked tapping twice to access the "Approve" and "Approve with changes" actions so we surfaced them at top top level of the UI and differentiated via colour cues (green versus orange).
Styleguide
Back in 2015, formalised digital product style guides were still a somewhat nascent concept - it was possible to setup a library in Sketch with shared symbols and centralised colour & text style definitions, but it was nowhere as structured, modular and scalable as current solutions.

Prototype
I no longer have access to the original Invision prototype URL, so the Sketch file was imported to Figma to re-create the interaction flows. This seems to have caused some minor visual issues including occasional incorrect line spacing and element mis-alignment / cropping.
Please note: this prototype includes non-happy path interaction flows such as password reset and password mis-match in order to illustrate exception handling.
UI flow map
The screens (artboards) below were captured directly from the Sketch canvas then printed as an A1 poster for use as a visual reference for the team.
Anna's overall user journey as an Approver is broken up into goal-directed sub-flows an illustrates various interaction patterns including screen transitions, toaster notifications, user actions (drag to scroll / pinch to zoom etc) and button states (latent, hover, active, disabled etc).






































Design exploration
As with any design project, a variety of different visual and functional approaches were explored for various interface elements and interaction patterns. Here's a small selection....











The mobile Approvals app saw significant uptake within our userbase and received generally positive feedback.
Our feature usability surveys had a high rate of engagement, and the App Store rating hovered above 4 stars as we released iterative updates on a regular cadence.
Business priorities shifted however and resources were diverted to the Simple v2 platform, a massive project which resulted in cancellation of planned enhancements to the approvals app.
Key learnings
As expected, the limited physical screen size of mobile devices was a significant constraint on asset review tasks (eg zooming, panning and comparing versions).
Users were willing to bear with this non-optimal experience however as it was still better than the alternative of not being informed or able to action approvals away from their desk
A responsive platform could possibly resolve this gap by allowing work on a mid-sized device like an iPad
The multi-tiered approvals hierarchy was a particularly complex problem to address, especially with chained due dates and reversal of actions by one or more participants
Next steps
I began exploring how the approvals workflow might fit into a future state mobile experience encompassing the full desktop platform functionality... this was a conceptual exercise however and never progressed further than this medium-fidelity UI flow map:

