Simple Approvals

Review & approve campaign assets on the go.

Image alt tag

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!

Context

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.

Image alt tag

Team

Product designer
3 developers
Product Manager

Image alt tag

Tools

Workshops
Whiteboarding
Pencil on paper
Sketch
Invision

Image alt tag

Deliverables

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

Image alt tag

Timeframe

6 months to MVP launch
18 months of iterative releases

Research & planning

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.

Simple Approvals

Personas & use cases

Image alt tag

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.

Image alt tag

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.

Image alt tag

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.

Simple Approvals

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

    1. Single or grouped assets - Approve / Reject / Request changes

    2. Author description and project context

    3. Asset interactions: Zoom & pan, Markup, Compare versions, Download & share

    4. Comment threads

    5. Multiple-tier approval hierarchy plus followers

    6. History log for compliance auditing

    7. Asset metadata

  • Utility functions

    1. Help

    2. Workspace switching

    3. Profile management

Ideation
Conceptual sketches

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

Simple Approvals
Mid-fidelity screens

User testing results

A number of design iterations resulted from user testing with the lo-fi prototype, including:

  1. Landline numbers were still used by office-bound production staff as an optional secondary contact method

  2. The asset preview button was not immediately obvious so we enabled the entire thumbnail as a large clickable area

  3. 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

  4. 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.

  5. 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).

High fidelity design

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.

Simple Approvals

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).

Simple Approvals
Simple Approvals
Key screens

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....

Internal assets & markup
Outcomes

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:

Simple Approvals
Simple Approvals