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?

Jo Tan
Bootcamp
Published in
6 min readJan 29, 2021

--

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.

High level wireframes mock ups with overlapping ideas between two designers
We are including this as evidence of the disorder that 2 designers ideating in Figma can result in.

We arrived at a modular solution — distilling the email experience down to
4 tasks:

  1. Read and Review
  2. Search
  3. Create Rules
  4. 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.

Low fidelity wireframe of how “Read & Review” and “Search” function can be integrated together

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:

  1. Organise
  2. Inbox
  3. 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.

An animated gif showing the concept of creating a rule in the “Organise” feature using “If…then” statements.

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.

An animated gif showing how an email is read and integrated with the “Inbox” feature.

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.

An animated gif showing the “Compose” feature in action.

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.

A basic styleguide with fonts, colours and design components

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.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Jo Tan
Jo Tan

Responses (1)