How I Designed an Emoji Feature to Instantly Humanize Legal Work
Client
Lupl
Role
UX/UI Designer
Team
Product Manager, Design Leadership, Fullstack & QA Engineers
Scope
Researching, UX Design, UI Design, Prototyping, Handoff, Gathering User Feedback
Platform
Web, iOS, Android
Year
2024
What is Lupl
Lawyers are oftentimes flooded with documents, and instead of doing the legal work, they are in a constant battle, hoping not to miss a deadline. Lupl is a tool designed to streamline legal processes and workflows.
What challenged me
Having ownership over design decisions and advocating for them when developers propose other solutions that don’t necessarily serve the user experience.
Impact
The adding of emoji reactions in Lupl met the lawyers' expectations for quick, expressive responses, just like in other everyday apps.
Context
How it started
I thought this feature would be a fun and relatively easy one to design. But, to be honest, I lacked confidence at the time due to my limited experience in this job. However, I offered to design this without too much overthinking. During a requirement-gathering catch-up, we found out the users should be able to:
- react to a message from multiple entry points;
- add multiple reaction to a message;
- remove a reaction;
- see the authors of reactions;
- have 4 predefined emojis to choose from.
Problem
Fun meets professionalism
While working on this task, I was still learning how to use the app and understand how each feature works. With much help from my coworkers, I learnt more about the tool.
The issue was that I still was not sure which visual system to use to keep the UI from being too cluttered. Since it was a legal platform, I wanted to make sure emojis did not seem out of place or too casual.
The issue was that I still was not sure which visual system to use to keep the UI from being too cluttered. Since it was a legal platform, I wanted to make sure emojis did not seem out of place or too casual.
Researching
Learning from the best
I researched how other apps incorporate emoji features to better understand existing patterns and user expectations. Microsoft Teams has a set of emojis you can use to quickly respond in formal situations.
Slack is unique because it uses inline elements a lot, which helps make busy conversation threads clearer. Teams suggested a more business-like approach, which seemed right for a legal platform. I will have realised that it wasn't.
Slack is unique because it uses inline elements a lot, which helps make busy conversation threads clearer. Teams suggested a more business-like approach, which seemed right for a legal platform. I will have realised that it wasn't.
Time to make mistakes
First review
After a few explorations, I had a first design inspired by Microsoft Teams, ready to be reviewed. However, because I didn’t design all states, I realised a bit late in the process that this solution wasn't going to work on the existing UI.
The third image shows that users have problems adding a reaction to a message below a message that already has reactions
The third image shows that users have problems adding a reaction to a message below a message that already has reactions
Emojis: 1st iteration
1
Maximum shown reactions.
2
Emoji modal visible on hover.
3
UI issue when the user wants to react under a message with reactions.
Improving scalability
Small fixes
The interface was confusing, so I made some changes. With this variant, I relied more on inline reactions. This approach is more scalable and fits better with the current UI. Also, it was easier to adapt for mobile design.
Emojis: 2nd iteration
1
I made the interface simpler by using more inline elements, which solved the issue from the first iteration.
Mobile design
Lessons learned
On mobile, I made sure the feature is working in the same way as on desktop. People usually read from left to right, a habit that started long before screens were invented. This is why I decided to show reactions from left to right, by timestamp, with the most recent one on the right.
Although the reading pattern argument wasn’t very strong in meetings with developers, I noticed the second one—`this is the standard used by Slack`—was better received. 😃
Although the reading pattern argument wasn’t very strong in meetings with developers, I noticed the second one—`this is the standard used by Slack`—was better received. 😃
Mobile Design
MVP is launched
What users said
The team put in a lot of effort to complete the feature. Feedback from my coworkers was crucial and guided me in balancing functionality with simplicity.
After a short period of time, we got feedback from users via the sales team about the interface being slow when using emojis. It was more of a performance issue, which had been fixed by developers right away.
After a short period of time, we got feedback from users via the sales team about the interface being slow when using emojis. It was more of a performance issue, which had been fixed by developers right away.
