Pattern Library

The Common Learning Pattern Library provides static and interactive patterns. It offers authoring tools for editors to create learning materials and then publish them on the eBook. The students will interact with the patterns from the eBook.

Challenges

  • Patterns need to be highly reusable and customizable for all learning content, such as Literature, Social Science, and Math.
  • Pattern's styling must meet three student age groups' needs.
  • From portrait mobile to large desktop, each pattern needs six breakpoints for responsive and adaptive design.
  • Meet pedagogy requirements and WCAG 2.1 standard.

Responsibility

Took a lead UX/UI role to fulfill a life cycle of a pattern design: from user research to user flow, wireframe, prototype, UI design, production and user testing. In addition, I designed and updated the pattern library website.

Accomplishment

Over 100 patterns were designed, and 25 were developed with three versions.

Tools: Sketch, Axure, Principle, Indesign, Illustrator, and Wordpress.


Design Process

Step 1: User Flow

Example: Text-based Multiple Choices Questions

I user flows to capture all behavior paths, including user actions, interactive feedbacks, and constraints. The purpose was to scoping the functionality for both student interface and authoring tools.

Step 2. Student Interface - Wireframe Prototype

Example: Text-based Multiple Choices Questions

After creating a wireframe to capture the user flow, I provided a high-fidelity prototype to detail a step-by-step user behavior. It ensured the design met the user needs and pedagogy requirements.



Step 2. Student Interface - Interaction Design

Example: Table-based Drag and Drop

I designed user interface and interactions from entering the default page to finishing the tasks, along with UI elements design and transition options for further production.

In this pattern case, the student needs to drag and drop an item to a table (6 rows and 6 columns). The drag item options are a label (example), a long text, an image, and a number. I provided a scrollable table with a fixed drag area to make sure the user can easily navigate the table.

Step 2. Student Interface - Responsiveness

Example: Table-based Drag and Drop

The students can access a learning pattern on their phones. In this example, the technical problems were placing a scrollable table with a fixed drag area on a scrollable web application. I provided a solution that triggered the pattern to a full screen, so the double scrolls and bottom fixed position problems were solved.


Step 3 Authoring Interface

Example: Image Hotspot

Based on the content creation needs, and the author's needs, I created the user flow for each pattern's authoring interface to lay out the features, its sequence, and interoperation. In doing so, I fundamentally determined the development needs.



In this pattern case, the author wants to create a different length of content for an image hotspot pattern and the flexibility to give (or not) an order to each hotspot.

My design provided content type and hotspot order options, easing the placement of hotspot and linked content.

The design patterns were later on added into the authoring tool library.

Step 4. User Testing

Once 25 patterns were developed, I led the user testing project from planning to execution, sharing reports and running workshops for design improvements.

Step 4. User Testing - Preparation

Step 4. User Testing - Testing Process

13 users participated in user testing on a tablet and a phone. All users were encouraged to make a correct response at first, then explored other options for testing the pattern usability. They completed the pattern functionality rating and answered 5-13 questions based on the pattern characteristics.

Step 4. User Testing - Report

I presented user testing results to stakeholders and shared 11 user testing video records, an observations sheet, and user feedbacks.

Step 4. User Testing - Improvements

I ran workshops with engineers and a content strategist to analyze the testing outcomes for each pattern, in-depth discussed the feedback, which led to a version 3 development plan.



From the testings, I found some students tried to go back to compare their answer to the correct answer. So I added an answer comparison feature to all practice patterns, the students could skip it if they wanted. It was a significant update for the pattern's functionality. See user flow as an example above.

Step 5. Pattern Library Site

I designed the site map, wireframes and all pattern pages (including updates and maintenance) for the pattern library, helping other product designers, product managers and engineers to check for references.

Step 6. Pattern Customization Training

Other product designers were encouraged to modify the pattern design to meet their content requirements, and user needs. I created customization examples and provided training sessions to help these designers speed up adaption and keep the design consistency.