Pearson Writer(2)-Notebook and Outline Design

Introduction

The Pearson Writer is a revolutionary Pearson digital tool. It used for writers, students, and professionals at all levels. Available in the web and the mobile app. It streamlines the tedious and time-consuming aspects of academic writings, so users can focus on the writing projects and resources at hand.

The Notebook and Outline in Project is a writing tool that helps students to collect ideas, organize writing outlines and writing projects. It is a tool that makes it easy to improve study habits, avoid procrastination, and juggle all students’ responsibilities.

My role

User Experience Designer | User Interface Designer | Wireframer | Information Architecture | Visual Design | User Flows | Mockup | Competitive Analyses | Prototype

I am the main web user experience designer and user interface(visual) designer that fully designed the whole user experience,  user interfaces, user flows and layout. Planned and conducted the efficient design process, which accelerated the design collaboration and implementation speed. Moreover, created the aesthetic user-centered web app and followed with the constantly changed brand UI guidance of Pearson. I collaboratively gathered valuable user requirements from my product manager and learning designer design refreshed ideas. Constantly cooperated with UX mobile designer, UX researchers, and UX writer produced the user-friendly and user-centered interfaces and web application design.

 

The challenge

1.Design-Based Research Report

We did several design-based research(DBR) before I started a new design. It collected users feedbacks and impression about the old design of Pearson Writer. From the survey and research, we tested 23 total. We intended to get a “user’s” perspective rather than non-users.

Some Negative Findings:

21% (5 out of 23): General feeling that the app is not for me / UX issues. Users wanted us to Make My Projects and Notebook/Note clipper easier to USE. Make My Projects and Notebook/Note clipper easier to FIND/ACCESS. 43% (10 out of 23): Features that already exist, but may not be clear / UX improvements.

Some of the students had either never used or only used the features once (with one outlier), and many commented that they were not aware of their existence. Many students were seeing these features for the first time in the survey. Students who had tried these features found the experience difficult and needing improvement. Multiple students made suggestions for functionality that already exists, indicating that even when they try these features, students are not aware of their capabilities.

Some Positive Impressions:

87% describe Writer as helpful.

74% say Writer is “Useful” or “Very Useful” to their everyday learning needs.

65% say they are likely to use Writer even if not assigned by an instructor.

61% feel Writer’s purpose is to help students plan and manage the writing process for multiple papers / avoid procrastination.

Students feel Writer is supportive of multiple learning goals.

User Flow

After understood the users’ needs, I started creating a site map that illustrated resolutions about users’ flow. It gave me a way to iterate faster through ideas and increased the speed of iterations. Also improved communication across the product team. The flow described what users would do at each step. It was a good way to get started in building different screens connections. It also helped developers understood the next steps and logic.

 

Problem Analyze and Solutions

1.Goal

the Notebook and Outline are mainly used for students to write notes and outline for writing projects. Users can use NoteClipper to clip any online resources. Also, they can through view note details and inputted thoughts to organize their ideas and quickly track progress. The goal was to redesign and reformate the old product to a user-centered and user-friendly notebook and outline. Through creating notes and outlines, users would quickly and effectively complete writing projects on time. To the new design, I also required to make the product accessible which accommodated to all-level and disabled learner.

2.Challenge

The accessible drag and drop methods were complicated. It required much cooperation with developers and user researchers. It also associated with code accessible regardless of design accessible. Besides, the color in the old notebook was no meaning, which means users add color to note, but this color serves no purpose.  In order to accessible use color, the different color usage needed to carefully consider. In addition, how to efficiently show the information and took aesthetically visual design tackle the old visual design problems were also challenges. The Pearson design guidance was constantly changing. It was hard to track the right guidance of UI elements.

3.Solutions

I collaboratively worked with accessibility experts, learning designers and user experience researchers in my product team, and did quite a few accessibility testings, usability testings and user researches. Also, in order to find the best solution, I did bunches of online researches compared with a lot of different products. Finally, after a lot of discussion with engineers and designers, I found an intuitive design way to design the outline and notebook.

I presented those designs weekly to my product team, received feedback, thoughts, and tackle problems, and delicately updated them followed by our constantly changed company visual guidance.

4.Some working process

After tons of design iterations from the product team, I cooperated with user researchers and took three-round usability testings test out the design thoughts, and then updated the designs again. Each round of usability testing, we tacked different questions about design, user behaviors, and users pinpoints, and we found many satisfied and valuable feedbacks.  After every interview,  UX researcher would present the findings of the report of usability testings. I would discuss with UX researcher identify the priority revise points to design, and then I would revise the design in a certain order. When design edited well and tested again, I would present the design flow in InVision to the accessibility team, who could give me many suggestions about accessible methods that I could think about. After a few backs and forth discussions and presentations, the final accessible and users-centered design would be completed and go to prototype and implement.

 

 

1.Ideation and Early Stage Design

I created more than 200 screens and more than 6 versions of wireframes and visual design which interpreted different design thinkings and tacked different design problems.

In the early stage version of Notebook design, I designed the screen followed with the functions of the old product, dealt with the visual refresh and added a new feature about bulk edit. But I didn’t tackle much about user-centered functionality and accessibility.

In the early stage of Outline design, it was focused on creating the outline points. This was a new feature and did not exist in the old design. I researched a lot of outline products and collaborated with my learning designers who did design-based research found students expectation and pinpoints. Also, I focused my attention on building intuitive behavior moving the note to outline in the early stage design with accessible way, because moving notes to outline was one of the main features.

 

2.Collect UI

After ideation and wireframing, I started the visual design. First of all, I would follow with the design guidance that Pearson provided, including branding color, style, grid system, header, typography, and logo, etc. Then, I will create some graphic, interaction, and UI customized UI elements to make the user experience efficient and usable, at the same time, making sure the fun and learnable experience. The UI design experienced several iterations and revisions and weekly meetings and discussions with a Product Manager, UX designer, UX writers, and UX researcher.

Some UI Elements Selected from Pearson UI Gravity

Design overview

 

3.Visual Design and Prototype

I revised visual in several times and presented many visual versions to my team and large UX group. My team members were consist of product owners, UX designers, UX writers, UX researchers, and Learning designers.

I used InVision to show user flows and interactive behavior. It was a good tool for me to test my ideas quickly and improved on them in an equally timely fashion. This was also good for building and testing valued over thinking and meetings. We also used this prototype to test and validate ideas, design assumptions and other aspects of its conceptualization quickly and cheaply in usability testings. It well interpreted the possible users’ flows and functions. Besides, it allowed me present and showed my ideas to my team and large UX and development group, and got feedbacks and then edited from there.

Below are the final visual designs and prototype flows:

3.1 Notebook
Create New Note  
User lands on the first screen of notebook, they can start by creating a note, where they can input a note name, select sources, take notes, attach file and choose label.  When users fill out, clicking save would jump to the notebook card view. In the three dots menu, they can edit note, delete note, add note to Outline and rearrange the note with accessible menu. 

Notebook-Group and Export 
In notebook, users can group individual notes into a group. They are able to select invidual note and make bulk edits. Once checkbox of individual note selected, the icons next to "xx note selected" are activated. User are expected to group the notes, delete, and export them to outline as points. Then they will find the outline points are added to Outline tab. 


Users also allowed to drag notes using griper icon to group individual notes.
Individual Note View, Edit and Upload Files
Inviduals note is consist of clipped notes and inputed notes. Pearson Writer provides users capability to clip any online resources to notebook and add it to a exist note. 

For any online contents, it is not editabled because of copywrite, thus when users edit a note, the edit behavior is mainly focused on editing inputed contents, revise attached files, note name, and label name and color. We allow users to upload images, audio and video files to a note. For accessbility consider, image files are allowed to add alt text and screenreader would be able to hear it.  

Search at Notebook

In Notebook, users can efficiently seach a keyword based on note title and note contents. Once the search results find a matched note, it would appear in the screen where users can find numbers of notes, and would see the bold text indication of the keywords.  Clicking into the result, they can read the details of the note.


Different View Mode and Label Management

I designed and added different views modes into Notebook, and changed old meaningless color to a color label, where users can name the color with label and assign it to a note. In the notebook view, users can use the label filter to filter the lables and manage them. The different view mode was designed for users to serve for their different habits and purposes. 

The grid view shows like cards, where users can see many notes details, including note title, clipped note, lables, inputed note and created date. 

The list view shows in a narrow rectangle shape, where users can find note title, lables and create date. It is good for title, label and date reviewer. 
The condensed view shows in a condensed size, where users only would see note title and lables. It is good for title and label reviewr, and allows them view notes in large amounts. 


Group Note View and Delete

In Notebook, users would visually see different indication between invidual note and group note. A group note is consiste of many individual notes. 

Visually, a group note shows in a culmulated cards design. Clicking at the title of group note, it goes into group view. 
In group note view, Users can make bulk edit and individual edit. Bulk edit, they choose one or many note by selecting the checkbox on each note. They can ungroup, delete, and export them to Outline. Besides, user can edit group title, add a new note in group, and ungroup all notes at once. 
NoteClipper-Content Clip 

Pearson Writer has a good feature named NoteClipper. The function is for users clip any online sources. They can clip paragraph from News paper, resources website, and they are also allowed to clip image and video from any image websites and video sites. 

When users install our NoteClipper in to the bookmarks bar at the browser, like Chrome, Safari and Firefox. They highlight a paragraph and click NoteClipper of bookmarks, the NoteClipper opens. Clipped paragraph shows in the left side. On the right side, users can choose project, type title and choose a source. Then clicking at Add note, the pararaph will add to Notebook at Pearson Writer.

I remodeled the whole NoteClipper flow and redesigned the UX and UI. Promoted add a few features in NoteClipper that allow users add new note or choose exist note. Typed their note thoughts in here. Also provided some accessible NoteClip ways for visual impaired people to use.
3.2 Outline
Outline Point Add
When users land on Outline landing page, they can start from creating a outline point by click at "add point" button. Each of the "add point" button add a first-level point in outline. 

I tacked the problem, which was no outline point functionality, to add outline point. In old product, the outline didn't allow users add a point  except for dragging a note to outline a point. Now, users are flexible to add a point, sub-point and have three levels outline.
Add Subpoint to Outline 

In the new design, users have capability to add subpoint by accessing to "three dots" menu. The subpoint will be added into it.

Each new sub-point input box would appear in the top for convenience.


Add sub-sub point in Outline 

The DBR(Design-based) research found users are most likely to add three-levels points. Thus, the similar logic as adding a subpoint is to use "three-dots" menu and hit add subpoint. Then the third level point is added to Outline.
Add Notes to Outline Points

The functionality of add notes to outline is a expected feature. I kept this feature in the new designa and redesign it to a accessible and user friendly feature.  In the new design, users are able to add multiple individual note into the outline by selecting checkboxes and hit "Add" button. Moreover, users can take drag icon dragging selected note to outline while hovering the note on the right panel. 


Outline Points Reorder

Users are now free to reorder the outline point. Before, they didn't have the feature to reorder the points. 

If users want to move the A point of II point up a level, one way is to drag to it, the other way is to select the drag icon and hit the up arrow to move it up. The indent more and indent less were easily to be understood in our usability test, where participants successfully use the icons to indent the point. 

Outline Different View

I added this new feature that allowed used to view in a different mode. In the "View with note details", users are able to see the details of added notes in the Outline view. Before, it didn't allow users view details even they added notes to outline. The reason of adding this feature was to provide users capability to check details of notes and export outline with note details, and also it allowed for users edit note details when they see it. 

In the usability test, participants found the options under "select view" useful.

Usability Testing and Findings

After a lot of design iterations, revisions, and team discussion, I worked with UX researchers interviewed several amounts of users who participated in our 1-hour live sessions. In the sessions, our UXR asked their thoughts and understandings about the new design. We sit together monitored users’ operations and interactions of the new design at the InVision prototype.

1. Study goals

Are students able to complete tasks using the Notebook, NoteClipper, and Outline on the desktop?

  • Are designs/interactions as expected, are they intuitive?
  • Identify pain points.
2. Methodology
  • Seven semi-structured interviews were conducted with university students over two days, January 16-17, 2019. 
  • One-on-one remote interviews were 60 minutes in length, following an ordered script.
  • Interviews were conducted and recorded using GoToMeeting (see Appendix A).
  • Report date: February 5, 2019
3. Participants
  • University students with daily mobile usage who use writing tools.
  • Represented the following disciplines: computer science, theater performance, nursing, psychology, accounting, history, and anthropology.
  • Represented the following levels: one sophomore, four juniors, and two seniors.
  • Represented a variety of universities: CUNY Brooklyn College, University of Southern Mississippi, Pensacola Christian College, University of Maryland College Park, University of Utah, UNC Charlotte, and the University of Washington.
4. High-level findings and Solution

4.1 New Note Creation Page

Finding

    • Most participants were not initially sure what the “Source” field was asking for, but understood once they opened the drop-down; they found this feature useful.
    • Some participants emphasized that the most important section is the “Your note text” section; this holds implications for its placement on the page.
    • Some participants stated that their process for note-taking for their assignments is often a quick one and that their primary goal is to write their notes down as quickly as possible; fields such as “source” and “title” are secondary.

UX Solution

    •  Moved the note text box higher up on the screen (e.g., after title field) and specified which file types are acceptable for the attached documents.
    • Due to use cases in which users may not remember the title of their notes or title them at all, considered allowing search functionality that searches through note text.

4.2 Single Note View

Findings

    • Participants could not identify the different components of the individual note; however, most understood that the top half was the information from the clipped note.

UX Solution

    • Moved the second source to a location that makes it apparent that this source is for the saved note  as a whole
    • Included additional visual indicators to the “From Noteclipper” section to help users immediately identify the different sections of this page.
    • Changed the label “Your note text” to “Note text.”

4.3 Notebook

Findings

    • The grouping icon was not recognizable to a few participants; one said it looked like a copy icon.

UX Solution

    • Changed the group icon to a folder/file icon. It helped participants recognize and utilize the note group feature.

4.4 Outline

Findings

    • Participants expected to use either the 3 dots menu or the indent icons to add a sub-point.
    • For the most part, participants understood the intended use of the icons.
    • Participants understood that they could use the checkboxes and then click “Add” to add a note to the outline; several also expected to drag the notes to the outline.
    • Of those asked, all thought an additional visual indicator would be helpful to distinguish points with notes from those without notes.

UX Solution:

    • Added more prominent visual queues to the notes contained in the outline to distinguish them from non-note points. 
    • Added a visual indicator to the outline (once a user is dragging a note) to show that notes are to be dragged to the outline.
    • Changed the label “Notebook” to “Notes” to remove any indication of additional interactivity (i.e., adding outline points to it) and to keep the Notebook separate as its own tab.
    • Moved outline grip indicators to the left side of the text boxes to keep consistent with the Notebook. 

Responsive Design

All of the UX and UI designs are responsive designs with different elements that respond differently when viewed on devices of different sizes. In the web, I used 12 columns for the large screen, 8 columns for tablet size, and 4 columns for phone size. The column width is 72px in a large desktop which the content width is 1128px,  48px for the large tablet which the content width is 840px, and 72px for the medium phone which content size is 336px.

What I learned

  • After first-round usability testing, the testing results suggested I exchanged the panel position of outline and notes so that the Outline would be read first. The suggestion was good, I accepted and changed the layout. I knew users reading habits are from left to right, “F” shape on the screen. It was a combination of user habits and UX designs. By exchange the location,  users would focus attention more on the Outline itself and creating outline points. It turned out it tested well in usability testing and users had a clear idea about how the design work.
  • Design accessibility is a dedicated work that requires some effort, coding practice and accessibility guidance. Color contrast is an often overlooked web accessibility problem. People who have low vision could find it difficult to read text from a background color if it has low contrast. Some tools will help check this quickly, like the WebAIM color contrast checker. Besides, use labels or instructions with form fields and inputs. People who use screen readers usually navigate through a form using the Tab key to jump through the form controls. The <label> elements are read for each form of control. Moreover, always provide useful alternative text function for images. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.
  • Making the user experience frictionless and intuitive requires to gather quick feedback during the wireframing or low-fidelity design phase and identify user pain points and priorities early on. It is always cheap and efficient that undergoes continuous iterations on designs before development.
  • At work, we have our legacy design patterns. However, new designs are always tied to consistency. In theory, consistency is necessary because we don’t want to detract from what users are doing. Though at the same time, we want to move fast and reduce task clicks, building the aesthetical and usable new product. Conflicts always occur. Consistency or efficiency? Our engineers prefer consistency because they already built a style library. As designers, we have empathy for our users because of the extra number of clicks they have to go through.  One of the solutions is to communicate with engineers and product managers, help them understand the special needs and user-centered design principal and thoughts behind it. This way can get the new design pattern into the next sprint. It would well group consistency and efficiency together.
  • Solve the right problem and collaboration exists in every design step, we should take it from the pyramid.