Easy Mail | Case Study

Overview

Problem:Create a software tool to format text into an easy to read, eye scan format for dyslexic/reading challenged users.

Requirements:

Easy to install and use application
Easy to Modify and Configure customizable options
Extremely easy to restart the process from initial launch to achieve outcome of perferred text content readability.
Easy to Find, install and launch for users.

Solution:A Google Chrome Browser extention tool to paste text into a text area web component and adjust Lineheight, font, highlight questions and keywords.

Solution Team

The design brainstorming exploration, solution proposals and deliverables were chiefly owned and performed by 5 studenct and the members the coach over seeing the product experience:

Student Programmer
Student Programmer
Student Programmer
Student Programmer
UX UI Design Coaching & Client *

My contributions as UX UI Design Coaching & Client:

Proposed problem statement for MIT Accessibility (A11y) Course.
Provide UI & UX Design feedback to student developers building the solution on how to optimize useability and design.

Design Stage

Early Design & Exploration

Early sketches, brainstorming and screenshots from initial run prototype the development team built.

Thumbnails and Story - User(s) current problem.

**figure:** Overview of the users current problem where user (slow reader) with reviewal and answering lots of mail daily and taking too much of a portion of his/her day away from high priority tasks..

Thumb Story - overview

**figure:** Holistic thumb story where user is getting through loads emails every day, take action to increase readiblity scan for keywords & questions so they know if the email needs a reply.

Screen flow - Solution

**figure:** Sketches showing flow of user(s) desktop.. an screen overview how user with new tool can solve the problem/task.

Prototype First Run

**figure:** Developers start building application and look for design feedback on the layout and right panel.

Visual Feedback on Settings Panel

**figure:** Visual advisement (1) Reoganize components into distinct groups (2) Color Highlight related options should not be hex values but should be a preview of the actual color and a color picker when selected (3) Components should be aligned vertically within the panel when possible.

Settings Panel - Component groupings

**figure:** Opened panel shows vertical list of 3 primary text formatting options available to the user: Spacing adjustments, defining highlight color treatments and define specific keywords. Color highlights: All question sentences with a questionmark will receive a color treatment. user defined keywords will also recieve a color.

Pasted Unformatted Text into Text-area box

**figure:** User selects text from any email that they want to format and pastes it into the Text-area box on the center of the ui.

Resulting Formatted Text

After the user clicked Format Text button, page refreshes with the desired text settings applied ( spacing and color highlights). In this example, Lines are now double spaced and purple is applied to questions. Format Text button is disabled after settings have been applied. Clear Text action stays enabled.

Retrospective

Students were able to get the prototype functional and cycle through a few rounds of basic visual refinements before the close of the semester.
Students presented the project to the instructors and class peers.
Provided future enhancement list of recommendations to the students if they chose to make any changes in the product later, like a checkbox for user to automatically configure color contrasting colors on hightlighted text against background or an icon indication that the selected customized color highlighted items meets easy realability and accessibility constrast ratios