Text Editor–Design Component/Design System

Overview

Since October 2018, we started building our design components library for the Global Learning Product team at Pearson. The goal was to create standardize UI and consistent function for the design team and engineer team to reuse and to construct an accessible, reusable and adaptable design components for 7 product teams at the learning application team.

Challenge

• Requirements gathering difficulties. It’s hard to gather design requirements from 7 product team and think of a generalized design strategy because the business requirements were slightly different in each of the team. It was not easy to come up with a unified design strategy to accommodate all team needs.
• Difficult to scope the project.  Since we had different requirements from each team, it was difficult to scale down the piled of demands to the most-wanted demand. It was also challenged of finding the best solution and be compatible with usable and accessible.
• Lack of specification deliverables. The team of the shared components was a new team since 2018, each of the designers in this team was also on other duties.
• Time Zone Challenge. The development team is in Sri Lanka. Since the time zone is very different, communication was challenging and information mismatched.

My Roles and Responsibilities

1. I was the UX and UI designer, lead the shared component design.
2. Lead the design from exploration to final launch.
3. Created visual standards and guidance.
4. Ensured component design and functionality consistency on 7 design team.
5. Communicated UX progress and assured design pixel-perfect in front-end work at the development phase.

Users and Audience

Scope and Constraints

• Scope: Built an aesthetic, reusable, and accessible text editor. It should accommodate the use of cases in the current 7 products. Some teams needed a whole feature of text editor, which allows editing text, paragraph, and image as flexible as they can. Some teams only needed basic editing features, such as bold, indent, and bullets to do basic text editing.

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 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 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 it 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 to learn about the alternative text.

The Final Decision and Design Revamp

I cooperated with the 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 field of alt text was activated, the label of the alt text in the input field also interpret some meaning of alt text. Additionally, 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 successful.