Writing Review is an app that checks students’ writing for grammar, style, and plagiarism. It removes the pain of writing problems with innovative, seamless, and accessible user interfaces.
The new design increased reached the highest KPI 5 clicks expectation on the Analyze Button, increased the NPS score by 56% and average session duration by 10%, and reduced the bounce rate by 10.3%.
Lead Product Designer
- Lead the design from exploration to final launch, in every aspect of the product development lifecycle.
- Took charge of creating wireframes, UX design, UI design, interaction design, and collaborate in usability testing with UXR in all design related testings.
- I closely collaborated with cross-functional teams, including product designers, product managers, user researchers, content strategists(UX writers), engineering, QA, business analysts, project manager, and learning designer to launch this project to market.
Lacking Enough Features Supports Different Writing Checking Needs
Before the redesign, I researched the past few years’ customer reports carefully.
28% of learners reported to us the color and superscripts showed in the old design distracted them from completing the proofreading task.
56% of learners said that this tool provided many inaccurate checks, and it was difficult to resolve issued words.
89% of learners mentioned that there was no plagiarism function that can support paper checking needs.
78% of learners needed more proofread features to support all their different writing checking needs.
Cooperate With Third-Party
Since there’s no artificial intelligent team in Pearson that can support all the feature requests. ProWritingaid is one of the biggest grammar checking application in the market. Compared with the well-known Grammarly, it has more checking features and supports around 25 different checking functions. Around a few months of research, we decided to collaborate with ProWritingAid.
There were four main challenges:
1. How to Convince Product Owner
Since we cooperated with ProWritingAid, which supports 25 writing checking features, my product owner wanted to use the 25 features for the entire redesign. I know it was not going to work. First, it would overload learners to make a fast decision. Second, it would make the checking speed very slow when editing a large document.
- I pull the trigger to recommend to narrow down 25 features from our vendors to the 10 most needed features and organize the layout of 10 checking categories in an elegant and efficient way for my entire team.
2. Prioritize the Core Needed Features
How might we provide the right 10 checking categories that most needed and for students to efficiently finish the paper proofreading?
I did 3 stages of user needs validations and feature audits. I will talk about it in detail in the following place.
3.Accessibility for Visual Impaired People
to make a proofreading tool accessible and designed the right signifier and affordance, minimum use of color for those low vision and color blindness users were challenging. It required much technical support and design iteration.
4.Collaborate With Engineers to Solve API Challenge with Third-Party
Since we used the vendor’s API for this entire redesign. To make sure what users want can match the vendor’s support was challenging. It required constantly communicating with engineers. Sometimes, we also needed to connect with the third-party vendor to figure out whether the design features were feasible to implement.
GOALS & METRICS
Fulfilling the Business Goal to Achieving Core Actions
Before I started the design, I collaborated with my product manager and business analyst to figured out the right expectation for the redesign of success metrics.
- Compared with a pre-test assessment of writing ability, learners’ post-assessment of writing ability is higher.
- Early indicator: 1-5 clicks on the ‘Analyze’ button in Review per user and per paper.
- Other indicators: Learners see errors in their paper/writing decrease after each use.
Design Thinking Approach Break Complex Down Into Confident Actions
EMPATHIZE & DEFINE
User Need Validations & Workshops
IDEATE & PROTOTYPE
Iterate Rapidly and Quickly
With the 10 writing checking categories on hand, I started to explore the layout and design. When I put the 10 categories into the design, I run into a problem. The 10 categories still made the page looks busy if I showed them all on a page.
How to build a simple and intuitive solution for users to efficiently find what they want and know where to go?
To flesh out my ideas. I explored 4 options that bundle the categories with the primary uploaded document so that users can flexibly check writing issues, and quickly change the issues in the uploaded document. But I also need to ensure that the category drawers and layout are lightweight as it’s such a big amount of categories.
Then I organized a cafe study and invited 10 participants to interact with my clickable prototype to quickly validate:
• Users could find the issues categories and clearly know the taxonomy
• Which one of the versions of design do they expect to interact with.
• What options do they expect to have in the issue drawer.
• What actions do they need to take when resolving grammar issue.
• 8 of 10 The horizontal categories layout is better. It’s easy to see and read & fit human’s reading habits
• 6 of 10 Most participants suggested to cut down the numbers of the sub-categories.
• 9 of 10 Keep grammar, style, consistency in the issue tab
• As a reflection, they thought to group some categories together and separately display them as a new group would be good.
My Design Goals
When the design is ready, I started to design the high-fidelity prototype. Clear about the design goal and business goal I should reach, so the design deliverable would the quality assurances.
- Design simple, engaging, usable, and accessible user experience and users interfaces
- Reach out to students and professional requirements of writing projects proofread.
- Refresh the overall user experience, to build an easy to use grammar checking application.
Make Users Efficiently Make Checking Decision
Users can only choose from a certain amount of options before they stop enjoying themselves. I designed the right amount of options for users’ choice at each level. Also based on Hick’s law- the more options we provide for users, the longer it takes them to make decisions. The simpler navigation choices can improve decision making and increase interaction efficiency.
Now the top navigation has three main categories–Issues, Structure, Plagiarism.
Core Features Easily Discoverable
Make sure the visual affordance and signifiers are easy to be discovered. The symbol is designed with a clear label name. It is not only improved the efficiency of browsing but also ensured accessibility. To make sure the language speaks users’ words, I carefully collaborated with my UX writer had many rounds of language iterations to enhance the legibility. discoverability. The visual hierarchy inside the “Issue” drawer is easy for users to scan and read. Now it only contains the right amount of sub-categories under each tab. Clear organized information and categories help users efficiently make checking decisions and find what they want.
Efficient Categories Mapping
Plagiarism is also grouped into a new tab in the top header. The solution Intuitively solved the problems before there’re too many items shows in the issue drawer. We provided users right checking categories upfront, speeded up their checking decision-making. The location of icons also reduced the user’s cursor moving time. This solution guided them to successfully perform the right actions and easily find important checking categories.
You might want to see whether there’re other improvements?
OTHER RELEASED FEATURES
Usability & Heuristic Updates
Let’s jump into the old design first. In order to update the new design with usable and heuristic support, I made some usability and heuristic analyses of the old design. Finding the right problems was the key to support the new design change with reasons.
The old design had a lot of heuristic and usability issues. Here’s some usability heuristic analysis of one page.
Reduced Click on “Resolved An Issue”
Before the “resolve an issue” requires 3 clicks at least, which is not sufficient and overloads users’ cognition. Now the flow of “resolve an issue” has been improved. The improved flow only requires 1 click. Users can easily hover over to the issue and easy to fix the issue.
Provide Freedom for User Leave Unwanted State
When users resolve an issue, there’s a popup message modal that shows up. Users can easily click “undo” in that message modal, they can recover from the error. If users resolve the issue as wanted, the popup modal will be replaced by a next resolve behavior.
User Interface & Interaction Improvement
Engagement Improve-Empty State and Successful State Illustration and Animation
In order to better present a successful/empty state, I drew three illustrations. Each of them represented different states when there are no writing issues or when users succeed resolve all of the issues.
I designed a skeleton loading to improve the emotional engagement for users waiting on analyzing the document. Instead of design the simple spinner loading, I designed the skeleton loading improved the performance of users retains in our product.
Other High-Fidelity Design Overview
I created a high-fidelity prototype in InVision. I built many tangible solutions to solve the potential problems and the user’s requirements I’ve gathered. The prototyping was used to bring conceptual and theoretical ideas to the product team and engineer team. It built a good communication and discussion context for us to prove our ideas and take usability testing later.
User Pain Point
Students were no ways to work on resolve issues related actions. They wanted to efficiently dismiss an issue and hide the issues
Solution 1 — Proximal Visual Affordances Clearly Communicate to Users to Interact
I designed three icons, which are used to hide, dismiss, and check synonym. The hide-an-issue would allow users to reopen the issue, which solves the users’ pain points. The Dismiss-an-issue is in the proximity place. it is easy for users to find the functions and take action.
The synonym feature is group proximity with the hide and dismisses feature. It efficiently provides users the capability the check for similar words and replaces the word with only one click.
Measuring & Celebrating Success
After released in 2020, we got much positive feedback from users. We focused on the success metrics at the very beginning of the project. And this is what we see:
- As a UX product designer, we should always speak for our users. We’re the few people in a meeting stand for our users. When the business requirements conflict with user requirements, we should stand for our users and speak for them.
- Keep the first version of a feature or product as minimal as possible. Start with a conversation within the team, talking about your ideas and brainstorming to them. By doing this, it would build on your thoughts and also let teammates know your progress and maybe they would love to make their contribution.
- Test all of the assumptions early. I created a few wireframe options this time. I tested my assumptions early by hosting a cafe study. I quickly made a prototype to test my ideas. It identified the issues early and validate the thoughts. In the end, it helped the project finish early than planned.