Workshare is a comparison and collaboration platform for high-stakes documents. The part of the platform is an iOS mobile application that allows the user to review updates and comments made to the documents. In order to get a full overview of any changes or comments on the documents, notification cards were introduced. Notification cards worked as a task list making sure not a single change or comment was missed.

 

 

The problem to solve

 

A lot of times the user received a high volume of notifications but was not able to address every one of them right away (either needing more time or resources to reply). This is where they got frustrated because there was no possibility to keep a notification card for later.

 

 

The goal of the project

​​

  • Allow users to work in a flexible way and enable them to manage their priorities by deferring notifications for later – to ‘keep’ a notification card for later

  • Introduce users to the value of cards in Workshare mobile, and show them how to use and interact with them effectively.

 

 

Where did I start from?

 

We worked in collaboration with a talented UX designer where my task was to design the visual of the user interface and motion. I started from wireframes created by UX design.

 

Keep a card behaviour wireframes:

Onboarding flow wireframes:

How to indicate that either card will be dismissed or kept for later?

 

To give feedback to the user that if they slide right they keep a card and if they slide left they are dismissing.

I tried several versions:

  • First idea - Changing the colour of the whole card to red when dismissing and green when keeping. When I tested it internally it was considered visually way too strong and super distracting.

  • Second idea - Using copy on the top blue area to describe the action and what is about to happen. When I tested that then it was considered too subtle and most people did not even notice the feedback text changing.

  • Final idea - Using a subtle white overlay with icon and text on top of the card to indicate what is happening when sliding left or right. When testing this version it was considered easy to understand.

How will the kept cards be differentiated?

 

Help the user to visually distinguish between regular cards and cards that they have kept for later. We tested several different versions for this indicator and after multiple feedback sessions with different stakeholders, the version on the right was chosen.

How to show the expected action in the onboarding tutorial?

 

Probably one of my favourite parts of this project was to create animations to indicate the action user should do with the card during the tutorial.

At first, we used image/icon to show what the user should do with the card, for example, slide the card right to keep it was shown like that:

But, during initial feedback, it became clear that image/icon was not enough to create an understandable and clear experience. From there I decided to use animation. I used Illustrator to create the vectors and AfterEffects to create the animation. The animation was exported as png sequence which was turned into a loop in the code.

Finally, this is how design specifications presented for the development

 

Thanks for reading!