Share Component for Text Editor

Overview

In Pearson, the Global Learning Application team is expertise in teaching and learning services powered by technology. The learning applications team, where I work for, has 7 learning products. Each of the products tackles different learning and education issues, serving different target users. Our mission is to help learners reach out to learning goals at all levels.

Since October 2018, we started building our internal design components library. The goal was to keep UI, visual, code and functionality consistently across all of the learning products, bring a union and standard user experience to people who use Pearson products as a whole. The share components would also help the engineering team save coding time while building the same functionality across multiple products. The requirements of the design component collected based on the 7 products’ use case, product needs, and business requirements.

The purpose of the design effort is to construct an accessible, reusable and adaptable design components to help different product teams build UI and functions consistent as much as they can. At the same time, my goal includes contributing to UI guidance to Pearson’s larger visual/UI library.

 

Challenge

1. It’s hard to gather specific design requirements from each product team because of different team velocity and product business requirements. Besides, it’s difficult to scale piled of demands down to the most-need demands, finding the best solution, and be compatible with usable and accessible.

2. Loss of the concepts and very broadly defined deliverables, and sometimes lack of clear definition on the requirements of components.

3. The development of multiple components is in one repository, with building dependency trees and versioning, which was challenging. There always some adoption issues, required global discussion with Sri Lanka team, the time zone and miscommunication is always challenging.

Roles and Responsibilities

I was the UX, UI and interaction designer, mainly charge on the component design. I built the UI library and pixelized visual pattern and created the interactive hi-fi prototype to show user flow while ensuring the tactical user experience deliverables. My responsibilities included present the design works to the product teams, stakeholders, and software managers, and let them buy-in. Also, I created UI standardization and guidance for all product designers to seamless adoption. I assisted with the user research team for usability research and testing. I supported the software development team to make pixel-perfected front-end work and built expected functionality in the back end.

Users and Audience

Students and Professors in all of the higher education, including university, college, institution, Professional learners, and business consumers.

Scope and Constraints

This component was to build an aesthetical, usable and accessible text editor. We had 4 products that use text editors for users’ input and edit assignments, notebook, etc. They had different user demands and usage. Some teams needed full features of text editor allowing editing the texts, paragraphs, and images, as flexible as they can. Some teams only needed basic editing features, like bold, indent, bullet, etc, to do some basic text editing.

However, there were constraints that not every team was clear about the scope and user demands. We couldn’t depend on the sufficient user requirements supplied by each product team to rebuild the functions. Thus, we mostly focused on rebuilding the UI of the text editor and making some functions and user flow consistent and accessible. To build up a component environment for designers and developers to collaborate efficiently.

Processes and What I Did

1. Gather Design Specifics and Requirements from Product and UX Designer

I gathered the old text editor design and basic requirements of the text editor, possible features and functions from the four products and UX designers. I created a document represent screenshots and current UI design, requirements, and functions in the Mural board.

Old Text Editor Design of 4 Products

What did I do?

The process that I took was to talk with different UX/Product designers of each team and then discussed the component requirements and needs in our weekly UX team meeting. I worked with a senior UX designer collaboratively gathering all the feedback and thoughts through email, 1-on-1 meetings, and team meetings.

2. Ideation and Researching

I took charge of design on this stage. I sketched out the idea. I researched a lot of similar components and looked for all the possible solutions and examples in the market. I compared the similarities and differences from the materials I found, then I found out a solution that matched the needs and expectations most.

Then I started to design the wireframe in Sketch.

3. Build UI/Visual Library Design in Sketch

Based on the different use case and business requirements, I created two versions of designs. One is a simple version, which is only with basic text editing menu lists, like bold, italic, underline, indent, etc. Another version is the elaborate version. It served for the larger text editing purpose for complexity product use cases and demands.

 

4. Discussion and Revamping

When the first-round design completed, I presented the design solutions to my internal team and external stakeholders, Engineers, and large UX team. To get their review and buy-in. Then I revamped the design based on the feedback.

5. Style Guidance and Anatomy Creation

Once the first round of design has signed off by all the stakeholders. I created the pixel perfection design and build UI guidance for designers and developers to reference the visual details.

6. Behavior and Accessibility Guidance

I built the behavior and accessibility guidelines for functionality and accessibility purposes.

This process involved checked with the accessibility team and then presented the accessible keyboard solution to software engineers and managers buy in.

Image Uploader Function Build and Testing

1.Overview

When we succeed promote the visual guidance of Text editor to the entire team. We got a new request from the engineer manager. He wanted us to build a standardized user flow guidance about image uploader behavior in the elaborate version of the text editor, keeping it accessible, usable and aesthetics.

2.Visual Design and Functionality Flow

I created two versions to represent the possible solutions for the image uploader at the text editor. The differences of the two versions were layout, interaction, and toolbar position.

Version 1-Floating Editor Menu Over Image

When users upload an image, they will get a floating menu over the image. The menu contains all of the image editing functions and allows them to do the image editing visually close.

 

Version 2-Top Menu Bar Change

When users upload an image, the top text editor bar change to an image editing bar. The functional icons are in the same location, but the icons list changed.

 

3. Accessibility–Building Alternative Text for Image

Why did we need it?

In order to make sure an uploaded image is accessible, we need to have an alt text input filed for people to add the alternative text. For vision-impaired people, they will rely on screenreaders to read about the alternative text being inputted to the image.

What’s My Design Solution?

I created the accessible solution adapted to the above two design versions. When users upload an image, a dark bar showed in the bottom overlaying the image as a reminder for the regular users to add an alternative text. The regular users would be notifiable by the contrast visual difference. Besides, the Alt text icon showing in the first place would make the accessibility purpose stand out.  Once users added the alt text, they would see the alternative text be added in the dark bar at the bottom of the image. To edit it, users can either click the translucent dark bar or click the “alt text” icon in the floating menu or the changed top menu bar when selecting the image.

Version 1-Interaction Flow-Alt Text Add and Edit

 

Version 2-Interaction Flow-Alt Text Add and Edit 

 

4. Usability Testing-Guerrilla testing

In order to find which design is better and fit most users’ expectations. We worked with our user researcher team had a Guerrilla testing.

Why did we take the Guerrilla testing method? 

Guerrilla testing is a means of gathering user feedback by taking a prototype or a design into the public domain and asking passersby for their thoughts. Due to its simplicity, new ideas can be tested quickly and at a low cost. We also need some fresh pair of eyes on the solution and people’s thoughts on this component, no waiting around for recruiters to find people.

What did we do?

We performed the in-person testing session at a Pret A Manager store near Pearson Boston office at the Boylston Street, MA. The session lasted a day. We set up a testing environment and designed a poster to attract people to stop. The session was facilitated by one UX researcher and a note-taker in-person.  The session time was around 10 mins for a person. People were the customers who showed an interest and no rush to buy food at Pret A Manager. We reached out to 13 people ranging in age and technology competency. Participants viewed each version of the prototype carrying out a set of tasks including Adding an image, Insert a link, Adding alternative text, Editing text. We switched the order of versions presented for each participant to avoid any bias in our study.

 

5. What was the result?

Overall, the consensus among the majority of participants preferred the version 1 with the floating pop-up menu. The numbers were 8 participants preferred version 1 and 4 participants preferred Version 2.

Performance across two versions was generally easy for participants to complete.

One of those who preferred Version 1 claimed: “the other one has too much going on. with version 1, it’s more intuitive to know how to get out of it.”. In version 2, some did not notice the menu had changed which spurred confusion. Another participant said,

6. Modification After Testing

The testing results found out that the majority of people had no experience with an alternative text. Most of them didn’t know what the Alt text was until UX research explained to them. Thus, it could be beneficial to add some sort of instructional/informational popup that attracts users’ attention to “Alt” and explains the meaning to encourage use.

What did I do?

Accessibility Refine

I reached out to accessibility experts again after we received the usability report results. We had a meeting. He mentioned some accessibility points which were very important and we missed to put in design last time. For image accessibility, we needed to provide a “mark as decorative” selective option for users to choose from. The decorative text can be ignored by the screen reader.

Usability Refine

In the testing, we found out the majority of the participants didn’t know what the alternative text is. The number of unknowns was 12 of 13. It took a giant percentage. For a user experience design, I needed to think about the usable ways to teach users learn about the alternative text.

The Final Decision and Design Revamp

I cooperated with UX writer, created a friendly wording located at the bottom of the banner right after users upload an image. The friendly reminder would let users know about the alternative text and remind them to add one.  When the input filed of alt text was activated, the label of the alt text in the input field also interpret some meaning of alt text. Additional, I added a “mark as decorative” checkbox below the input filed of the alt text. Next to the “mark as decorative”, it had a tooltip for users to hover over and learn about the meaning.

The user flow shows below:

 

Summary

  • It is always good to have some alternative design solutions and make some comparisons, even for the small design elements. However, designing alternates also cost time and effort, so we should consider the balance of time and cost smartly. Also, it will be good to test the different design versions with a group of users to quickly understand the thoughts.
  • I always appreciate every usability testing and accessibility checking, because the design would become authentical and user-centered, instead of designer/stakeholders centered.
  • Building share components for different products team requires good collaboration and communication. It is always good to keep timely design updates around the team. Good collaboration and communication will make sure works success.

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *