Notebook and Outline Design

Introduction

Pearson Writer gives students digital tools to support them at every step in the writing process, from gathering information and citing sources, to following grammar rules, to staying organized and on task. It guides them through writing development and provides instant feedback to refine their drafts—minus all the time-consuming toggling and searching needed with other writing apps.

The Notebook and Outline in Project is a writing tool that helps students take notes, write an outline. It is a tool that makes users easy to improve writing, avoid procrastination, and juggle all students’ responsibilities.

My role

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

I am the lead web user experience designer and user interface(visual) designer that fully designed the whole user experience,  user interfaces, user flows and layout. I conducted an efficient design process, which accelerated the design collaboration and implementation speed.

Moreover, I solved user problems with accessible and usable ways, as well as designed the aesthetic user-centered web application, followed by the UI guidance of Pearson. Also, I well collaborated with UX mobile designers, UX researchers, and UX writers created user-friendly and user-centered interfaces that fit the most user’s expectation and needs.

 

The User Experience Problem

 

1. What’re the problems?

The old Notebook and Outline were not easy to use. 

The learning design team did design-based research(DBR) before I started a new design. They collected feedback from 23 participants in total. It collected user current impressions about the old design of Pearson Writer. 

General 21% (5 out of 23) feeling that the app was not for them / had UX issues. They wanted to make Notebook/Note clipper easier to use. They hope the Note clipper would be easier to find and access. 43% (10 out of 23) of them believed the existing features were not clear and needed UX improvements.

The Outline feature was hard to find, and the user experience was difficult

Some of the students never used and knew the outline features because it was so hidden. Many students first-time knew the outline feature in the survey.

Students who had tried this feature found the experience was difficult and needing improvement.

The drag and drop feature was not accessible

The old drag and drop feature wasn’t accessible. To build an accessible drag and drop features, it required well cooperation with developers, accessibility experts, and user researchers.

The color usage of old notebook lack of meaning and didn’t meet the WCAG AAA standard

In the old design, people can assign a color to note and filter notes by color. However, relying on the color filter is not accessible for vision-impaired people.  In order to use color accessibility, it required carefully think about it.

Information architecture was messy. The layout was not intuitive to understand

The information architecture in Notebook and Outline was not clearly communicated and hard to adjust to the functionality. Users couldn’t find the thing they need easily.

No responsive design. UI design lack of contrast

Most of the user interface design was out of date and didn’t follow the updated Pearson branding guidance.

 

2. What did I do to solve the problems?

I created many screens pages, including 2 wireframes and iterated 6 versions of visual design. Each version interpreted user flows, user interface design and user experience solutions.

I listened to my users and gather as much information first by getting some context on what their perceived problems were in the process.

I defined what the real problem was. The underlying insights on what we believe was the problem, solving common problems with one novel solution. I helped team develop the features based on the insightful design process.

I well communicated and collaboratively worked with the accessibility experts, learning designers and user experience researchers to solve the problems.

I accepted criticism, gathered as much feedback, suggestions as possible. My goal was to arrive at the best solution that most of the users understood.

I had a weekly meeting with my product team discussing issues, users’ needs, review the design and gain design feedback, and well collaborated with every team member found out the good solutions for tackling problems.

I did a few rounds of usability testings with UX researchers to test design thoughtfully. We testified design ideas well before implementation so that saved money and development time.

I created competitor analyses and compared the pro and cons.  Finally, I came up with a usable and accessible notebook design.  Users could efficiently create a note, find notes, write an outline and quickly export a note to outline or drag a note to build an outline point.

After usability testing, it turned out the design worked well. The new UX/UI design was intuitive and usable and appreciated by internal team and users.

 

User Flow

After the problem analysis, I started creating a site map that illustrated the user flow. The user flow gave me a way to iterate design faster. Also, it 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 and helped developers understood the next steps and logic.

 

1.Ideation and Early Stage Design

I created many screens pages, including 2 wireframes and iterated 6 versions of visual design. Each version interpreted user flows, user interface design and user experience solutions.

What’re the design thoughts behind in the early stage?

In the early stage version of Notebook design, I focused on architecting the information and layout, making sure the users see objects placed in close proximity and visually perceived information as a group of contents.  After that, I started brainstorming adding new features to solve users pressing problems, for example, I built a new bulk edit feature that allowed users to group individual notes and rearrange them in an accessible way.

In the early stage of Outline design, I focused my attention on creating flexibility of outline points creation.  The “create an outline” didn’t exist before. However, the feature was most needed. In order to build a good user experience, I researched a lot of outline products and made competitor analyses, and closely collaborated with my learning designers found expectations and pinpoints of users.

What’re the design thoughts behind in the later stage?

In the late phase of design,  I focused my attention on building usable user flow, natural user behaviors, making sure the interface design looks clarity, conserve attention and interaction on-planned. Each screen had one primary action and kept secondary actions secondary.

 

2.Collect Pearson Brand UI and Build Our Own

At the same time as the phase of ideation, I started the visual design brainstorming.

First of all,  the visual design needed to follow with the visual guidance at Pearson Education. It includes color, style, grid system, header, typography, logo, and etc. Based on the guidance, I created personalized graphics, like icons, designed interactive elements to symbols for reuse and consistency, so as to make sure the visual design would be clear, fun and learnable.

Some UI Elements Selected from Pearson UI Gravity

 

Design overview

 

Usability Testing and Findings

After a lot of design iterations, revisions, and team discussion, I worked with UX researchers interviewed a few 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 and watched users’ operations and interactions about the new design in live sessions.

1. Study goals

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

  • Are designs/interactions working as expected, Are they intuitive?
  • Identify users’ pain points of interaction and flow. 
2. Methodology
  • 7 semi-structured interviews with the participant of university students around two days, on January 16-17, 2019. 
  • The one-on-one remote online interview lasts 60 minutes per person.
  • Interviews were held and recorded using GoToMeeting (see Appendix A).
  • Report date: February 5, 2019
3. Participants
  • University students with daily mobile and desktop usage use writing tools.
  • Participants represented the following disciplines: computer science, theater performance, nursing, psychology, accounting, history, and anthropology.
  • Participants represented the following levels: one sophomore, four juniors, and two seniors.
  • Participants represented in 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

    • Move 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. 

 

Visual Design and Prototype

After the testing, I revamped the design and finalized it. Below are the hi-fi prototype screens and finalized user interface design

3.1 Notebook
Create New Note  
User lands on the first screen of notebook tab, they can start by creating a note.  
At the note creation page, user can input a note name, select sources, take notes, attach file and choose labels. When they fill out the form and save, they directly go to the notebook card view. 

Each note card has a three dots menu, where they can edit note, delete note, add note to Outline and rearrange the note in an accessible way.

Notebook-Group and Export 
In the notebook, users can group individual notes into a group by selecting the note and do bulk edit. When they selected an individual note and clicked the group icon, they see create a group dropdown menu. 

Also users are allowed to drag notes changing the order by using the gripper icon and export a note, delete group and export individual notes to outline. Then they can work on editing the outline by switching to the Outline tab.
Individual Note View, Edit and Upload Files
An individual note is consists of clipped content and users’ input contents.

Pearson Writer provides users the capability to clip any online resource to a new note or add it to an existing note in the notebook. For the copied sources, we limit users’ edit behavior for Copywrite protection consideration. Thus, the online content has limited edit function.

In the note edit page, users’ attention is on revising the input contents, uploading a file, changing a note name/a label name. The file upload shared component bring users to upload image, audios, and video.
Search at Notebook

In Notebook, users can efficiently search a keyword based on note title and note contents.

Users can see the relevant search results and the number of results immediately reflected on the screens.

This is a new feature that was designed for tackling the search problems and bring an experience where It is good for the quick find.
Different View Mode and Label Management

I designed three views modes, the grid view, card view, and condensed view, to the Notebook. The information on the cards is filterable and searchable. The grid view mode, users can see many notes details, including note title, clipped note, labels, inputted note and created date. The list view is a narrow rectangle view, users can see note title, label name and created data. The condensed view shows note in a small size card, users only can read the note title and labels, but they can see many notes on the screen at once. Each of the view modes served for different users' view habits. 

I upgraded the color usage by associating color with a label name. Thus, even a vision-impaired user can understand the color by reading the name. Still, users can use the label to filter notes and quickly narrow out the labeled group.


Group Note View and Delete

In Notebook, users can visually see card style differences between individual notes and group notes, because of the different looking. The look of the group note is compacted with multiple notes. 

Clicking at the title of group note, users open the group note page where they can see grouped single notes. They can make bulk edit, such as delete, ungroup and expert.
NoteClipper-Content Clip 

Pearson Writer has a useful feature called NoteClipper. It is for users clipping online resources when they see good content online and want to keep a record to a note.

Users install the NoteClipper to bookmark bar at the browser. When they highlight any online content and click NoteClipper at the browser bookmark bar, the Writer NoteClipper can keep records of the contents.

I designed new features allowing them to choose to create a new note or add to an existing note, and allowing them to add to a different project. They can write down their thoughts at my note input field. I remodeled the whole NoteClipper flow and redesigned all of the UX and UI totally. I ensured the NoteClipper feature accessible.
3.2 Outline
Outline Point Add
When users land on the Outline landing page, they can start from creating an outline point by click at the "add point" button. 
At the old product, the outline didn't allow users to do add a point, they only can add an outline point with a note. 

Now, we provided this function solved the most pressing user problems. users are flexible to add a point, sub-point, and sub-sub point to outline their writing idea.
Add Subpoint to Outline 

In the new design, users have the capability to add subpoints by accessing to "three dots" menu. 

The subpoint input box opens when adding subpoint selected at the dropdown menu. No matter how many subpoints have added to a point, the input box always appears in the top for input convenience.


Add sub-sub point in Outline 

The DBR(Design-based) research found users needed to three-levels points at Outline. Thus, in the "three-dots" menu at every subpoint, people can choose to add a subpoint, making it a sub-sub point.
Add Notes to Outline Points

The functionality of adding notes to Outline is an expected feature, so I redesigned it to make drag and drop feature accessible and user-friendly. 

In the new design, users are able to add multiple individual notes into the outline by selecting checkboxes at the right sidebar and hit the "Add" button. 
Users also can take a drag icon to drag the selected notes to outline. 


Outline Points Reorder

outline point. Before, they didn't have the feature to reorder the points. If users want to move the “A point” at the “II. point” up a level, one way is to drag to it, the other way is to select the drag icon and use the up arrow in the top bar to move it up.

The indent more and indent less icon was also added for an outline usage. From the usability testing report, the features behaved expected.

Outline Different View

I added a new feature that allowed users to view the outline in a different mode. In the "View with note details" mode, users see the details of notes. The reason for adding the feature was providing users the capability to check details of notes, so for them to make an adjustment at note and make a clear Outline. In the usability test, participants found the different view modes were” useful.

Responsive Design

All of the user interface designs are responsive to different screen sizes. In the web, I used 12 columns grid for the large screen, 8 columns grid for tablet size, and 4 columns grid for phone size. The one-column grid width is 72px in a large desktop and overall 12 column width is 1128px; For large tablet, 48px is one column grid width, and 8 column width in total is 840px; For medium phone size, one-column grid width is 72px, the 4 columns grid size is 336px.

What I learned

  • After first-round of usability testing, the testing results suggested me to change the panel position at Outline, so that the outline would be read first, based on users reading habits from left to right, “F” shape on the screen. The suggestion was good. I accepted it. I changed the layout. I learned it was good to always keep user habits in mind when creating designs.  It turned out, users liked the change and had a better forecast of the task to do. It tested well in our later usability testing.
  • In order to make the user experience frictionless and intuitive, it requires designers to quickly gather feedback and have a good judgment finding the “real” problem the users facing. if we rely only on what every user tells us, we will be building too many designs for features that would make our application complex and hard to maintain. Not only that, we will be dedicating more dev resources to implement it.
  • Design accessible product is a dedicated work that requires a lot of effort, understanding, and collaboration with team members. Enough color contrast is one of the accessibility things that need always keep in mind. People with low vision are difficult to read content from a weak color contrast background. We can smartly take use of some tools, like the WebAIM color contrast checker. Besides, using labels or instructional wording would help the disabled to better work with the product. We should always provide the correct focus points and screen reader information for keyboard users. The <label> elements would read for each form of control. Moreover, for image accessibility, we should always provide a useful alternative text input filed.
  • Take advantage of the low-fidelity design to gather as much information first phase by getting some context on what users perceived problems are in the process.
  • In theory, consistency is necessary because we don’t want to detract from our goal that builds a learnable and user-centered experience design. Though at the same time, we want to move fast and release our product as soon as we can take the market share. Conflict occurs. Consistency or efficiency? Our engineers prefer consistency because they have a style library and wanted quickly grab the function from it. As designers, we have empathy for our users and we needed to make adjustments of functions to fit our user needs which costs time.  One of the solutions is to communicate with engineers and product managers, help them understand the needs of users, build the consensus of user-centered design mindsets, and keep them updated with each iteration of the design. In this way, it would well group consistency and efficiency together and unify the team to make a success.

Leave a Reply

Your email address will not be published. Required fields are marked *