Pearson Writer(1)-Project and Dashboard Design

Introduction

The Pearson Writer is a revolutionary Pearson writing web and mobile app that supports at every step in the writing process from gathering information and citing sources, to following grammar rules, to staying organized and on task. Pearson Writer guides users through writing development and provides instant feedback to refine their drafts in minus all the time and searching needed with other writing apps.

The Project is an innovative tool that helps students to manage many writing projects, deadlines, and distractions coming their way. They need a single place to track assignments and organize their research. 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 Architecturer | Visual Designer | User Flows Builder | 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 web application design was launched globally in September 2019.

 

The Challenge

1. lack of sufficient users tracking data

One of the design challenges was that the limited data about users’ requirements because the application set in an old code environment when the data and click-tracking were not available.

2. This application of design and code didn’t meet the requirements of accessibility

This old application didn’t build in accessibility way and code didn’t set in an accessible environment. However, the new UX and UI design were required to build into an accessible and usable application.  thus, this requires many communications and collaboration with engineers, business analysts, and product managers.

3. The Pearson Writer products have not caught up with the speed of this fast-growing outbound market.

The application was released in the market around 6 years ago and it was a quiet success in 2016. Many higher education institutions, schools, and universities bought and used Pearson Writer. Since then, the UI and functionalities of this application were not updated. The user experience wasn’t intuitive and user-friendly. Thus, it couldn’t satisfy the fast-developed technics world. The visual design and UX design of the old product was hard for students to manage writing projects, organize ideas and thoughts and input deadlines and tasks track progress.

4. Internal team lack of well-established collaboration and communication

The internal team was lack of sufficient communication and collaboration. It needed a UX designer who had a solid understanding of users(students) and a quite strong user experience and user interface design skills, and sophisticated collaborative skills. UX designers required to reconsider many features and information architecture, and needed to collaborate with UX researchers to add a few expected new features to achieve the goal of MVP.

 

Comparison of Old and New Design

 

 

Design-Based Research

Before we started the design process, we did design-based research (DBR) about the old production by survey and interview users. It intended to current real-world problems by designing and enacting interventions as well as extending theories and refining design principles.

The DBR research results were:

1. The majority of students make a plan prior to completing a writing assignment.

2. Many students employ metacognitive awareness and self-regulatory skills to manage the writing assignment process but could use additional scaffolding in order to consistently improve and apply self-regulatory skills to their writing processes. 

3. Most students begin writing planning by ensuring they understand the task by reading the syllabus/assignment (SRL) and the topic (writing focus).

4. Student experience in this study provides initial validation that the existing scaffolding designed to instruct support writing goal setting and remind students how to optimally initiate and complete the writing planning process supports learning and writing process improvement well.

 

Problem Analyze and Solutions

1. Objective

Project is mainly used for students to track writing projects and manage writing assignments and making planning. Through creating a project in Pearson Writer, users can track tasks, sett up notifications, create notes, and build an outline. They would efficiently complete their writing paper and assignments on time at the product. In the dashboard, users would be able to view the project details and made categories customization to matching with working habits. In the new design, I also needed to ensure accessible design for disabled learners so that they can organize their projects.

2. Challenge

The new Project page needed some new features which didn’t exist before in the old product. The requirement was to have a new dashboard where it had aesthetic checklists progress and project progress. Users could customize the dashboard, view project details and reorder the categories in dashboard. In order to design an accessible, seamless, and user-friendly web application, I did a lot of design thinking, discussion, and design iterations which cost many efforts. Besides, to build an accessible web app for the visual impairment of people and the disabled, there were a lot of accessibility discussions, research, and collaboration. One of the challenges was the new feature of the dashboard lack of sufficient users data and requirements.  Besides, in the project lists view, it was challenged to design the quick accessible switch function for users to view different projects without leaving the current page. Also, some new features were sort projects by the due date, completion rate tracking, project creation, bulk edits and archived.

3.Solutions

I collaboratively worked with accessibility experts, learning designers and user experience researchers in the product team. I had a weekly meeting with my product team discuss users need, review the design and gain feedback.  I also had weekly meetings with UX mobile designers sync up UX thinking, UI updates and UX/UI solutions. I took a few accessibility meetings with accessibility experts figured out the possible solutions to serve the design and code accessible needs, and I did a few usability testings with user experience researcher and found out users’ pinpoints and evaluate design before implemented so that it could make sure the design intuitively.

I created many screens, including wireframes and visual design versions. They interpreted different user flows and solutions. Researched many dashboard designs and finally came up with a good dashboard design where users could efficiently track the tasks, view due dates, access to notes and outlines, as well as, they could quickly switch to different projects. It turned out working well. The UX/UI design was intuitive when evaluated them in usability testings.

 

User Flow

After understood the needs of users, 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.

 

1. Ideation and Wireframing

I created 2 versions’ wireframes. Each of them showed different design solutions and layouts for the team. The first version mainly focused on all project views and allowed users quick access to the dashboard and was able to manage the project details, tasks, notebook and outlines. The second version was mainly concentrated on providing a fun user experience where users could view project details in the first-hand and access to a different project by selecting at menu lists.

I presented the wireframes several times to team and shared them with UX designers discussed with the product manager, UX designers, user researchers and learning designers in a few meetings, where they provided many valuable feedbacks, opinions, and thoughts. Finally, we decided to go with version 1.

2. Collect Existing UI

After ideations and wireframing, I started the visual design. First of all,  the visual design would follow with the design guidance that Pearson. Some of the design guidelines are branding color, style, grid system, header, typography, logo, and etc. Then, I created some graphic, like icons, for some specific place, added interactive effects, so as to made the user experience efficient and usable. At the same time, the visual design would be fun and learnable.

The UI design experienced several iterations and revisions. We had weekly meetings and discussions with a Product Manager, UX designers, UX writers, and UX researchers tracking progress and showing design revisions.

 

Design overview

 

3. Visual Design and Mockup

After the visual design, I created the many user flows and mockups in the InVision,

Create Project

User lands on the landing page, they can start by creating a project, where they can fill out project names, choose a project type, set the project due date and due time, input project length and choose citation type. They also can get notification by switching toggle adding notification to calendar. Once the project is created, users can go to the project lists view.
Project Lists- Sort By and View By 

Project lists show all projects. In the lists, users can see project title, project progress and due date, and they can edit the project through three-dots menu, sort project throught due date, date created, title and date modified. Also, they can switch to different view modes.
Project lists-Current, Past, and Archive

When the due date of a project is passed, the project would automatically go to Past tab. 

Users can easily organize and manage the projects though access to three tabs- Current, Past and Archive. 
To archive a project, users can click checkboxes do the bulk edit or through "three-dot" more menu to do single archive.
  
The past and archive tabs are the new features. It was added based on user persona and product object. We wanted to use the project due date to guide users successfully complete the writing projects on time.
Project Search 

The search is used for users to quickly find desired projects. When users typing on the input box, the search results would automatically appear on the screens by typing. 

Users can see search results, results amounts. It intent to help users quickly find expected projects.

Dashboard View 

In dashboard, users can efficiently view project details and manage dashboard by customizing and rearranging different categories. 

Each of the category cards have a "three-dots" more menu where users can find edit, delete and accessible rearrange way.


Checklists at Dashboard View

In the dashboard, users can quickly check off the tasks and see the progress bar moves forward. Some of the tasks are Pearson dafault task. It is used to guide enter-level users make plan. Users can click video icon watch the video. It would help them to learn how to planning, researching, writing and review, and editing.


Add Task at Checklists 

In the dashboard, users can quickly add task to any of the checklists categories by clicking add task button. Also, they can set task due date to remind themselves. The notification will send to users as a email notification when they toggled on "Get notification" in create project page.
Checklists Edit

Users can quickly go to edit checklists by selecting the edit button. It leads them to the edit page. In the edit checklists page, users can edit the category name, rearrange the order of task and revise task names, add due date, and delete tasks. We also provide users the capability add due date to Pearson default task. When users complete all the edit, clicking "Save" button will save all the revision. The notification pops up when save success, and then page auto jumps out of the edit mode.

 

Usability Testing and Findings

After a lot of design iterations, revision, and team discussion, I worked with UX researchers interviewed 15 users who joined our 1 one 1 moderated usability testing in an hour. In the sessions, our UXR asked participants questions to evaluate the UX and UI design and get answers and feedback. I sit together moderate users’ operations and interaction and immediately got users feelings and thoughts at InVision prototype.

1. Study goals

Is the design intuitive?

Can it identify users’ pain points?

Whether the interaction/design works as expected?

Are students able to complete tasks using “My Projects” on the desktop and mobile?

2. Methodology

  • Five semi-structured interviews were conducted with university-level students over the course of four days, June 19-21 & 25, 2018.
  • One-on-one remote interviews were 60 minutes in length, following an order script.
  • Interviews were conducted and recorded using JoinMe (see Appendix A).

3. High-level findings

Students appreciate tools that enable them to be more organized and to improve their overall academic performance.

  • Most students understood how to delete tiles on the landing page, though, some expected the ability to delete portions of the tile (e.g., checklists) without removing the whole tile.
  • Most understood how to add a new Checklists tile.
  • Some share project work with peers; some do not.
  • Students understood that this was a tool that they would use independently to draft their papers, and most did not expect to share their work until it was in more complete form.
  • Students expected to right-click tiles or find navigation on the project tile in order to archive it.

 

 

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.