Setting

As part of my interaction design class taken at Michigan State University, our midterm project required us to execute different phases of the design process to create a solution to a problem our classmates had with an app or website.

For my project, my peer expressed a problem with the mobile app of Microsoft Outlook. The problem was that Outlook was sorting emails into categories that made it hard for him to see important emails. He would often miss out on important emails because they were hidden in the “other” section of the inbox and would overlook them. This was causing him to miss out on important opportunities like scholarships or important communications.

The project was structured based on the Empathize, Define, Ideate, Prototype, and Test framework proposed by the design school at Stanford (d.school). I followed these steps by conducting different tasks of the design process which are outlined under each phase below.

Problem: Outlook sorting emails and causing important communications to be missed.

Empathize

User Interview

I conducted a user interview about an interaction issue. I had the participant run through the app and describe his interaction problem. I asked questions to understand the root cause of the interaction issue. I wanted to understand not only his thoughts but any emotions expressed. At this point, I was focused on getting to know the user and his problem, I did not want to jump straight into the solution. Below is a summary of information gained from this interview.

User Information:

Name: James Burger (Fake Name)
Age: 22
Gender: Male
How often uses the product: Multiple times a day
Other: James is a student at Michigan State University in the Master’s program of media and information. He also works at MSU as a researcher and project manager.
Design project/product: Microsoft Outlook Mobile Application
Interaction design issue: Outlook sorting emails
What?: Outlook is sorting emails in ways that he doesn’t understand and doesn’t want. Specifically, it’s sorting mail that he thinks is crucial into a second page called “other”. How?: Mail is sorted into “focused” and “other”,additionally there are folders for “clutter” and “junk”. It’s not logical, he can’t stop the filtering or adjust the filtering.
When?: This happens on a regular basis. At least once a week he finds an important email in his other folder that he expected to be in “focused”
Observations: He appeared to be resigned and exasperated. He knows he can’t change it and it builds frustration.

Define

I was tasked with further defining and understanding the users I was designing for. Using my information from the contextual interview, I was tasked with creating a problem statement, personas, and a storyboard to help guide me throughout this design process.

Issue Statement

Today young people receive a large amount of electronic communications to their email inboxes. Some of this information is crucial whereas others don’t require as much prominence. Sorting algorithms attempt to address this by filtering and showing important information, however they are inaccurate and can hide important emails. People need to access important communications without having them hidden.

Storyboard

Personas

Ideate

Next, I started coming up with different ideas for solving the user’s issue with the app. First I used a brain writing framework to generate ideas. This was a brainstorming session in which myself and my peers in my interaction design class came up with three ideas for our own problem. We then passed around the paper in a circle and the next person could either add to one of the ideas above or contribute their own ideas on how to solve the problem. After doing this with about five people we all ended up with a variety of solutions to the problem. We then organized them into a framework of NOW HOW and WOW. Additionally, I sketched ideas out in a notebook. Finally, I decided on a final sketch which can be seen below. The final design ended up using highlighting to emphasize important emails, while keeping all emails on the same screen.

Sketches and Brainstorming

The design is meant to address the concern that certain emails were hidden from view in the focused mode of the app. I wanted to retain the ability to highlight certain emails as important, but not hide other emails behind another screen. Therefore I chose to keep all emails on the same screen, instead of hiding those deemed unimportant by the algorithm and use color and shading to distinguish important emails. I added the addition to filter only highlighted emails if the user wanted to go back to the previous focus mode.

Prototype

I developed a paper prototype of my solution. I created the prototype with a variety of quickly swapped-out parts that I could use to adjust the prototype on the fly and respond to the user’s interactions. You can see a picture of the prototype below. I made cutouts of buttons, headers, and emails, so I could quickly switch them throughout the user testing session.

Digital Prototype

I went beyond the paper prototype required for the class and developed a prototype using the online design and prototyping tool, Figma. I included an interaction showing how the highlighting feature might work and how filtering the emails would work. You can interact with the prototype below.

Test

I conducted a user test with the user of my product. First, I had the participant look at the original design and app. I reminded them of Outlook and the feature that they described they had a problem with. I then had them take a usability scale measure regarding the current system in outlook. Next, I brought out my paper prototype and started the test of the new feature. Things went relatively smoothly, however, I did adjust the paper prototype to personalize it to the user. For example, he was having trouble determining which emails might be considered important because the prototype only had generic emails. I adapted the prototype to include emails from people he might know and might deem as important or unimportant. In this way, I was able to make it more relatable and closer to what he might actually see in the app.

Insights that we gained from the interaction were sorted into four key areas: Critical Errors, Interactions, Unexpected Results, and Positive Interactions. These are outlined below in the graphic.

The same usability scale was used after the test regarding the new feature. Results indicated a jump from 32 to 38 on the scale with an increase from 2 to 4 for using the system frequently and a drop in unnecessary complexity (4 to 1) as major contributors to the score increase. Although this is data from only one participant it shows that there was at least a quantifiable improvement in usability ratings.

Conclusion

The testing session was insightful and provided both positive and negative feedback about the design. Overall, the user was very pleased with the design. Next steps are outlined below.

• The wording might be something to test in future iterations of this prototype and app. There was confusion about what “highlight” vs “focused” vs “flagged” might mean. Specific tests might look at these different labels to see what might make the most sense for describing the feature concisely on buttons and labels.

• Future prototypes should feature emails that are distinct and relevant to participants in the test. It would be great is to beta test using the actual app and actual emails to make sure it works with each person’s unique inbox.

• A small tutorial or onboarding process could explain the feature, or the algorithm could briefly be explained. This could be integrated into the initial installation of the app to help people navigate the new feature quicker.

• Find ways to make it more apparent how to filter so you only see highlighted emails.