Critical Web Reader is a web-based educational tool designed to guide teachers and students to critically evaluate any source of information on the Internet. It is now widely used by over 2,000 students and teachers from different levels of educational institutes, universities, middle schools and secondary schools, in several countries such as Singapore, Taiwan and the United States.

Roles and Responsibilities

In the CWR tech team, I have two roles. One is interaction designer, the other is tester.

As a designer, I have two major responsibilities. On one had, I preserve the existing features and functionalities in the initial design of the tool. On the other hand, I design new features to make the tools more useful for our users: teachers and students. I am also involved in part of graphic design work for the interface as well.

As a tester, I am responsible for conducting usability tests and providing usability expertise. Besides, I take part in quality assurance tests as well.

Process

The old design of CWR tool was created years ago and it needed to be redesigned when I jumped into the team. The redesign would be a brand new one. But I, with other designers, were aware of the most urgent mission at that phase was to improve the usability of existing features, because they were the core of the tool. We ran through several evaluation sections on the old design to spot every usability issues. The core features would be kept in the new design, with different forms of interaction. In order to know how these features would be best used, we talked to many users (teachers) and conducted card sorting activities. At the end we had categorized the core features of the tool. After several brainstorming sections, we had created the initial new design.

Then we came to the phase where we designed new features. We talked to educationists, teachers and created personas to get to know our users better. Coming along with lots of brainstorming, sketching and prototyping, we designed new features that drove the tool more personalized for users. Now users are able to create their own resources to use in the classroom. More importantly, they are encouraged to share the resources with each other, which vastly enhances the productivity of using CWR as a educational tool.

After I became the only designer in the team, I am still responsible for designing for new features as well as improving the usability of existing ones. I conducted many usability tests during this phase, from formal ones in the studio to informal ones in public areas. Because the system is too complicated to be tested in full function every time, which cost lots of resources, I decided to run multiple quick tests for different part of functionalities. I created many redesigns after these usability tests. The CWR team held a few workshops during this phase, feedback from these workshops became great insights for me. Some new features that would increase interaction between teachers and students as well as between different teachers were designed recently.

Concept and Prototype

The core of the CWR tool is some sets of questions invented by educationists. Their research indicates students’ ability of thinking critically increases after they evaluate, through answering these unique questions, the information from web (text, video, audio etc.). For immediate use by teachers and students, as well as wide use all over the world, the CWR tool is web based. One of the major improvement of the new version of CWR tool is that it enables teachers to create their own resources and share with each other. Computer Supported Collaborative Work seems the direction the next new design is going.

For this design, I have created more than 100 pages of formal wireframes which are being used. Based on this wireframe, I also created clickable HTML prototypes. These prototypes were used in all usability tests. For each page, I also created about two pages specifications (with screen shots) for development team’s use.

Through the Earth is a museum exhibit that we designed in our Experience Design course.

Please check out our video prototype first to review what we had done.

Travel Through the Earth prototype from Fanxing Kong on Vimeo.

For CHI Student Design Competition 2010, our challenge was to create a design intended to encourage people to take a walk. We conducted interviews and ethnographic studies. Based on the findings, we decided to address the problem through the theme of community. Using affinity diagram and ideation, we created an iPhone application named Zygomote to help user establish the habit of walking. A paper prototype was developed for usability test, which provided insights into what worked well and what user had problems.

Target audience

In order to dive into the problem space, we decided to set an initial target audience as a guide. Discussing about our predispositions, which were supported by secondary research we completed later, we targeted at 20-30 year olds.

Focus group and interviews

For better understanding the target audience, we began with holding a focus group, which, however, was unsuccessful because subjects could not attend at the last minute. With the material prepared for the focus group, we decided to revise the script and split up. Two of us looked for subjects and conducted interviews while the other two look into secondary research. As a result, we successfully obtained large amount of data.

Ethnography, ideation and affinity diagram

Since the problem space is walking, our team took a “team walk” as an autoethnographic study. In the next day, we also conducted a non-participatory ethnographic study on the target audience, from where we began ideation. We spent a few days in ideation (which was also a project for our Interaction Design Practice course). A number of concepts were generated. We used affinity diagram as a tool to find out what aspects within these concepts would be most effective. After refining and compromising, we ideated again and finally reached the design of Zygomote.

Concept

The name “Zygomote” is a composite of two Latin bases, “zygo” meaning “to join” and “mote” meaning “motion.” Essentially, Zygomote encourages people to join in motion and walk together, according to three primary motivations: social bonding, social accountability, and small accomplishments. A 2D visualization illustrates the time the user spends walking with friends; the user’s walking activity translates to measurable contributions to charities and causes; and the user frequently earns virtual awards for small feats. We believe a combination of these three features will encourage individuals to walk one more time, as one of the users from usability tests commented that Zygomote will “surely encourage me to walk more with friends.”

Prototyping and usability tests

During the last month, we conducted usability tests for the initial design of Zygomote. For this purpose, we created a paper prototype. According to the problems that we found, we redesigned and developed a new prototype for another series of usability tests using scenario-based testing. Participants were briefed about the application and provided the scenario. During the test, they were asked to use “think-aloud” protocol and freely explore the application, performing specific tasks when prompted. Testing sessions were videotaped for later analysis. After the test, participants completed a questionnaire to rate the design and provide comments. Most participants considered it useful and acknowledged it would motivate them to walk more, as one of the participants said, “it will surely encourage me to walk more with friends.”

Photoshop Mock-up prototype

In our Interaction Design Practice course, our team was placed under simulated conditions that Crate & Barrel and Google were forming a partnership. We were challenged to create a design that could lead a new line of digital home products for this partnership. The task was quite wide open, although we were asked to look at Weasley’s Clock (from Harry Potter) and also next generation GPS. We used personas, affinity diagram and ethnographic studies to reach the core problem. We ideated and sketched. When we decided on our final concept Mirror Map, we also created a prototype and conducted usability tests.

Process

Since the problem space was quite open, the main task for us was to find/define the core. We began with researching on Crate & Barrel and next generation GPS. Based on demographic, we created personas to narrow down the problem space. After using affinity diagram to further distill the problem, we decided to conduct ethnographic studies in Crate & Barrel store on the following Saturday, which would help us understand better the potential users. On Friday night, a curve ball was given to the class. One random team member chosen by professor was switching to another team. After quickly explaining to our new team member the stage we were at, we completed observing the actual customers and interviewing several sales persons in Crate & Barrel store, where we confirmed our target audience at 25 – 40 years old affluent mothers. We refined our personas to fit in the target audience. Several brainstorming sessions followed up, in which we ideated, sketched and reached the concept of Mirror Map. Using foam core, tinfoil and cardboard etc., we developed a life size prototype for usability tests. Based on the tests’ results and critiques from our fellow designers, we iterated our design and decided on our final concept.

Final Concept

Mirror Map was a large decorative wall mirror that could also turn into a map. Using GPS technology, the map would keep track of the location of family members. Detail information about family members and locations was also available due to the huge database from Google. Through three cameras on the frame, Mirror Map using face detection could recognize particular users (for privacy issues). Users would interact with Mirror Map from a distance using large hand gestures, with a cursor on the screen telling the user where he/she was pointing. Large hand gestures, which were exclusively tested, such as wave, zoom, pan and grab were intuitive for most users.

Video Prototype

To demonstrate how our design worked, we created a short video prototype.

This project was a part of our Interaction Design Methods course. We were given the topic of Interaction After Dark as a design situation, in which we thought about “how might the behavior of our technology change as night falls”. Our team decided to address this problem for the group of musicians, especially who were in college, because none of our team members playing music would make the learning in practical environment more intense and valuable. Throughout the semester, we had been using various user research methods such as focus group, ethnographic observation, and contextual inquiry etc., design methods such as affinity diagram, story boarding, ideation and sketch etc. At the later stage we also developed a prototype, conducted usability tests and analyzed the results.

Foam prototype used in usability testing

In our Interaction Design Practice course, we were given a challenge to design a quiz system within two weeks, for the smart phone Palm Pre. With using this system, user would be able to answer questions as well as getting feedback.

Process

To approach the solution to this challenge, we started with researching on Palm Pre phone. While we were getting familiar with Palm Pre’s features, we were also becoming better aware of the design constraint on this platform. It is different from other platform such as a desktop, or even from other touchscreen smart phones such as iPhone because of its screen size and different default interactions. Taking this into consideration, we created personas to help us profile the user. After several times of ideation, sketching and researching on existing solutions, we decided to design an application for a typical Palm Pre user. This user would not take serious tests on a handy smart phone. Therefore, the application should be able to enhance the enjoyability of taking quiz, it should be simple, but fun. After we developed a design concept, we created low-fi prototypes using paper and cardboards. The prototype was used in usability tests. From those tests, we found some usability problems and created redesigns to tackle them.

Concept

In order to enhance the enjoyability of taking tests, our design concept utilizes a soccer metaphor. “Soccer balls” are answers, “kicking” is submitting answers and “goal” is the correctness. By flicking “soccer balls” up to the top of screen, the chosen answers were set to pre-submit status. User is able to “kick” those “soccer balls” toward the “goal” at anytime, by simply dragging a little kicker who represents the user to the chosen “soccer balls”. If the answers are correct, a cheering “Goal” animation and sound effect will be played to provide enjoyment to the user. If incorrect, user is able to resubmit or view the explanation at any time. This awarding system would reduce most frustration feeling a wrong answer could produce. The animations and gestures, on one hand, are used to offer user the authentic soccer experience, which increases the enjoyability of the application. On the other hand, they enhance the usability of the app on this particular platform because we adopted the pre-set Palm Pre animation effect and gesture. For example, “kicking” uses the same gesture and effect as “unlock” the Palm Pre phone, we were suggesting the same “activation” metaphor here. Therefore, the learning curve for an old Palm Pre user is low. They would immediately know how to use the app when they see it.