RED is an innovative and inspirational online reading community for CCA students to discover books, track reading processes, and share book reviews.

  • Developed a virtuous circle as the user flow by conducting primary and secondary research.
  • Embedded marketing thoughts to make it rememberable and understandable.
  • Iterated the design based on two rounds of testing and evaluation with goal-oriented metrics.
imac screensimac screens

METHODS
Research, Ideation, Prototyping, Testing and Evaluation

TOOLS
Google Forms, Jumsoft Toolbox, MindNode, Sketch, Principle

TIMEFRAME
6 weeks (July 2018)

DELIVERABLES
UX Research, Interactive Prototype

DESIGN CHALLENGE

How to encourage CCA students to read more books with active attention and devotion?

PROBLEM 1

Limited Supports for Discovering Books

CCA has 2 libraries. One is in San Francisco, the other is in Oakland. Students can check out books from both libraries on the library website. However, the website only provides the search feature for the books or reading materials but lacks reviews or recommendation features.

In this case, it fails in encouraging students to discover more books that may be interesting to them.

PROBLEM 2

Insufficient Reading Amounts of CCA Students

Students at CCA need to read a lot of books as a complement to their study. However, the result of a survey conducted by me shows that their reading amount can't meet the school's expectation. There are 42 participants of both undergraduate and graduate in different majors including Interaction Design, Industrial Design, Graphic Design, Film, Architecture, and Animation.

More than half of the participants only read less than 5 books last year. And about one-fourth of the participants claimed that among the books they have read, none is related to their majors. Furthermore, nearly half of the participants only read less than half of the books they checked out from the CCA library.

Only 8% of students finished all the reading assignments.

PROBLEM 3

Lack of Communications Among Students of
Different Programs in the Same Major

Different programs may be in the same major at CCA, like IxD BA program, IxD MDes program and IxD MFA program are all in the major of interaction design. Students in these programs lack connection and communication. Thus, they don't know each other's reading information, but their reading lists may be similar due to the same major.

MY SOLUTION

I designed an online reading community which encourages CCA students to discover books, track reading processes, and share book reviews.

Keywords: discover, track, share

FEATURE 1: DISCOVER

TOP BOOK LISTS 

The 3 book lists allow students to discover books and learn reading trends. 

RATIONALE

From the interview and literature review, I found that students care about the performance of their peers a lot. So, reading trends help them learn what is popular among peers.

Besides, the newly arrived books are only shown at the libraries. "NEW at CCA Libraries" allows students to get information anywhere other than in the libraries.

FEATURE 2: TRACK

BOOK MANAGEMENT

Users can mark the books as "to read", "currently reading", and "RED" (have read).

RATIONALE

Through the survey and interview, I learned that students quantify themselves more or less but seldom quantify their reading performance. Therefore, I designed the tracking feature for them quantifying the reading.

FEATURE 3: SHARE

REVIEWS, NOTES, LISTS

In the book page, besides the basic information, there are also book ratings, reviews, notes, and lists. 

RATIONALE

I created a circle based on user research which benefits students reading. The three key sections are reviews, notes, and book list. "REVIEWS" helps students learn about different perspectives. "NOTES" help students keep quotes, add annotations and keep instant thoughts. "LISTS" is book collections created by students themselves.

1. PRIMARY RESEARCH

INTERVIEW

To understand students' reading attitudes and habits, I interviewed some students.

WHO?
6 students from different majors and grade levels

HOW?
Face-to-face interview
Telephone interview

My interview questions were based on this empathy map.

This chart was based on Paul Boag' s Adapted Empathy Map.

EMPATHY MAP

I summarized the interview reflections and organized them as an empathy map.

2. SECONDARY RESEARCH

TERRITORY MAP

Based on the research reports, I brainstormed all the things that may encourage individuals to read by developing a mind map.

Because the mind map was a little messy to review, I organized them into seven groups by category.

(click the picture to zoom in)

DEFINE OPPORTUNITIES

Based on the learning and social needs of CCA students through interviewing, I decided to focus on the four parts: Being Attracted/Arouse Interests, Learning Knowledge, Social, Self-accomplishment.

VIRTUOUS CIRCLE

I tried to find the connections between the four parts. A student starts to learn something when he is attracted to a book cover, title, review or quote. During and after reading, he would like to discuss the contents or point of views with someone else. After finish reading a book, he is eager to share his reviews to others. Another student may be attracted by his review and start to learn what he just learned. Thus, the three parts form a circulation. After learning, a student gets a sense of accomplishment. When his review attracts other students, he gets a sense of honor.

3. IDEATION

GIVE IT A NAME

The word “red” has the same pronunciation as the past tense of “read”. We can say “Get books RED!” “I RED these books” “Have you RED My Brilliant Friend?” This inspiration was generated from Michael Bierut's TED Talk. So, I plan to use “RED” as the name of this project.

FIND THE KEYWORDS

By analyzing the interview results, I divided the reading process into three stages: before reading, during reading and after reading. Combining the three stages with the three parts in the circulation mentioned before, I extracted three critical components in each phase: lists, notes, and reviews.

Before reading, a student may create a book list as the reading plan. Or they may be attracted by other students' lists and save as a reading plan.

During reading, a student may take notes, including writing down quotes, adding annotations and recording instant thoughts.

After reading, a student may write a review for the book and share with others.

TRACK THE READING PROCESS

The students I interviewed and the people I had talked to usually have a vague impression of their reading. They can't exactly remember what books they have read. Not to mention the contents of their thoughts about the books. As time passed by, the impression of the books they have read is faded. As time goes by, the earlier the book we read, the less impression left on our minds. Besides, the books they want to read sometimes are forgotten. How to keep the reading? My solution is to visualize them:

  • Save the book covers you want to read
  • Browse the reviews you created
  • Go over the notes you took

QUANTIFY THE READING

The vague quantifiers are not convincing but the real numbers are. For instance, "I've read many books last year." is weaker than "I've read 18 books last year".

SOCIALIZATION

Through background research, I learned that CCA students' on-campus social networks are more narrow than they expected. By connecting students in the same major or the same grade, they can expand their social circles which facilitate student's critical thinking development, bringing diverse perspectives and inspire new ways of creating.

4. PROTOTYPING

SITEMAP

Based on the three keywords, I developed a navigation structure as the sitemap. 

SKETCHING

Before jumping into high-fidelity wireframes on software too quickly, I scratched the preferred design on paper and modified it directly.

WIREFRAMES

5. TESTING & EVALUATION

PARTICIPANTS

2 graduate students from interaction design at CCA
1 junior student from graphic design at CCA
1 graduate student from computer science outside CCA

WHAT I EVALUATED

  • NAVIGATION
    • Is the information hierarchy organized clearly and logical?
    • Is it easy to find the information the user needed?
  • Can users recognize and recover from errors?
    • Do the results fit their expectations? (Surprised or disappointed?)
  • INTERFACE
    • Are the icons clear (easy to recognize) for new users?
    • Is the function of the control easily determined at a glance?
    • Do the layouts confuse them?
  • READABILITY
    • Is the language using clear and consistent throughout the system?

TASKS FOR TESTING

  1. Which booklist was created by your friend John Smith?
  2. How about your friend Jon Snow's reading activity?
  3. Find the 4th popular book in your major AND mark it as currently reading.
  4. Try to modify your reading progress of Gamestorming to RED, THEN cancel it.
  5. Write a book review for Gamestorming.
  6. In your timeline, find the book list All about Game Design. Then, check the details.
  7. What are the meanings of the two icons below the description of the book list All About Game Design?

FINDINGS

SUCCESS

  • The website is simple, straightforward and easy to use. (NAVIGATION)
  • The information is clear and easy to read. (READABILITY)
  • The interface is simple and elegant. (INTERFACE)

 

"A good supplement to our libraries' website; may be able to encourage CCA students to read and have more conversations."

–a participant from Industrial Design

NEED TO BE IMPROVED

  • New users may be confused with the word “red”. (Readability)
  • Can't differentiate between the “Comments” and the “Reviews”. (Readability)
  • Expect to find the books or lists by categories. (Navigation, Readability)
  • The timeline (“HOME”) didn't follow the convention of the traditional news feed which is mixed with many types of news. (Navigation)
  • The main body and the right-side column are supposed to be separated obviously. (Readability, Navigation)
  • The default reading status (“Want to Read”) is somewhat confusing. The status should be vacant as a new book. (Readability)
  • Failed to tell the difference between ❤️ and 👍. (Interface)

 

"It may be better if the difference in the visual hierarchy is clearer between the main body and the right-side menu on many pages."

–a participant from Interaction Design 

6. ITERATION

  1. Add a slogan for the logo/add a description of the word “RED”
  2. The comment is an explanation for the rating of a book. The review is some deep thoughts after completing a book. I have two ideas to refine it:
    1. Change the name “Comments” to “Ratings”
    2. Comments (ratings) + Reviews → Reviews
  3. Add “all” to the timeline and set it as the default timeline.
  4. Refine the navigation and the content layout.
    1. Challenge 1: There is a primary menu and three sets of the secondary menu
    2. Challenge 2: Some pages are two-column layout and some are three-column layout.

I created 6 types of navigation design as the pictures showed. Considering the navigation of CCA official website and its affiliated sites like CCA Libraries and CCA Portal, I picked out option 1,2,5 and 6. Then, I conducted a small A/B test. It turned out that the secondary menu which is closer to the primary menu is easier to focus on. So, I excluded option 1 and 2. In the rests, the secondary menu is more outstanding than the primary menu in option 5 and vice versa in option 6. Due to the four keywords, I thought the secondary menu is more important. Thus, I chose option 5 in the end.

    5. Put different types of contents in different containers. Divide the contents visually.
    6. The default reading status is still “Want to Read” but inactivated. Give feedback when clicking the reading status button.
    7. Actually, ❤️ is not “like” but “collect”. Change the icon
from ❤️ to ⭐️. 

7. THE ITERATED PROTOTYPE

(Try to click the screen)

8. SECOND ROUND TESTING & EVALUATION

PARTICIPANTS

4 graduate students from interaction design at CCA
1 graduate student from graphic design at CCA
1 graduate student from computer science outside CCA

2 of them have participated in the first testing.

WHAT I EVALUATED

  • ARCHITECTURE & NAVIGATION
    • Is the system simple to use?
    • Is the current state of the system easily understood by the user?
    • Can the user recognize where they are in the system?
    • Can the user quickly return to the main pages?
  • LAYOUT & DESIGN
    • Are the icons clear (easy to recognize) for new users?
    • Is the function of the control easily determined at a glance?
  • CONTENT & READABILITY
    • Are the information hierarchy and content structure organized clearly?
    • Is important information outstanding?
    • Are there elements on the page that disturb or distract reading?
  • BEHAVIOR & INTERACTION
    • Does it provide an easy reversal of actions?
    • Is there feedback when a task is completed?

TASKS FOR TESTING

  1. Look for your friend Mark Green's reading activities on July 11.
  2. How many books do you and Toby Du RED in common?
  3. How many people are reading the 8th popular book at CCA?
  4. Mark Gamestorming as RED.
  5. Browse the ratings and notes of Gamestorming. Like Mark's rating.
  6. Change the reading status to Currently Reading from RED, then CANCEL IT.
  7. Write a review for Gamestorming. Then go back to the book (Gamestorming) page.
  8. Browse the book list All About Game Design.

FINDINGS

SUCCESS

  1. The organization of the system is easy to understand. (ARCHITECTURE & NAVIGATION)
  2. Users know how to go back to any state of the system. (ARCHITECTURE & NAVIGATION)
  3. The main body block captures the most attention. (LAYOUT & DESIGN)
  4. The rankings are attractive and straightforward to the users who would like to discover books. (CONTENT & READABILITY)


NEED TO BE IMPROVED

  1. Lack of detailed information on the book or book lists in the rankings. (CONTENT & READABILITY)
  2. No cancelation on the page of “write a review”. (BEHAVIOR & INTERACTION)

Thank you for your time! 🙂