Project Overview: This is the home page for the students after they sign in to Aplia.com. The current design was built more than 3 years ago.
Goal: To improve efficiency addressing major user goals and clean up unnecessary elements on the page, to update the design visually
My Role: User experience designer
Company: Aplia
Year: September 2009 – December 2009

Discovery – Understanding Users Needs

We conducted student and instructor interview. For students, we did phone interview and we also went to a local college to meet with students face to face. Mainly, we wanted to know what the students want to do when they sign in to Aplia.com?

These are the summary of the findings:

• Do homework
  • Don’t want to miss homework
  • Want to see what is coming up
• Check their scores
  • How did I do last week?
  • To prepare for my exam, what topics I didn’t do well?

Design

Understanding what the students want to do, the focus was to clearly display assignments in the home page. The biggest change made was to remove the entire assignments tab because if the students can access their assignments from the home page, there is no need to have it as a separate tab. Scores tab was also moved as the 2^nd tab next to home tab to make it more prominent.

Quick usability validation

For this project, we had a luxury of time to perform quick usability student on the clickthrough prototype (made with Fireworks). 5 students were tested and there were minor changes made as a result of the test findings. We also plan to do future student interview after they have used it for a few months.

What have I learned?

It is important to push ourselves and try hard for the ideal solutions but it is more important to know when to stop when things didn’t work as planned, otherwise we could be losing much more time than what we should be spending. In this case, the engineer and me tried to make/design a “hack” drop down menu to display reading table of content but we couldn’t get the functionality works the way we want (mainly issues with browser compatibility and scrollbar). After spending quite a bit of time of this small feature, we decided to go with a simpler dialog solution.

Table of contents original design

Table of contents new design

Disclaimer: This is only a brief look of my work. This project is owned by Aplia and I only want to show a few sample materials. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: Analytics is an interactive visual representation of students’ performance. Prior to analytics, instructors can only see raw data presented in the spreadsheet-style gradebook.
Goal: To allow instructors to quickly see students’ performance and point out problem areas that they are interested in.
My Role: User experience designer
Company: Aplia
Year: January 2009 – May 2009 (+ongoing iteration)

Discovery – Understanding Users Needs

We conducted instructor interview as a major part of the research. We also analyze different artifacts such as gradebook, performance graphs and charts. We found out that the main instructor goals were:

• Identifying underperformed student in comparison to class
  • Students who has significantly lower average score than class average
  • A trend of score going down over time, usually observed by week
• Identifying questions, assignments, or topics that students have most trouble with.
• Focusing on one student’s performance. This is always needed at the end of the semester when the student visits the instructor and asks why he gets grade that he did not expect.

Design

I adopted sketchboard technique I learned from Adaptive Path’s workshop for the first time and it worked very well. Putting things like sticky notes on a big piece of paper definitely make people feel that nothing is finalized and it encourages them to participate. It’s a great way to get engineers and product manager involve.

Despite complex layer of interaction, the flow is pretty straight forward.

Implementation

I worked very closely with an engineer on this particular project because it needs a deep understanding on the information being shown here. And sometimes it’s hard to make a spec about moving parts so there were a lot of collaboration between designer and developer. This interface was developed in Adobe Flex.

What I’ve Learned

When designing interface with information visualization, it is a little bit more than basic interaction design, visual design plays an important role and  I wish I had more expertise on the visual side. Color is also crucial on this type of project which means we have to take color blindness into consideration when choosing color or designing the shape of the label icons. We did test the interface with people with colorblindness and made sure the color works for them.

About this topic, a few weeks ago I found a very good resource website on design and colorblindness:

http://wearecolorblind.com/.

Disclaimer: This is only a brief look of my work. This project is owned by Aplia and I only want to show a few sample materials. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: ApliaText is an innovative online textbook reader leveraging all the web has to offer to improve reading and learning experience.
Goal: To provide textbook content online and seamlessly integrate with student learning behavior.
My Role: User experience designer
Company: Aplia
Year: October 2008 – May 2009 (+ongoing iteration)

Discovery – Understanding Users Needs

We conducted extensive research on how and why students read textbooks. We found out that traditional e-book are usually based on physical textbook metaphor and it wasn’t the best approach. For example, referring to actual book pages make sense for physical books because of page space limitation. But for online reading, it is more natural to put a section worth of content into one online page for continuous reading. Our team redesign reading experience so that we leverage advantages we have online.

We found that most of the time, students use textbook when they are doing their homework. They usually switch back and forth between the two. They also do highlighting and note taking as part of the learning process.  The highlight helps them learn while they read and also keep track of things they want to recall when they prepare for the exam.

Design

The main functionality of ApliaText is page navigation. For the actual textbook, it is very easy for students to flip between pages. They usually refer to pages from their memory. Instead of referring by page number, it’s natural for students to notice what’s on the page. For example, images, bold texts, and paragraph layout. We designed an iTunes-coverflow style page navigation as the book header bar that allow students to go to different pages and chapters.

This flipbook is also accessible from student’s homework page itself. When they are stuck with their homework, they have access to the textbook right away.

Key terms are clickable and the description will be shown as a tooltip next to it.

Highlighting can be done by simply highlight the text using cursor. The highlight icon will appear, students can click the icon to highlight. All highlights are aggregated in the Chapter Recap page. It helps students collect their highlights when they want to revisit them, usually for their test.

What I’ve Learned

Following real world physical object metaphor is not always a good idea. It sure give the clue for users on how they can interact right away but interacting using mouse is different from hands. My favorite “bad” example on this subject is the design of digital calculator. I don’t understand why they make it look like an actual calculator? It’s too cumbersome to try to click the right digits and operators. Excel-style (entering string of text) calculator is a much better way to approach the design problem in a digital world.

Disclaimer: This is only a brief look of my work. This project is owned by Aplia and I only want to show a few sample materials. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: This is one of the major components of the gradebook. Most instructors have more than one source of scores and they want the students to be able to see their scores in one place.
Goal: To allow instructors to import scores from excel or csv to Aplia online gradebook.
My Role: User experience designer
Company: Aplia
Year: September 2008 – November 2008

Discovery – Understanding Users Needs

Since this is  a part of the bigger project (main gradebook), in addition to background instructor researches, I did an analysis on the actual gradebook spreadsheet itself. The goal was to understand the common format and instructors’ expectation when dealing with online gradebook from course management systems.

The major finding was that instructors want their students to “know how they are doing.” This means any exams, quizzes, homework should be presented to students immediately once available. The problem is the scores cannot be posted on the school’s board because of the privacy rules. An online, password-protected interface is ideal to present this information.

The other main concern about student’s grades was accuracy. When too much automation is involved, mistake can occur without being noticed.

Design

After analyzing the users task flow, I realized the major tasks would be uploading the file, record matching and correcting, and then selecting the scores column to be added to the gradebook. With that thought, I went through a number of sketches to see what would be a good interaction in this scenario.

I decided to use accordion model because the process is so complex it should be broken down into smaller steps. This model allows users to know the number of steps required to finish the process and where they are in the flow.

These two images present the first two steps of the import process. Note that users are always able to cancel the process or go back to the previous steps at anytime. Also, when it comes to form submission buttons like “Continue” and “Cancel”, the primary decision will always be made prominent than the other (Cancel) one. This case we used bold for primary action. Using a button for the main action and link for Cancel works as well. The key is to be consistent throughout the site.

Ideally, interfaces shouldn’t require help text. But in this case we provided help because users need to be much more careful when dealing with scores. The help dialog is non-modal and draggable so users can read the text while interacting with the main page. Also, since we know nobody like to read the instructions, any help text needs to be short and precise.

The above images shows the third step of the process and its printer-friendly version. This is a very important step as it presents mismatched records between the uploaded file and the online gradebook. Originally, we planned to allow the user to correct the mistake from this screen. But with the resource we had for this project, we decided to implement this feature as a future improvement and went with a simple report that allows user to easily correct the listing in the csv file.

The last step of the import process allows user to select columns to import. Since the instructor usually does not upload many columns at a time (average between 1-3), it is proper to provide just a simple interaction. In this case, I used the “Add another row” pattern, which is similar to Gmail attachment feature.

Implementation

The early prototype went through light user testing and the feedback was good. I collaborated with the engineer and QA throughout the development process and the entire project took approximately 3 months from beginning to launch.

What I’ve Learned

This is one of the first projects where convenience is not the first priority. As I mentioned, when dealing with grades, error prevention is the key.  And the designer needs to keep in mind that providing loads of instructions was not a good option since it will confuse users. Also, I have to be honest that I was not a big fan of “wizard”-type interface because, in my opinion, it’s an indication that the process has too many steps. Wizard interface, however, was not a problem when users are aware of the number of steps and know where they are in the process.

Project Overview: This application, Pegasus, is a full scale educational application that allow students and instructors to manage their courses and perform course activities online.
Goal: To design a comprehensive, highly usable course management system.
My Role: Interaction Designer and Usability Specialist
Company: Pearson Education
Year: 2005-2008

This feature-rich course management system allows students and instructors to manage their courses online and perform a variety of coursework activites:

• Schedule assigments in a course calendar
• Submit homework and take a test online
• Maintain coursework results in grade book
• View customized reports

My main design process includes sketching the ideas and translating them into annotated prototypes. This involves working with product managers and business units in order to define the site’s behavior. Users are also involved in the usability studies throughout the process. Below are the examples of the sketch and prototype.

Disclaimer: This is only a brief look of my work. This project is owned by Pearson Education and I only want to show a few sample materials. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: MyPearsonStore.com is Pearson Education’s online bookstore website. Target customers for MyPearsonStore.com are college/university students who want to buy textbooks.
Goal: To improve search tool and search result presentation.
My Role: User Research, Usability Study, Design Recommendation
Company: Pearson Education
Year: 2007

Search Tool
The original design makes use of four text fields with “Go” button for each field. After performing background user research on how students find textbooks and what information they have when buying textbooks, the search tool is redesigned as two separate areas for ISBN search and Title/Author/Edition search. Usability study result shown that this new design was cleaner and easier to use. See below for before and after screenshots:

Search Result Presentation
The search results were only displayed a list of books with an option to sort by Copyright Year and Author. With user research, the design team knew how to redesign this page based on users’ preferences. The sort drop down menu was replaced by a filtering tool on the side of the page. Users can also perform search from this search result page. See below for before and after screenshots:

Disclaimer: This is only a brief look of my work. This project is owned by Pearson Education and I only want to show materials that are online on live websites. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: Tripro project consolidates content from various websites (e.g., Adobe Press, Cisco Press, FT Press, PeachPit, InformIT, etc.) and present them in three websites corresponding to three different categories;  IT , Creative , and Business.
Goal: To ensure that the sites presentation, including new features such as blog and Podcast, suits target audiences.
My Role: Usability Specialist – Usability Study and Design Recommendation
Company: Pearson Education

Project Overview: MyLab is a collection of textbook supplemental websites (such as mywritinglab.com, myhistorylab.com, etc.) owned by Pearson Education. These websites were developed and owned by different business units. As a result, the structures of these sites are different and have caused user experiences to be different among MyLab sites.
Goal: To improve and simplify new user registration process.
My Role: Usability Specialist – Heuristic Review, IA review, Usability Study, Design Recommendation
Company: Pearson Education
Year: 2007

This project consolidates a variety of websites in “MyLab” series into one usability research. I had exposure to the following websites during the study:

• www.mycomplab.com
• www.myeconlab.com
• www.myhistorylab.com
• www.mymathlab.com
• www.mypsychlab.com
• www.mywritinglab.com
• www.campbellbiology.com
• www.mathxl.com
• www.masteringphysics.com

There were many findings and recommendations from the reviews and usability study. One of the examples that I could show here is the part where the users did not understand what the “platform” selection in the registration process was. The redesigned instruction clearly helps the users understand what the platform is and where to look for it during the registration. See below for before and after screenshots:

Disclaimer: This is only a brief look of my work. This project is owned by Pearson Education and I only want to show materials that are online on live websites. For more details on particular projects, feel free to contact me at chatreez [at] gmail [dot] com.

Project Overview: The amount of emails on has burgeoned due to the fact that many users use mail in a wide range of activities. Although email was originally designed as a communication application, it is wildly used for additional functions not originally intended for. For example, many users make use of email service for task management and personal archiving. There are many web-based email services such as Yahoo! Mail, Hotmail, and Gmail. These services respond to consumer demands by providing increasingly larger storage space for free. However, it is difficult for users to manage their inbox with the large volume of emails.
Goal: To develop the new web-based email interface that handles email overload problem.
Role: MS in Human-Computer Interaction student
School: Indiana University – Purdue University at Indianapolis
Year: 2005

Visit the new prototype
Download complete thesis in PDF
Download usability analysis report sample in PDF

Abstract
An email overload problem occurs when users try to utilize email service in a way it was not designed for. Moreover, many web-based email services provide large email storage space and users tend to keep more unused emails. Issues that cause email overload are 1) Keeping too many emails, 2) Using email for conversational threads, and 3) Using email as a task management tool.

Forty-five participants were selected to participate in user study sessions including questionnaire, time-on-task study, and interview. Participants were divided into three groups of 15. Participants in the first group were assigned as Gmail users. Participants in the second group were assigned as Yahoo! Mail users. After finishing user study sessions for the first two groups, the results were analyzed and the new web-based email prototype was designed as a suggestion of how the web-based email could be developed to handle the email overload problem. Then users in the third group tested the new prototype in the same manner the research was conducted with the first two groups of users.

Users in the third group were satisfied with the features and design of the new prototype. The design of the new prototype focused on solutions capable of handling email overload problems. Those solutions  are 1) Email categorizing, 2) Email thread grouping, 3) Email searching, and 4) Email task management. This study illustrates how the web-based email can be designed with features to handle email overload problems while maintaining the interface usable to most users.

Project Overview: The goal was to redesign the Indianapolis International Airport Web site and conduct usability evaluation on the new design. The evaluation consisted of heuristic inspection, time-on-task and think-aloud, questionnaire, and interview. This project was a part of New Media – Usability Design for the Web class
My Role: MS in Human-Computer Interaction student
School: Indiana University – Purdue University at Indianapolis
Year: 2003

Visit the new Indianapolis Airport prototype