About the project

 

Workshare is a comparison and collaboration platform for high-stakes documents. The part of the platform I worked on for this project is a Workshare’s integration with iManage. It makes it possible for the users to access their documents from management system (iManage) on the go, share and collaborate on them safely and in a controlled manner. 

 

What was I asked to do?

 

I was included in this project as a UI designer to visually refine screens already in development. When we started working together to understand the scope of the story we also discovered that there are additional use cases and it is needed to look more deeply into this project also from UX aspects.

 

The process

 

Firstly, we defined the problem for the initial project and also the goal of how to go forward.

The problem​

 

A user uses Workshare to upload documents from iManage so he/she can access them on the go and also to collaborate on them with external people. This is great, but …

  • It is too many steps to upload a single version of a document manually every time

  • It is hard to track which version of the document is uploaded and if it is the latest

The goal

 

Define and update the existing user flow and interface to create a seamless and full experience for the user when syncing documents (on iManage) with Workshare via right click:

  • Expanding the previous user flow by a number of additional use cases, such as allowing the user to share synced documents seamlessly on the iManage platform rather than only on Workshare, allowing the user to stop syncing the documents, and provide continuous user feedback.

  • Updating the UI by making it aesthetically pleasing and improving visual hierarchy.

 

Constraints: Concurrent design and back-end development required certain design updates to align with back-end decisions already made.

Mapping out the existing user flow

 

Working together with the project manager and developer we mapped out the existing user flow to define missing use cases and define the scope of the story.

Screenshots of the already existing screens:

Designing the user flow with all defined use cases

 

We understood that user now has the possibility to send and sync documents to Workshare
(Use case A), but he/she does not have the possibility to stop syncing the document with
Workshare (Use case B) and to sync back from Workshare (Use case C).

  • Use case A – The user wants to send documents to other people or upload them to Workshare to access them on-the-go.

  • Use case B – The user wants to stop syncing his documents with Workshare.

  • Use case C – The user wants to update the documents in iManage with the updated version from Workshare.

Designing the user interface

 

Firstly, I needed to understand the visual language of Windows and iManage applications in order to understand how to best create a balance between a seamless and a familiar experience for a Windows and iManage user and still incorporate characteristics of Workshare style allowing the user to realise that they are now using a Workshare feature.


To be honest I spent ages trying to find something that resembles Windows style guide for the latest version and came up empty. Finally, I just fall back to using google image search and spent an evening using my partner’s Windows machine and discussing how he describes the look and feel of it.

When I started to design the screens I knew I wanted to add delight, colour and touch of Workshare. To do that without making the experience visually unfamiliar and confusing for the user I decided that I only small changes should be included. For example including avatars next to people names, change spacing, include or change iconography. 

As Windows applications were told to be very constrained development wise I worked really closely with Matt to make sure my changes are feasible. Herein I would like to use the possibility to appraise how talented and amazing developer he is.

Selected samples of the designed screens:

User flows including designed screens

Use case A:

Use case B:

Use case C:

A sample of specifications for the developer:

Thanks for reading!