National Geographic Learning K2 Overhaul

View project role and accomplishments summary

The Opportunity

Nat Geo Learning rocked the print game but needed digital experts to help carry their education interface into today. As the Sr. Product Designer, I collaborated with students and teachers at grade K-12, as well as internal stakeholders, to create a more useful, engaging, and age-appropriate e-learning platform through research, user feedback, ideation, illustration, design, and copywriting - despite severely limiting development constraints. Our findings allowed students to focus on learning the content, instead of struggling with how to use the interface. I was able to learn the language of our young users, which was incredibly fulfilling. I identified and integrated user-centered, digital design-thinking into the organization, in collaboration with other departments and design team members.

My Role

Senior Product Designer:
‍
• UX Design
• UI Design & Illustration
• Copywriting
• User Testing
• UX Strategy
• Design & Functional QA
• Product Management
• Process Improvement

Constraints

• The company had very little experience working with a design team that focused on a digital platform, so much was needed in the way of integrating design ops and digital design-thinking. This was a ripe opportunity to create everything from scratch and do it right.
• We started with very small amounts of qualitative or quantitative data, and gathering data was challenging given the age and access to our users. But we were scrappy and figured out a way!
• The original user experience was designed for Higher-Ed students.
K2 students have unique cognitive abilities, comprehension skills, and ergonomic needs compared to older learners; so it was an exciting challenge to optimize our site for children.

Accomplishments

✓ Lead UI, UX, brainstorming, copywriting, mascot illustration, and design system creation for the major overhaul project of our Kindergarten through 2nd grade student and teacher e-learning interface, in an effort to create a more appropriate and useful experience. Used research of —and user testing with— young users to help guide my decisions and push for a better experience that helped shape minds and let students focus on understanding the content instead of how to use the interface.
✓ Created and wrote a visual story in website form, to help evangelize and communicate the K2 overhaul project to senior executives and colleagues.
✓ Aided in launching several profit-generating features for our high school e-learning platform.
✓ Created positive, successful, and engaging experience for users, per user tests, despite multiple development and architectural constraints. Results from usability tests indicate that usability of system was highly successful, often resulting in 100% success of task for children as young as five years old.
✓ Introduced the print-based team/company to digital UCD and UX principles and workflows, directing the company to the inclusion of these principles through example and UX evangelism.
✓ Introduced, created, and evangelized internal process streamlining through software such as Abstract (version and design file control), Airtable (for logging new ideas, product challenges/solutions, team retrospectives, personal task organization, and design debt), custom Heuristic and Competitive Evaluation templates with scoring mechanisms, and design-to-dev and design-creation workflow-improvement documentation in Sketch, JIRA, and Confluence.
✓ Created all wireframes, visual designs, prototypes, copy - and often lead our design workshops - for our e-learning products for users from grades K-12. I conducted functional and visual QA during development.

Student & Teacher Product Research, Data Analysis & Ideation

Researched the digital landscape and analyzed current platform data

I, along with a few other designers, conducted generative research such as competitor examination, heuristic evals on our current platform, and talking with our student and teacher users. We then gathered qualitative and quantitative data from our existing site that gave us valuable insights.

In order to learn about the needs and motivators of our specific niche user groups (children ages 6-10) and K12 teachers, I conducted research to find out more about the way they think. Young students have unique cognitive abilities, comprehension skills, accessibility and ergonomic needs compared to older learners. It was fascinating to learn the unique way a child sees the world and how they absorb and process information.

After evaluation, we ideated

Once we felt confident in our findings, we played, explored, and mocked-up several concepts. We then evaluated and measured every concept against our goals and refined and iterated the strongest concepts. My design met our goals successfully, so we moved forward with my concepts. I created interactive prototypes in prep for several rounds of user testing.

User Feedback

We tested our design ideas with students and teachers. If you've never user-tested a six year old, I highly recommend it. Fingers go up noses, crying usually occurs, and sometimes you witness an excitement for learning that's hard to beat.

We tested two prototypes with certain key objectives in mind:

• Are the interfaces clear, intuitive, and predictable?
• Is the meaning, tone, and voice of language understandable?
• Are the interfaces engaging and delightful?
• Is the purpose of every screen understandable?
• Did K–2 students believe the UI designs were made for them?
• Generally, which of the two UI prototypes was preferred?

Design System

Introduced Design Theme and UI Kit

I designed a K2 UI theme and universal UI elements to reduce inconsistencies and save designer and engineer time and company money. I focused on creating larger and more appropriate font, brighter colors, more literal icons, clearer affordances in things like buttons and forms, and wrote copy that spoke to students in a way that was understandable to them. Many of our users at this age group were not yet 100% literate and didn't read fully written sentences, so copy revisions were vital to the success of comprehension of the content.

I then worked with the design and engineering teams to establish a Sketch version and a live Storybook UI Design Library.

Once the design system was complete, I implemented our kit into Abstract, a version control software, to manage the library, track changes, and ensure consistency across usage; and then trained the entire organization how to use Abstract.

Psychological Principles of Visuals and Workflow: Simplifying, Personalizing, and Gamifying

Helping students focus on the content, not how to use a bad interface, helps them retain more information

Our youngest user group, ages 6-8, were using a college-level interface. Based on my research of young students, I learned that this group has unique cognitive abilities, comprehension skills, and ergonomic needs compared to older learners. I brightened the colors, made icons more literal, wrote copy in a way that related to them, increased font size and changed typography, made affordances larger generally, simplified workflows, personalized the content so it felt like the system was talking directly to them, added gamified experiences, and created a mascot I named Hooty to help guide kiddos through the content.

Responsive Desktop & Tablet Design

According to our research, our users were primarily desktop and tablet users

In order to meet students where they are, we created a desktop-to-tablet responsive site. Responsive design was new to Nat Geo Learning, so this required a fully , which we backed up with quantitative and qualitative data to justify the cost to the company.

Internal Process Streamlining

I created and guided digital UCD and strategic thinking in an effort to promote management, prioritization, and optimized communication inside a primarily print-centered organization.

National Geographic rocked the print game, but needed some guidance on how to transition from a primarily print-first organization to a digital-first one. I collaborated with my Creative Director and our print team, as well as with other departments across the company (product, engineering, marketing, sales, etc), to create and integrate improved processes for implementation of digital solutions and streamlined design team workflow. This included creation of workflow documentation, design debt logs, design JIRA streamlining and management, testing optimization logs, retrospective platforms, and more.

THERESACHARLESTON

Nat Geo Learning K2 Site Overhaul