Writer’s Guide Product Design
Pearson Writer is a revolutionary digital tool for writers at all levels. Available online and mobile app, it streamlines the tedious and time-consuming aspects of academic writings, so users can focus on the writing projects and resources at hand.
Writer’s guide is a perfect resource for students, instructors and professionals to write any types of writings, such as paper, assignments, emails, essay, etc, by checking the resources for grammar, research and writing support at Writer’s guide.
The user interface of Writer’s Guide was rudimentary, outdated, and hard to navigate
The last update of user interface design was in 2016.
This search feature lacked usability
Users cannot quickly navigate to their search content by using the old search function.
Undesired UI and Complicated Functions
I required to think of creative user experience solutions to reconstruct the information architecture, so the product would retain current and attract more.
My Role and Responsibility
User Experience Designer & User Interface Designer
I worked as a user experience and interaction designer. I was responsible for recreating clear user interfaces.
I designed wireframes, users flow, mockups, and prototypes to share my design vision, user-centered principles, and clear information architecture content strategy. I evangelized UX ideas to the team, drive UI alignments with company guidance, and make UX decisions.
I actively involved in the actual design of the product and works very closely with the product development team. I participated in the development of engaging, usable, and beneficial interactions for the user through the business product
Collaborator and Communicator
Since it was my first project, in the initial stage, the Product manager helped me understand the users’ needs and product objectives. Later on, I cooperated with 2 other UX designers(mobile-focused) to uncover insights, and communicate UX design and interaction design considerations to different audiences, including engineers and management, prototyper, UX writer, Technical project manager, and UX researchers.
The new design launched globally on Dec 05, 2018.
03/2018-06/2018 3 months of design
05/2018-12/2018 5 months of implementation
Competitor Arise in the Market
Since 2016, the marketing sale of the product had declined dramatically. More and more writing product competitors lived in the market. For Pearson Writer, seizing the opportunity and increasing the marketing share to attract students and professionals using this writing, evaluation, and research tool is important.
No responsive design. UI design lack of contrast
No responsive design at the tablet and mobile size screen. Most of the user interface design was out of date and didn’t follow the updated Pearson branding guidance.
Tight Scope of Time
At the same time, the design needed to finish all front-end works in 2 months. It included research, user interface design, visual design, design iterations, discussion and etc.
The UX Design Process
In the first phase, understanding and analyzing the old design version was very important. As for redesign the whole user experience, understanding what users’ pain points are and viewing the statistics that gathered from users’ feedback is a necessary step to put me into users’ shoes and think about a good new user experience design for them.
Below are some of the old design and some problems findings. The problem analyses were also based on old users’ feedback got from learning design research. I analyzed together with the product manager, other 2 UX designers and user experience researcher.
The Problems Analyses in Old Writer’s Guide
After problem analyses and understanding of the objectives and goal of the redesign, I started brainstorming and worked with other 2 UX designers for it.
I created two versions of the design. Their differences were content layout and information architecture. The left sidebar was a major difference. Writer’s guide is a search database for students searching for writing resources. Before I started working on the design, I did a few research exploration about users’ mental models, collected and compare data about this feature in the marketplace.
For Version 1, the contents on the left sidebar were two sections. In the top part, the panel showed lists of categories with subcategories, serving as a filter function. In the bottom part, the panel showed different topics for users switch to a different topic. On the right side of the page, all the resources immediately filtered out by the list item chosen on the left. Also, users can sort out the resources with alphebetic order, ascending or descending. However, this version divided left navigation into two parts. People may easily miss the bottom part at the left sidebar because of a visual block. The usage of it would be low.
For version 2, I combined the top and bottom parts categories and put them together on the left sidebar, because the two parts had some information connection and actually were in a group before. On the right of the page, the same as version 1, it has sort function and bookmark feature, with a more clean look.
Version 1 of New Design Exploration
Version 2 of Design Exploration
Some Style Guide and UI Elements
During the same time, I also built part of the style guide for integrating user interfaces and user experience design. Although we had the Pearson UI guidelines, we still needed some UI elements specific use for Writer’s Guide needs. Below are some of the UI elements that we created for the Writer’s Guide. For example, you can see some of the icons, which were redesigned, (credit to Nicole, my mobile designer who closely worked with me) for Writer’s Guide icon needs. While, the search box and dropdown menu were built from scratch by me.
Part of Style Guide
Final Decision Went With Version 2
I had several meetings discussion with my Product manager, UX managers, UX designers, user researchers, UX writer, and learning designers about which of the versions to go and which of the layouts would be the best fit for the user needs and expectation, and to solve their pain points.
We all agreed that showing the search results directly on the right screens was a good solution and it is fit for users’ search and expectation of users. However, we had some arguments about the two versions of the left sidebar.
Finally, after 1 month’s back and forth discussion and meetings, we decided to go with version 2. We also decided to remove the thumbnail view mode from the old design. The reason was that content picture/video thumbnails weren’t clear and useful, and we weren’t able to update/change any of the pictures/thumbnail at that time.
Search Functions at User Screens
Building the search function is one of the most important parts of this reskin design. It was a new feature. I needed to clearly tackle on. Designing it well or not directly influences the overall user experience in the Writer’s Guide.
After several-rounds of sketch wireframe and idea exploration, I made the decision that to add a function of showing search history, search suggestions while users typing on the search box. It was important for users to have a fascinating search experience. Also, it would show the recommended search results if users type the wrong word and started a search. Users would be able to see the search results numbers and knew how many search results are.
In the search results page, the layout is keeping consistent with the above screens. The left sidebar, it played the same as a filter function. On the right side, it displayed the search result contents. The sort by feature provided the ability for users to sort with resources type, title ascending, relevance(high to low) and etc.
Search Function and Result Page
If users misspelled a word, users got a recommended correction which would demonstrate 2 relevant words. If users typed an unreadable word, they got advices on trying different words and check spellings, and etc. Also, people can always search a different keyword by inputting another text in the top search bar. They would get a same search experience in the dropdown menu, like seeing search history and got keyword suggestions. It helped users quickly find the thing and landed on expected contents.
Search Results Various Suggestion and Search at Content Page
The other screens include the error message and some quiz design. The quizzes design was used for students to do self-testing about the learning materials.
In the quiz page, the progress bar told users how many questions they have and left. Users got correct and wrong answer visual indicates in the progress bar for record-keeping. The black tooltips provided users question number when mouse hover it, so it was easy for them to do a review.
All of the below screens made the user experience of Writer’s Guide as a whole and integration.
The responsive design makes web pages render well on a variety of devices and windows or screen sizes. As you know, the responsive design would make users are able to browse the website at the phone and tablet. The size of the responsive screens goes with 768px in a tablet size and 400px in a mobile size.
What I learned
A Good Design Is Not the End
We often say creating a beautiful design, considering the information architecture and usability, evaluating users feedbacks, having visualized user interfaces and delightful interaction sites, the UX job is done. However, when all of those parts finish, the job does not end. Let me explain why.
I value simplicity, focus and utility. I aspire to make people and users happy by designing experiences that just get out of the way. When design goes to implementation or collaboration with team members, such as accessibility specialists, UX writer, software engineers, and front-end developers, etc, there are always unexpected things and arguments that needing UX designers to keep an open mind, to think, to listen and to smartly ask questions. It may require iterate design, take discussions, negotiate with stakeholders and make compromising somehow. For example, I had a difficult time when I presented my design to my accessibility specialist. As for accessibility standpoints, they always wanted to have readable labels, descriptions and visual indications showing on the screen. It conflicted with the simple and clear UI design that kept in my mind. Beautiful or accessible? This kind of questioning situation happens all the time. It kept me to learn, to explore accessibility unknown and to ask for help from team members. Embrace the challenge and always keep Learning would help you successfully overcome the changes and pivot quickly.
Always Appreciate Feedback, Even If it’s Negative
We feel challenges and discouraging when we heard negative feedbacks. Why did they have a negative experience? Use every interaction as a learning experience. If someone went out of their way to tell you why they hate the product, and there must be something you can improve upon. Use the interaction, as unpleasant as it may be, as a learning experience. What makes it better is the attitude towards receiving it.