Hard to implement? No. Even I can do it with my javascript skills. But the fact that Gmail designers and developers take the time to notice this behavior (and the potential of making mistakes) and implement this simple solution inspires me.

So I just started thoughful design tumbr blog – http://thoughtfuldesign.tumblr.com/ and hopefully I will have more designs to share constantly. What’s irony about this blog is that I’m using a preset theme and I have no time to customize it yet. So some of the design elements on that blog are not that thoughtful. Well, I’ll come back to it when I have time.

Read Craig’s and my Mozilla Labs guest blog post – Collaboration across the Miles

Mozilla awarded Bubblestacks the Best in Class: Innovation award!

Bubble Stacks was the submission of Craig Birchler and Chatree Campiranon to the Home Tab Design Challenge.

“The Mozilla Labs Design Challenge is a series of events to encourage innovation, and experimentation in user interface design for the Web. [Their] aim is to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole.”

Bubble Stacks are an imaginative look into behavioral analysis. Using data browsing habits alone this concept improves the experience of memory access and recall by organizing concepts into logical packages.

A window into your past experiences has the potential to open a world of thought and possibilities. Today, browser history provides no more imagination than a breadcrumb trail sequencing your online experiences. Usefulness extends little further than your memory can reach. Bubbles and stacks open a window to your mind, providing the ability to extend your memory and organize your experiences.

Learn more at www.bubblestacks.com

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.

I joined Aplia in the summer of 2008. It was a long but enjoyable drive from Indianapolis to the Bay area. My title here is User Interface Designer. But if you work in this field, you know the terminologies are always interchangeable.

This is no exception, I had worked as an Interaction Designer and Usability Specialist, my responsibility in Aplia includes everything from interaction design, visual design, user research, and usability study. This reminds me of Adaptive Path’s presentation on “User Experience Team of One“.

Working here is great. People here, even in upper management, have their mindset focused on the user. It’s like we have user experience embbed in the company. We have mottos like “what’s problem are we trying to solve” or “Add a feature, go to jail”. So we never have death-by-feature-creep issue. The envoronment is nice, hard-working, yet casual. I can put things from user research, design ideas, etc on the wall and people do come in and actually discuss about them. White boards are everywhere. It’s a productive environment.

The best part of working here is that we have designers, engineers, QA, product managers, supports, and content writers in the same office. At least for me as a designer, I can get all the resources I need to get the job done.

I will briefly cover some of the major projects that I worked on in my future posts. As you know, all of my works belong to the company, not me. So I could not go over the projects in details. The goal of my posts is to show what Aplia is and why we produce good products and how do I, as a user experience person, contribute to the development process.

User stories, design sketches, ideas on the wall and whiteboard

UI review can be presented openly to people in the company.

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.

Tips: In a pop-up, click on the left or right part of the image or use the keyboard arrow keys to move between images.