Simple Approvals

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.

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

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

  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

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:

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

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: