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.
Writer’s guide at Pearson Writer was rudimentary, outdated and hard to search. Last updated was in 2012. This section was lacked resources site features such as efficiently search, quick search result locating and up-to-date visual elements.
I was asked for re-skinning and recreating a good user-centered user experience and nice-to-look web app. In addition, I required to think of creative user experience solutions to reconstruct the information architecture to comply a user-friendliness new application attracting users and convenience to use.
Experience Strategy & Vision
I worked as a user experience and interactive designer while being responsible for recreating visual user interfaces. I created wireframe, users flow, mockups and prototype to share the vision, design principles and content strategy. This helped the team to evangelize ideas, gain alignments and drive decision making.
Students Insights & Ideation
In the initial stage, the Product manager helped me understand the users’ needs and product objectives. Later on, I partnered with Product manager and 2 other UX designers(mobile focused) to uncover insights and translate up-to-dated visual and UX concepts into features that address students expectation and motivation.
Coordination & Oversight
I designed across and worked alongside Product manager, 2 UX designers, Prototyper, UX writer, Technical project manager, and UX researchers, cooperated and communicated across different teams finally delivered the redesign to market with good satisfaction.
The new design launched globally on Dec 05, 2018.
Since 2016, the marketing sale of the product have declined. More and more writing products launches in industry. For Pearson, seizing the opportunity and increasing the marketing share to attract students and professionals using this writing, evaluation and research tool is important.
Our challenge was to evolve with customers, including students, professionals, professors and enter the highly competitive on-demand writing products segment in the U.S.
At the same time, we need to recapture the design magic in 2 months. The Writer’s guide section required totally re-skin and re-architecture. Company’s style guideline was not enough to provide clear and specific guidance, so most of the UI elements need to design from scratch. Final implementation and development cost about 6 months in total, including vendor migrate, function and feature implementation.
The UX Design Process
In the first phase, understanding and analyzing the old design version was very important. As for a redesign section, understanding what users’ pain points are and viewing the statistics that gathered from users’ feedbacks are a necessary step for me put myself into users’ feet and think about a good new user experience design for them.
Below are some of the old design and some problems findings. The problems analyses based on old users’ feedbacks as well. It analyzed together with the product manager, other 2 UX designers and learning specialist.
The Problems Analyses in Old Writer’s Guide
After the problem analyses and understanding the objectives and purpose of this section, I started work with other 2 UX designers to work on design.
I created two versions of the design layout and several UI elements. Writer’s guide is a search database for students searching for writing resources. Before started working on the design, I did research to explore users’ mental model about search functions. After several-round sketch wireframe and idea exploration, I made the decision that we directly showed search results in the page when users choose a category or type keywords at the search bar from the landing page. The old search method was redundant and time-consuming. I wanted to provide convenience and guidance for users to quickly find what they want.
For Version 1, it only showed the selected top-level category and separating the other top-level categories below it. The purpose was clearly to provide filter function for the selected section so people were able to jump to other categories as they want. On the right of the page, all the contents from the selected top-level category were displayed and listed by name. However, this version doesn’t combine all top-level categories on the filter sidebar together, people may misunderstand the different purposes of the two parts on the left sidebar.
For version 2, I combined the all the five top-level categories on the left sidebar. Once people selected one of the categories from the landing page, they would see all the related contents showed on the right while the left category and its submenu opened for it. The left sidebar severed as a filter. people were able to jump to other top-level categories and browse resources easily. On the right of the page, each resource has its own tag which showed the different type of resources. Above the right contents section, the sort by the function severed for sorting by resources type, title, and etc.
The Version 1 of New Design Exploration
The Version 2 of Design Exploration
Some Style Guide and UI Elements
During the same time, I also built part of the style guide for creating a integrated users interfaces and user experience design. Although we had a Pearson UI guideline, we still needed some UI elements specifically used for Writer’s Guide specific requirements. Below are some of the UI elements that we created for the Writer’s Guide. For example, you can see some of the icons redesign (credit to:Nicole Nishimoto, who was the mobile design worked with me) were built based on the Writer’s Guide needs. While, the search box and dropdown menu were built from scratch by me.
Final Decision Went With Version 2
I had several meetings with Product manager, UX managers, UX designers, user researchers, UX writer and learning designers to discuss and decide which layout would be used for our case and would be the best fit for the users’ expectation, and was able to solve their pain points at the same time.
We all agreed that showing the search results directly on the right screens was a good solution and it is fit for users’ search mental models and expectation. However, we had some arguments about the two versions of the design and layout. Some of them like the version 1 and some of them feel the version 2 by showing an integrated sidebar made the page simple and clear.
Finally, after 1 month’s back and forth discussion and meetings, we decided to go with the version 2 and removed the thumbnail view mode in old design. The reason was that our resources content picture/thumbnails didn’t provide a clear and useful information, and we weren’t able to update/change all the pictures/thumbnail at each content.
Search Functions User Screens
The search function is an important part and plays a critical role. Designing it well or not directly influences the bad or good of users experience in Writer’s Guide.
For the search function exploration, I added the history search, suggestion search based on different category contents, because those features are mostly useful functions helping users quickly get results and correct their mistaken search. Also, in the search results page, users would be able to see the search results numbers and knew how many search results are. On the left sidebar, the layout is keeping consistent with the last categories screens and it played the same as a filter functions. On the right side of the search result page, it also kept with the same layout, displaying sort by functions in the top bar. The sort by function 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 correction which was a right word suggestion and it also demonstrated relative 2 related words search contents. If users typed an unreadable word, they got advice to try a different word and check your spelling, and etc. Also, in the content page, people can always search a different keyword in the top search bar and each search action accompanied with history suggestion and category search suggestion. It would help users quickly land on expected contents.
Search Results Various Suggestion and Search at Content Page
The other screens include the error message page and some quiz design pages that used for users to self-test the learning materials.
In the quiz pages, the progress bar can tell users how many questions they left and quickly get location feedback about where they are and the answer history of correct or wrong answers they’ve made. The black tooltips would also provide users location hint with showing question number and easily for them to review back.
Those feature screens made the user experience of Writer’s Guide as a whole and integration.
The responsive design is an important part of web design. As you know, the responsive design would make users are able to browse the website at phone and tablet. The size of the responsive screens goes with 768px as a tablet size and 400px as a mobile size.
What I learned
Design Well Is Only The Beginning
We’re often say when design well, considering the information architecture and usability, evaluating users feedbacks, having visualized user interfaces and happily interactive sites, the UX job is done. However, when all of those parts finish, the job is kind of just started. 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 we go to implement, cooperating with accessibility specialist, UX writer, software engineers and front-end developers, there are many unexpected things need UX designers to pay attention, iterate, arguments, negotiates and maybe compromise somehow. I had a difficult time when I presented my design to my accessibility specialist. Basically, the accessibility required screens have readable labels, descriptions and visual indications on the screen so as to let the disable, screen readers and low vision people to be able to use our app. When it went to implement, the accessible function also needed my attention to iterate some details at design so that the accessible functions would work well. It was always challenge when I considered the UI simplicity and accessibility compatibility.
So, if you ask me if design well means completion, I would say no. I would then tell you design well and consider usability and accessibility are the first step and a good start, but not the end.
What You Learned from Challenges Is Most Valuable Treasures
I would say challenges during the negotiation and discussion process are the most valuable treasures. What you learned and carefully thoughts and what you comprehend would bring you a huge next improvement. Even though there’re always coming with iteration and challenges when UX design goes into integration with implementation, accessibility and usability. Every re-think and every carefully decision made would inspire a next good release and numerous self-improvements. Believe that every considerable UX and UI design and decision-making would always be appreciated by users and co-works . You will gain a lot from these challenges and every accomplishment.