Barnes & Noble Education

Bartleby Writing Tool

Background

Created a writing tool for college students to edit their grammar, check for plagiarism, and create writing citations for their research papers.

Timeline
5 months
Role
End to end product design
Stakeholders
2 product managers, 5 engineers, UX researcher
Tools
Sketch, Adobe Suite, Usertesting, Qualaroo, Typeform and Invision
View Tool
Discovering Business and User Needs
The Challenge
How can we bridge the gap from browsing research papers on Bartleby and writing a final draft?
Goals for tool
Usability
The user needs to be able to quickly edit their writing not only on desktop but on the go with their mobile device.
Business
Provide ways to monetize this app for Barnes & Noble Education to benefit their monthly subscriptions.
User survey’s
With access educational sites (more than 15 and each with traffic up to the millions) I sent out a Typeform survey and gathered thousands of responses.
Survey findings
Students value grammar the most and citations the least. Majority have used a grammar tool but haven’t used a plagiarism checker.
Competitive Analysis
Identify market opportunity
Goals:
Find what our competitive writing landscape looked like. Try to write research papers using these tools. Understand what product features we needed in order to compare with our competitors.

Results:
Findings were Grammarly had the most robust product on the market. But lacked in plagiarism document submissions. You also couldn't import a Google Doc into the tool or upload a paper with text.
Brainstorms and User Journeys
Interviewed students at colleges

Goals:
Visit community colleges in my area and sit at their bus stops and gathered feedback about what students are going through in their writing journeys.

Results:
I was able to learn that a lot of them were writing between classes. They were mostly using their mobile device to write. I quickly realized that having a mobile version of our writing tool was needed.

User journey map

Goals:
With the gathered information from surveys and interviews I wanted to create a journey map based on how college students were thinking, feeling, and experiencing writing a research paper.

Results:
I noticed through some interactions and interviews with college students that even writing the first draft was difficult. Students are writing a variety of assignments such as essays, poetries, and research papers. Time is also a vital problem. Students are waiting until the last moment to start writing.

Wireframe prototypes

Goals:
In order for our team to work faster on how we intended to primarily demonstrate functionality, features, content, and user flows I created low fidelity wireframes.

Results:
These drawings were discussed at length with the engineer team. We were able to discuss tradeoffs and painpoints before going into layout testing.

Design Hurdle 1
Writing Tool Layout
Problem: What is the UX of the writing tool?
After sketching out a variety of options I wanted to create high fidelity prototypes. Each version had a section for the paper, a section for results, and edit comments on top of the paper.

I mocked a variety of ways you could interact with each section. Experimented with tabs, outlines, and comments.
Solution: Simple is better
I did qualitative research to watch how participates were interacting with the each of these different versions. After interviewing the participants I saw that majority of them could get through their edits faster with comments version over the other ones. It was the simplest version and it reminded them of edits on Google Docs, what most students were familiar with.
Design Explorations
Paper tab
Clean tab
Outline
Comments
Partners: Ralph Chochlac, Ben Kermode
User Research
Type of Research
To comprehend which user experience is right for the user we had students come in and interact with the prototypes. We watched and made note of their interactions and interviewed them afterwards.
Findings from the Research
Interviews revealed that the comment version was the easiest to make quick changes. That they could locate and comprehend the changes being made.
Impact of Research on Product Development
We saw a +35% increase for time on site. As a company that needs SEO to drive traffic this was a big win for us and we liken that to the efforts of this ux.

“It's easier and faster to make changes and dismiss edits on this version.”

Design Hurdle 2
Writing Toolbar
Problem: Showing both results and filter system
One of the challenges about designing the toolbar was having a simple filter set to choose to edit your paper for grammar, plagiarism, or both. Next we needed to analyze your paper to get your results. Should the filter and the results be combined? Should they be seperated?
Solution: Results at top and analyze filter below
I went through a big design exploration and performed some a/b user testing on Optimizely. After looking through the quantify data the design highlighted performed the best. It was also the simplest to develop in the time we had. (See User test results below)
Design Explorations
Grade Report Graph
Toggle
Radio checks
Results and filter seperated
Partners: Ralph Chochlac
User Research
Type of Research
To understand which filter design to convey results and filters we conducted 3 quantitative usability tests on Optimizely.
Findings from the Research
A/B tests revealed that the radio check boxes with the score cards up top performed with more click through results than the other designs by 15%.
Impact of Research on Product Development
This layout resulted in an increase of +10% in analyzing results. Which in turn kept students on our site longer helping to contribute in the +35% increase of time on site.
Design Hurdle 3
Mobile Web Toolbar
Problem: Toolbar UX for mobile web
We learned that most students wrote their papers on their mobile device but there wasn't a great experience for them on mobile. I explored multiple options on different ux patterns. I explore through options like pop ups, sliders, cards to view your filters and results.
Results: Don't block the view of the paper
Slide down and mobile toggle version didn't allow access to the paper while you looked quickly at results. Setting results allowed the user to view results when needed or just using the analyze button and viewing the underlines on the paper.
Design Explorations
Slide down
Mobile Toggle
Inline Results
Settings Results
Partners: Ralph Chochlac, Ben Kermode
User Research
Type of Research
To comprehend which UX is right for the user I did a series of interviews with students. I had them interact with these different versions on their mobile device.
Findings from the Research
Usability interviews showed that students could work faster with the settings results version. It didn't block their visibility with the paper and they could edit and write efficiently.
Impact of Research on Product Development
This design resulted in an increase of mobile users on the site. We saw more engagement with the writing feature on mobile web.

“It's easy to switch between the results and my paper”

Design System
TYPOGRAPHY
Headline 1
H1 48/60px
Headline 2
H2 34/50px
Headline 3
H3 28/38px
Headline 4
H4 18/22px
Paragraph
P 14/24px
COLOR
Primary
#547CF3
Plagiarism
#D05AAC
Logic
#F2BD65
Grammar
#547CF3
Score
#547CF3
SPACING
8px XS
16px S
24px M
32px L
40px XL
48px XXL
BUTTONS
Default
Hover
Disabled
ACCESSIBILITY FOR ALL

While working on this project I really wanted to make sure this tool was accessible for all individuals. Color contrasts were calculated to make sure there was a 3:1ratio. Created tab/focus order for developers to add to the code.