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?
A friend and I decided to spend some time figuring out what our ideal email experience might look like.

Click here to read full article on bootcamp.


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-orientated 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.


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.

  • DateJanuary 1, 2021
  • CategoryUI/UX
image
error: Content is protected !!