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.
2. MY ROLE
LEAD PRODUCT DESIGNER
- Lead the design from exploration to final launch
- Generated UX track to communicate on UX process
- I was wireframe, UX design, UI design, interaction, and participated in usability testing with all UIs related to the project.
- I collaborated with design, product development, and engineering to launch this project.
3. DESIGN CHALLENGE
- Narrow down the writing features from 25 to 10, and organize the layout of 10 checking categories in an elegant way.
- Find out the most needed features that students most love to use and solve their writing pain points
- How to design a writing web application better supports students writing needs, and accommodated with most needs of professionals as well.
- The functionality design is limited by our vendor’s API. If there’s a need from our users that the vendor cannot satisfy, the conversations must be needed.
• I did competitive research in order to identify market gaps and develop products with backed up evidence.
• I initiated workshops to align team members in order to achieve an understanding of the magnitude of the problems to be solved and the opportunities for the product.
• I kept notes on the good and bad features from competitive research, design, and the tones of competitor websites in order to iterate through many design options.
• I thoroughly researched our vendor in order to clearly know what function and features they provide, so as to make sure the design would finally be implemented out by using its API.
5. DESIGN Thinking
5.1 EMPATHY– USER NEED VALIDATION
In order to find out the most user needed writing features and validate the user’s needs, we experienced three stages.
5.2 DEFINE– DESIGN GOALS
Clear about the design goal and business goal I should reach, so the design deliverable would the quality assurances.
- Design usable and accessible user experience and users interfaces
- Reach out students and professional requirements of writing projects proofread.
- Refresh the overall user experience, to build an easy to use grammar checking application.
5.3 IDEATE–WIREFRAME EXPLORATION
I explored several 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.
5.4 PROTOTYPE– CAFE STUDY
I ran a cafe study with 5 participants with a clickable prototype to quickly :
• Validate that users could find the issues categories and clearly know the taxonomy
• What options do they expect to check on the issues when proofreading the writing projects
• What categories do they think can be trimmed.
• The horizontal categories layout is better easy to use.
• Most participants suggested to cut down the numbers of the sub-categories.
• As a reflection, they thought to group some categories together and separately display them as a new group would be good.
5.5 TEST-FINAL SOLUTION
The categories are grouped in a simplified way. I regroup some of the categories into a new group and put them logically together to the top as a new name “Structure”. The sub-categories of Correctness and Style are much simpler than before. Some of them are grouped together, so users wouldn’t feel overwhelming.
Make sure the language speaks users’ words, thus enhanced discoverability. Users can clearly navigate and find a targeted group.
6. USABILITY IMPROVEMENT
USABILITY PROBLEM IDENTIFICATION
The old design had a lot of heuristic and usability issues. Below is a usability heuristic analysis of one page.
DESIGN AFTER ITERATIONS
- In the new design, I simplified the user interfaces. I removed the irrelevant information to make the design looks clear and easy to use.
- I unified the color-coding, which I trimmed the color down from 7 to 2. As to considering accessibility, each of the colors is with a legend. The legend interprets what color means and shows in the top right of the page.
- I designed a retrievable action– the “undo” function. When users resolve a writing issue, they can undo it in case they are in an unwanted state.
FLOW AFTER USABILITY IMPROVEMENT
“Resolve An Issue” Is Easy of Use
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 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.
7. USER INTERFACE IMPROVEMENT
SUCCESSFUL STAGE ILLUSTRATION
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.
HIGH-FIDELITY PROTOTYPE FLOW
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 Points
“I want to efficiently dismiss an issue and hide the issues when I want to solve this issue later”– A University Student
“I am a professional writer. I always need to use synonym words to improve my writing quality” –A Professional Writer
I designed three icons with an issue card. The three icons are used to hide, dismiss, and 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 dismiss feature. It efficiently provides users the capability of the check for similar words and replaces the word with only one click.
User Pain Points
“I want to efficiently know my paragraph structure and adjust my writing sentence lengths”–A Graduate School Student
I designed the structure in a prominent place, where it is in the top navigation and close to Issues. It is easy for users to spot. In the structure, users can check the grammatical and sentence structure. I designed these two important features into two tabs, so users can quickly narrow down results and efficiently target what they want.
User Pain Points
“I desperately need a tool to check my plagiarism before I submit my paper”–A Doctor Student
Plagiarism is our big feature. We provide users the capability to know the plagiarism score and easily know the plagiarism sentence and its index.
- 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.