Concept A: Increase Functionality

In this first concept, we decided to focus on increasing functionality to show to users. In short, we wanted to make it easier foe to show to users. In short, we wanted to make it easier fo see the most important information to them firstr and make it easier for them to find what they need later. After revisiting our first round of ideation, we felt that the following features we sketched out fit best with our priorities for Concept A:

Concept B: Aesthetics & Accessibility

For the second concept, we wanted to focus on aesthetics and visual accessibility. This meant reducing the users' visual and cognitive loads whenever they wanted to perform any of our 3 main tasks within the Mail App.

Flow Diagrams

To begin our paper prototyping phase, it was essential for us to first figure out the flow of our redesigned application using what we’ve learned about our target users’ experiences, pain points, and needs. To define the flows of our two concepts in better detail, we created 6 flow diagrams, 1 for each task in each concept. These flow diagrams are shown below:

We recruited a team of 3 design students to perform heuristic evaluations on our prototypes.

We decided to do our first testing round this way because we wanted to uncover as many errors as early as possible from people familiar with design and usability before we moved on to higher fidelity testing with a more general audience. This would allow us to get quick, yet expensive feedback as we further iterated our designs. One heuristic evaluation performed on our prototypes for sending an email can be seen below:

We created grey-scale wireframes for our final usability testing.

For our next set of prototypes, we wanted to allow our users to more seamlessly interact with the different features and flows we came up with. So, in order to do this, we decided to design medium fidelity, interactive prototypes using Figma, and used previously designed UI kits to maintain visual simplicity.

With these prototypes, we made sure to focus on scale, groupings, spacing, layout, shape meaning, and component consistency, since these were all visual elements that directly contributed to the usability of the app. To maintain our focus on usability and to keep users from getting distracted by visuals during future user testing, we did not include color, branding, photography, or micro-animations in this iteration.

We recruited three Apple Mail users to test our designs.

To ensure the accuracy of our usability test, we wrote a detailed interview script with pre-test, task, and post-test questions. We planned on reading the script word-for-word to ensure that each participant had the same testing experience and wouldn’t be unintentionally biased.Since our target user for the app was

Users liked the functionality and flow of the new designs.

However, users often had a hard time distinguishing the identity of icons, as well as which ones were clickable. This prevented them from discovering some of our redesigned features, and led to us needing to guide them to the correct buttons.

At this point, the changes we had left to implement in our final iteration were all cosmetic, and mainly consisted of adding bolder and more recognizable signifiers in the form of utilizing appropriate colors and icons.

Using the issues that we identified during the usability test, we created a final list of changes to include in our final, high-fidelity prototypes.

We created high-fidelity screens on Figma, incorporating feedback from our initial user research.

Now that we were creating our final iteration of our iOS Mail App redesign, it was finally time to decide on the aesthetics of the app! Drawing upon previous user feedback, we knew that college students enjoyed color coding as a form of organization, and also remembered that users enjoyed apps, such as Outlook, that used colors to make their pages “pop”.

These pieces of feedback inspired us to include unique, bright, and high-contrast color schemes for each of the users’ inboxes. These color schemes would be automatically generated based on the profile picture chosen for the specific mailbox.

Feature 1: Switching Between Accounts

This upper-screen menu allows users to seamlessly navigate between their different accounts and folders by clicking their account icon or the Inbox label at the top of the screen. In order to lessen confusion and make the correct components look clickable, the relevant icons are surrounded by tiles.

To show the user’s current account and folder, we included colored borders and labels. Numbered labels are also included to show the number of unread emails in different accounts and folders.

Feature 2: Expanded Email View

This expanded email view allows users to quickly view the previous email threads leading up to their selected email. To further preview a specific email, the user can either click on the email they have already expanded or a previous email from the thread. Once the user previews a screen, they can either choose to expand to the full email, or go back to the previous thread view. All of the views before expanding the full email keep the email in an unread status — a feature multiple users expressed a need for during our previous tests.

Feature 3: Attachments Bar

This attachment bar, located under the To/Bcc/Subject lines at the top of an email draft, allow the user to keep better track of the attachments they add to their drafted emails. The attachments are shown as movable bubbles with delete buttons to allow users to easily reorder or remove attachments. The bubbles are also shown in a bright, highlighted color to ensure that users can easily tell when they have forgotten to add an attachment. When users begin typing in the attachment bar, attachment, easily distinguishable icons appear at the top of their keyboard so that they can quickly add the files they desire.

Feature 4: Search Filters

This search bar, quickly accessible through the main navigation bar at the bottom of the app screen, allows users to search within a specific folder in their current mailbox. The feature is accessible at all times through the navigation bar to ensure that users do not struggle to locate the search box. The search filters allow users to specify whether they are searching for email contents, sender names, event titles, or file names. With further development, we would also like to add add a way for users to search through all folders and inboxes at once.

Feature 5: Inbox Filters

These inbox filters allow users to filter their current mailbox folder to show only unread emails, flagged emails, or emails they are specifically mentioned in. This specific filter icon was chosen because it easily recognizable as a filter visualization, and is also placed at the top right corner to ensure that users can easily locate and utilize the feature.