Loop Email

A collaborative experience for emails

Loop Email is a platform that makes communication and customer success your Company’s superpower. Loop works aggregating all emails in the organisation, allowing full transparency and seamless collaboration. Up until this point, collaborative editing and drafting was not taken in consideration for technical reasons and for lack of developers. With the growth of the team and an actual product team this project was finally ready to be built. Softwares: Figma, Zoom

Role: UX/UI Designer

Softwares: Figma, Zoom

Analysis

As a first step, we had to understand why this feature was so important for Loop email.
Collaboration and remote collaboration is vital nowadays and we had clear indication from potential customers that the lack of collaboration was a deal breaker.

From the report we saw that at least 4 deals fell through because we couoldn’t offer collaborative editing.

From a competitor research we also discover that many other platforms offered the collaboration without the added complication.

We also realised, from first hand experience, that remote collaboration was vital to us and our customers.

When I joined Loop email there was a first draft for the collaborative editing feature, but it wasn’t clear, easy to use or complete in any sense. So as a first step to understand how to design this experience I started looking at comeptitors, how they were doing to see what was workign and what wasn’t.

I also tried to analyse the initial sketches made for this feature, to understand why it wasn’t working, so I could learn from previous mistakes.
The main problem was that the experience wasn’t direct enough, it wasn’t a real time collaboration, so it was creating more confusion than ever.
The other problem was that the collaboration was happening in the same chat stream of all other communications, which would only add to the confusion.

Design

Looking at the first iteration of design, it was clear there were 2 pillars for the experience to be useful to the users:
real-time collaboration
a separate stream of communication

To achieve this I moved the collaboration to the compose dialog box . When clicking on Compose new email, reply or reply all, a new dialog box would appear. In this dialog box, a collaboration tool would be added, to add collaborators and a chat to discuss the edits and responses.

This, immediately seemed like a better approach for different reasons:

it allowed a different stream of communication, from the chat and targeted to the email in question
it allowed us to re-use existing component, speeding up the developement and release stage
it gave users complete freedom, keeping discussions seprated and teams focused on each email
it gave users the freedom to make any message collaborative and vicerversa
we had clear view of where the feature would live in the platform and how it would be accessed.

Deliverables

Working with the development team and the CTO we investigated all the flows and the component needed for building this feature.
All flows and views were then designed and organised in Figma. Rules and behaviour were added next to each screen and component to help developers and for record keeping.

Inviter POV – New draft/Reply/Reply All

TIP: Clear guidance for scrollable areas and behaviour is essential to avoid confusion and for a good handover to developers!

Inviter POV – Write a Reply

I see an email I want to reply to – I think it will be an easy task, so I click on Write a reply

While I am typing I realise I should probably consult my supervisor

My draft is automatically saved – and it is a personal draft, because I haven’t shared it with anyone yet

I then select the draft from the inbox list and click on “Edit Draft”

After I clicked on “Select Draft” the pop up appears with my draft and the possibility to invite people to collaborate

I shared and collaborated to a draft with other people

When a draft has been shared the label changes to “Shared Draft”

Delete confirmation pop up

tooltips

I invited 3 people to collaborate – tooltip will show me the name of people I invited

Only the owner of the email thread can send the email

Collaborator POV

Chat bar is only present if I am part of the chat in Loop – If I am invited to only collaborate to the draft, I won’t see a chat bar, until I am invited to the chat in Loop

Email sent – history view

From the Loop chat I can see when a reply/email has been through collaborative edit and I can see the history of the comments by clicking “Replied collaboratively”

When I click on the collaborative tag, a view-only pop up of the email will appear with the history of the chat

Success metrics and further testing

5 conversions thanks to collaborative editing feature

Great feedback from existing clients

Better score against competitors

User testing for further improvements