Pearson Writer(1)-Project and Dashboard 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 Project is a feature that helps students to manage writing projects, deadlines, and reducing distractions coming their way. Students need a single place to track assignments and organize their research. Pearson Writer is a tool that makes it easy to improve their study habits, avoid procrastination, and juggle all students’ responsibilities.

My role

User Experience Designer | User Interface Designer | Wireframe | Information Architecture | Visual Designer | User Flows Builder | 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 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 where the data and usage 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 an accessible way. The code didn’t set in an accessible environment.

3.  The UI and UX design were out of date and not user-centered

The old visual design and UX design was hard for students to manage projects, organize ideas and thoughts. It was hard to track project deadlines and tasks progress. The UI and some functionalities of this application were out of date.

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

The internal team was lack of sufficient communication and collaboration with the help of the old UX designer.

I 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 user interviews.

Why did we take DBR?

It was to gather current real-world problems by designing and enacting interventions as well as extending theories and refining design principles.

What’s the user needs we gathered from DBR?

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 the 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.

 

Current Product Problem Analyze and Solutions

1. What’s the goal to achieve in Project redesign?

Project is mainly used for students to track and manage writing projects. The goal of the new design was to ensure students would efficiently complete writing works, view projects, organize notes, tasks, and outline. Also, we needed to ensure design accessibility for the disabled to use the product.

2. What’re the challenges I need to tackle from the current old design?

Since it lacked sufficient user requirements to prioritize the feature, it was difficult to build clear information architecture and serve the right purpose.

Many detail requirements of the new features not clearly identified. The detail of user flow needed designers to build it with good experience.

3. What did I do?

I created many screens, including 2 wireframes and many versions of visual design, interpreted different user flows and solutions.

I collaboratively worked with the accessibility experts, learning designers and user experience researchers to predict the user expectation and tackle the user problems.

I delicately communicated and updated design with my product team to discuss users’ needs, review the design and gain design feedback.

I timely sync up with UX mobile designers ensuring the mobile and desktop experience consistency.

I took a few times of accessibility checking, found out the good accessible solutions to build the design and code in an accessible environment.

I assisted UX researchers with usability testing to testify design solutions and define users’ pinpoints. We evaluated design well before product implementation. so that it saves money and development time.

I did competitive analyzes, collect and compare data about products in the marketplace. Highlighted the strengths and weaknesses of products in order to make more informed decisions about product strategy.

The revised design was intuitive and honored when evaluated with users in usability testings.

 

User Flow

After the design problem analysis, I started creating a site map to illustrate the users’ flow. The user flow gave me a way to iterate faster through ideas and increased the speed of iterations. 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,  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.

What’re the design thoughts behind the two versions?

The 1st version mainly focused on building a task-oriented user experience. It allowed users quick access to the dashboard and manage the project details, tasks, notebook and outlines.

The 2nd version was mainly concentrated on engaging users. Users could dive into the dashboard by walking through some interesting surveys process. Then we will bring them to the right place through the answer they chosen.

 

2. Collect Pearson Brand UI and Build Our Own

After the back and forth of discussion, we decided to go with version 1. Then I started the visual design.

First of all,  the visual design would follow with the visual guidance in Pearson Education. The guidance includes color, style, grid system, header, typography, logo, and etc. Then, I created some graphics, like icons, and built some interactive elements, so as to the user experience was fully interactive, at the same time, made sure the visual design fun and learnable.

 

Design overview

 

Usability Testing and Findings

After a few around of back and forth of discussion and design iteration, I worked with UX researchers conducting usability testing. We interviewed 15 users. They joined our 1 on1 remote moderated session in an hour per person. In the sessions, UXR and I watched the users’ interaction, users’ behaviors and user pinpoints and answered our uncertainty questions about new features.  In the end, we evaluated the reports together. I revised the design accordingly.

The testing environment we used was the hi-fi prototype I built in InVision.

What did I do?

I designed the whole user interfaces, user flow, and interaction and built the interactive prototype at InVision.

I assisted UXR with usability testing and brainstorming questions and testing scripts. I spoke about my most-concerned design questions. Also, I modified the prototype flows matching the testing scripts flows.

1. What’s the study goal?

Is the design intuitive? 

Can it identify users’ pain points?

Whether the interaction/design works as expected?

Are students able to complete tasks with “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.

 

Visual Design and Mockup

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

 

Create Project

User lands on the landing page, they can start by creating a project. An attractive "create project" button stands out attracting users immediately to create a project. 

When they land on the project creation page, users can fill out project names, choose a project and citation type, set the project due date and due time and input project length, etc. 

They also can get notification by switching “Email alerts” and “add to calendar" toggle on. 

Once a project is created, users will 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 in the card view or list view. 

They can edit the project through the three-dots menu, and to quickly sort out the project through the due date, date created, title and date modified.
Project lists-Current, Past, and Archive

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

Through the Design-based research, we knew students needed guidance for writing projects. The current, past and archive tabs brought the group function for students quickly find the priority. Students would find the most due project efficiently. Also, they can quickly find the past-due project at another past tab. If they archived a project saving for the future, they can quickly unarchive them at the archive tab. 

The past and archive tab are the new features. It was added based on user persona and product objective. 

The design intention here is to use the project due date to help users organize writing projects successfully and finish works on time.
Project Search 

The search function designed for users quickly finds a project by a project title or project contents. When users type a word in the input box, the search results would immediately appear and would be narrow down while typing more words in.

This feature is a new feature. I designed this feature there, as a way for them to escape from a stuck situation or can't find the next thing. Users can see search results and the amounts of results appear at the top of cards.
Dashboard View 

In the dashboard, users can view project details, such as project due date, due time, completion progress, length of the writing project, citation format, etc. 

They can organize the dashboard and rearrange the order of the cards, such as checklists, notes, outlines, etc. 

Each of the category cards has a "three-dots" menu where users can find edit, delete and having accessible rearrange menu lists.

Checklists at Dashboard View

The checklist features show at the top of the dashboard card. It is a useful feature for students to build a track for the project.  When users quickly check off a task in the Checklists card, they can see the completion percentage change accordingly. 

In the checklists section, Pearson provides some self-taught content as a task. For example, if students don’t know how to create a task of writing and revising, they can watch an instructional video to learn. 
Add Task at Checklists 

Students can add their own tasks to prevent procrastination, build reminder and track progress.

In the dashboard, when users come to Checklists view page by clicking at Checklists card, they can get the “add task” button. They can add task names, due dates and get a notification when a due date is approaching when their “email notification” toggle is on at the project creation page.

This is also a new feature I designed for users based on their pressing needs and generally task creation behavior. The report of the usability testing said this feature was intuitive and easy to use. Students liked it. 

Checklists Edit

Users can edit checklists by selecting the edit button at the top of the checklists review page.

The edits button will lead users to rearrange a task, change the due date and task name, and revise the category name of progress checklists.  Clicking the "Save" button in the bottom of edit checklists saves all the edit. Users got a successful revise notification pops up on the screen.


 

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.

 

 

 

Leave a Reply

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