An online writing platform helps users build writing skills to communication more effectively with clients, employers, and fellow professionals.
Overview
Lettersmith is a web-based writing application which supports both students and instructors with writing assignments. It allows instructors to guide students on writing by setting checklists on different types of writing, giving examples for them to refer to, and leaving feedback directly. It is now used by over 1600 students and instructors in U of M.
My Contribution
I took problems from broad ideas to high-fidelity designs, and presented to my mentor and the team for iteration, as well as discussed about feasibility and accessibility.
My Role
UX Design Intern
Team
1 Product Owner, 2 Project Managers, 3 Developers, 2 UX Designers
Timeline
2 Months
Problem
As Lettersmith gains popularity among instructors and students, our team has been actively analyzing the current site and conducting user testing. Through this process, we have identified several key areas for improvement and usability issues that require attention.
How might we create a more effective and user-friendly writing assistance tool that caters to the needs of both instructors and students?
Design Process
Expose Problems and Pain Points
Current usability issues:
Writing Tags
Student users are confused about writing tags and not sure when to use them.
Instructor users would like to see a high level organization for writing tags to help guide students through their writings.
Due Date
There’s no due date associated with each writing assignment for a project-based course, and instructor users are unable to track if students are following well on each assignment.
Dashboard Search
With more and more users are using the product, the number of template is increasing as well as the number of submissions and members. There’s no way for users to find a specific template or submission in a short time.
Leaving Feedback
Leaving the same feedback for multiple parts of a writing is tedious.
Explore Design Opportunities
By examining the current design, we came up with the following design opportunities.
Research
In designing each new feature, I started by mapping out the user flow of how each function works and confirmed with my mentor. Since the dashboard is displaying collections and templates in a gallery view, I analyzed similar products on how they design the dashboard view and feedback section.
Key Takeaways
Utilizing color labels to visualize different submission status can give a high level overview for users.
The feedback section can be shown as a floating modal associated with the writing content.
From Ideation to Design
Feature 1 - Tag Groups
I designed folders to group related tags (e.g. tags that need to be included in the 1st paragraph). Then I tried using color tags to differentiate folders and tags, however, I found out that there are too many labels showing at the same time, so I changed the design to be simpler.
Ideation:
Iteration:
Feature 2 - Due Date
Instructor’s Dashboard
Student’s Dashboard
Feature 3 - Filter & Search
Feature 4 - Quick Feedback
While designing the quick feedback feature, I wanted to design it as a floating menu that enabled users to choose the comment they want after highlighting the writing content. However, in the meeting with the developers, we learned that doing so would reduce the accessibility since it is hard to just use the keyboard to highlight content as well as navigate through the floating menu. As an educational tool, accessibility matters.
Ideation:
Iteration: I redesigned the quick feedback section by attaching it at the bottom. By doing so, users still can highlight the content they want to give feedback for and select the feedback they want instead of typing it out. It also address the accessibility issue on the interface.
Impact & Next Steps
My designs have been validated by the team and are currently under development. As Lettersmith aims to provide a robust writing platform for instructors and students, these new features will help improve annotating and learning experience for student users, as well as enhance feedback system to support communication from instructors and peers.
While the team is working on developing these new features, we realize that what should be prioritized for now is addressing the accessibility issues over the product. Therefore, in the next development cycle, we’ll start with uncovering all accessibility issues with the assistance of accessibility testing tools, such as axe. Our team will also connect with the U-M ITS department to discuss on the guidelines of accessibility product over U-M.
Moreover, user testing will be conducted on these new features to receive user feedback and continue iterate on the designs.
Me presenting my work at Student Showcase
What did I learn from this experience?
A small design can change a lot.
Sometimes I mistakenly think that creative and beautiful designs are good designs. But in fact, a small design matters a lot. For example, when I was designing the tag groups feature, I thought that using labels was modern and easy to be noticed. However, it actually looked crowded and not clean. Then I turned my mind to make a simpler design, and this time I think it went well. So design doesn’t have to be very creative and special, even though I just changed a background color, I could still meet the design goal.
Accessibility design
From this internship, I learned how to make designs inclusive and accessible to users. As accessibility design increasingly appears as a design topic nowadays, I realized that it’s important because it allows a greater variety of users to obtain information regardless of their individual needs. It’s not just designed for the disabled, it’s for everyone. Throughout this experience, I start taking accessibility design as one of the design principles in my future work.
