Case study: Redesigning an email experience
While we’re all staying home and staying safe. What better way to spend the extra time than flexing those design muscles?
In this day and age, everyone has email and uses it. We noticed that everyone has a pet peeve about it — and you wonder how has the perfect email client not been created yet? Issac Teh and I decided to spend some time figuring out what our ideal email experience might look like.
1. Workshopping the problem
We got on to trusty Figma and listed all the things that we didn’t like about email, then grouped them into themes. We then put them in order of priority to be ‘solved’ in our new imaginary ideal email client.
We also made a list of tasks people wanted to do when they checked their mail:
- I want to review new emails
- I want to see important and relevant emails first
- I want to dig up old important emails
- I want to reply or send an email
- I want to maintain good email hygiene and practices
The combination of these problems and jobs would inform our solution.
2. Ideation & Wireframing
In ideation, we made conscious decisions to not be locked into the constraints of the traditional email interface layout. (This was really difficult!)
Our method here was to each go away and mock-up a simple layout each and come back to talk about what we liked about each. We found ourselves constantly trying to strip away anything superfluous.
We realised that email interfaces often throw the kitchen sink at users — everything you could want to do is right in front of you. But what if I’m just here to read new emails? Do I need my search and organisation tools hanging around taking up precious visual and cognitive space? Hence, we formed a problem statement:
How do we make email interfaces less distracting, more task-oriented and focused for the end-user?
Our next task was to pull our ideas together into a solution, re-work them and explore alternatives.
We arrived at a modular solution — distilling the email experience down to
4 tasks:
- Read and Review
- Search
- Create Rules
- Compose
Users can select the task they want to carry out and the interface helps them to focus on that task. They can also multi-task by selecting up to 2 tasks at a time where the screen will split and allow for both task types.
The next step was to delve into each of these tasks to try and figure out an interface that would make that experience more focused and efficient for the user.
3. Evolving the Solution
As we began to flesh out the solution, it began to evolve. We wrestled with mental models of how email apps should work. We thought of Search as a standalone feature but it is dependent on inbox and could not function modularly, we realised that it had to be a part of the inbox page. We had to strike a balance between our ideal and good sensible UX.
We made a decision to walk away from the ‘split-screen’ concept as we buckled down on the idea of helping users to focus on the task at hand.
Our solution now looked more like this:
- Organise
- Inbox
- Compose
We decided that our real value would be in creating rules — something that we find existing email clients do not do very well.
Solution: Organise
This part of the project was where we got to play and solve some pain points. We knew that creating rules for your email was difficult and complicated, so we wanted to make it more user-friendly and logical. Using ‘If…then’ statements, we wanted to come up with a solution that would be easy for people to understand and use.
Solution: Inbox
Our inbox solution was not too different from email experiences that people are familiar with. Columns and folders help users to understand visually where their emails live. We made sure that the UI was clean and simple to help users stay focused. For example, we had emojis assigned to each folder initially, but decided against it as it was getting too busy.
While working on this part of the project we also got to play around with Google Sheet Sync in Figma which helped make populating our screens really easy.
Solution: Compose
The main driver here is the idea of ‘focus’. We referenced other writing experiences such as Grammarly and Medium and found that the full-screen writing experience was very calming and intentional.
Other fun stuff
Styling
As designers, we often have to adhere to a vision that belongs to someone else. This was a good opportunity for us to spend some time playing around with some UI and come up with a basic style guide to take our solution to the next level.
Animations in Figma
We also tried to push Figma to its limits, experimenting with creating animated interactions and components. We also dabbled with Lottie files to see what it could offer.
Learnings
Start with the end in mind
Our project took a long time to complete because it wasn’t exactly clear to us when it was done. There was an infinity of improvements that could be made and so we just kept on going. It would have been good to have an end-goal so that we had something to work towards as well as a clear finish line.
Start with the ‘Why’
One question that we asked ourselves constantly during the project was ‘Why?’. This helped us to make decisions quickly and also ensure that whatever we did was with the user in mind. While something like the 5 Why Technique is useful for planning and value proposition, we found that a leaner version of just asking ourselves and one another ‘Why?’ every now and then was very valuable — almost like a collaboration technique.
Start doing more personal projects
When you’re working in technology, UX or UI — there often aren’t opportunities for you to try new things or experiment with different services, software or programmes. We found that this was a great opportunity for us to try new things and very often that experience spills into something useful that can be used at work.