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: 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.