The HMH Player app was awarded 3 awards in the education technology field.
2016 Glowing Screen Award for the HMH Player. Awarded for outstanding UX/UI design for schools and districts transitioning to digital curriculum.
2015 Winner of Award for Excellence for the HMH Player,
Tech & Learning Conference
2014 ISTE Best of Show for the HMH Player,
Tech & Learning Conference
I have a passion for creating the optimum user experience based on research insights. I Coordinated and managed user testing across products. The testing methods were both live moderated 1:1, online self-moderated tests, and classroom observation.
Managed usability testing with vendors and in-house lab.
Set up an in-house usability lab
Facilitated “team“ training sessions that included role-playing and constructive feedback
Create a cross-location user testing team. Met biweekly to share test results, new techniques, and process ideas.
Formulated a “friends and family” recruiting model for student participants. The database has been instrumental in providing student participants who have valuable insight into our products.
Developed protocol and results templates for the online testing tool UserZoom.
Initiated and managed classroom observations at a local elementary school. This provided opportunities for designer and marketing teams to observe teachers and students interacting in their environment.
The Boston based usability Lab tests the "Friends & Family" GRK-12 students. All student participants are encouraged to explore the user interface and share ideas.
After larger user tests, the team has a workshop to determine high-level findings.
Recruit, build, and execute online tests.
This progressive school used the workshop model which influenced the physical setup of the classroom. All classrooms had a large area rug where the students sat at the beginning of the class.
I create many types of document output for the design thinking during a product's development process. This allows us to determine touch points, discover opportunities, and keep everyone up to date with the latest thinking.
User flows help facilitate discussion in workshops. This is especially helpful on video conference calls. I place the flows in a grid with numbered rows and lettered columns.The team can reference the screen's number and letter to keep everyone on the same screen when discussing ideas.
The journey was to capture a typical day of a student and their touchpoints with the digital content, the device used, and if the device was online or offline.
The blueprint is a deeper dive into the typical student school day. Captures what is happening "behind the curtain".
The current challenge is implementing rapid user testing within the product development. The ideal cycle process integrates user testing into sprints. The goal is to align and track the user test tasks in the sprints. Ultimately, ensuring the implementation of the user findings during development.
Team member, Joe and I workshopped a workflow that includes user testing from the beginning of the development cycle to the end. Resulting in the immediate implementation of user test results in the development of a product.
A mental model was used to capture student behavior and their needs. This student mental model is aligning a users experience when accessing 3 different types of content.
The purpose of this exercise was to map out and align multiple products features. Then identify gaps, opportunities, and redundancies. The last 2 columns list the common feature and the differentiating ones.
Prototype screens and flow.
The task flow identifies the 3 entry points to the content.
User flows were also used to capture messaging and redirects.
My Notebook is a note and image storage feature for students and teachers. The notebook allows students to write notes within the context of the eBook or in the app and save to their notebook. The teacher capabilities allow the teacher to write a note and share with students. Both teacher and students can comment on notes being shared. The commenting on shared notes is the most basic form of communication without building out a messaging app.
We determined the high-level capabilities such as create, share, and edit a note in a folder.
link to prototype: https://xgt0r0.axshare.com/#c=2
We determined the user must have access to the Notebook from any location in the application. The links were added to the top navigation submenu.
The Design team sketched out two UX solutions for the sharing and commenting scenarios.
Tasks and questions were captured below the screens for discussion with the larger team.
Added additional flows that came out of the session.
The home screen model is similar to Google Drive. The model allows the user to easily find and organize their notes. The organization structure is shallow with sorting and filtering capabilities.
Board view lists all notes in a card or list format
Questions answered in the eBook are automatically saved to My Notebook. The Notebook is a repostory for any student input within the Player.
My Notebook has a writing tool that can be accessed from the top banner of the application.
DataManager is the number one assessment product used by school districts in the United States. DataManager assesses students’ performance from grades K-12. Currently, the test is administered in both print and online. The business goal was to move all States to online testing. UX’s first priority was to improve the overall online user experience for all administrator user personas.
The DataManager product is responsible for Student State assessment across grades K-12. The test is administered in both print and online. The trend is to move all testing online. The business requirements were to improve the overall student experience and improve student scores.
Currently, the student interface is difficult to navigate for both the student and teacher. One of the issues with the student interface is it covers the top and bottom of the test content area. In addition, there is confusing navigation and labeling.
http://o5ntj8.axshare.com/#g=1&p=student__current_and_new_interface_analysis
The current student interface is a fixed dimension. Most students will be accessing the test through a secure browser on a small desktop or chromebook. The top and bottom band covers the content requiring the student to scroll. This effects the students performance because test questions take longer to answer.
All information, navigation, and buttons were moved to the top banner. The student name is larger for teachers to see as she walks around the classroom. The tools are represented as icons to separate from navigation buttons. The question number is grouped with back/Next buttons. Saturated colors were removed so the focus is on test content.
The student screen's do not always fit in iframe requiring both vertical and horizontal scrolling. The navigation is in the bottom banner and is not always visible.
The iframe for the student screen's horizontal width is set, eliminating any horizontal scrolling. All information, navigation, and buttons were moved to the top banner and are now always visible.
Many students do not know how to use all the tools in the test. Requiring them to figure it out during the timed test. Thus affecting their score. I proposed a walk through prior to the test. The student can take the walk through prior to starting the test.
The HMH platform team conceived the idea of using a card-based UI to present content responsively across screens and devices. The card UI pattern visually and structurally unifies the different source types of content being displayed. The HMH Player unifies two platforms under one user experience and visual design.
Stacking the Deck, by Chris Tse is a great resource for learning more about Card architecture. https://vimeo.com/100662919
http://9qi320.axshare.com/?override=1#p=k-1_dashboard
Initial concept and wire frame of the Grades 6-12 card architecture. The cards pull the same feeds as the current dash. The feeds are displayed in the "Card" format. Also added a "personalization" card for the student.
Initial concept and wire frame of the Grades 2-5 card architecture. The cards pull the same feeds as the current dash. The feeds are displayed in the "Card" format. Also added a "personalization" card for the student.
Concept for student dash. The thinking is the data surfaced is time sensitive and in context of the students school day.
Also, the idea of personalization. Student's need to express themselves as individuals.
I lead a team of five designers on the HMH player development team. It is an education app for the K-12 school market. The app allows teachers to access and interact with HMH content anytime, online or offline. The Teacher view surfaces real time data such as "Due next" assignments and reports. The teacher can create or edit custom lessons. Then assign to the student. Classroom Collaboration allows the teacher to share her screen with students. There is a raise hand and chat feature for the teacher to interact with individual students.
Three student grade band UI's have been designed based on the user's cognitive abilities.
The student can also download content for offline reading or assignments.
The Student view surfaces real time data such as "last read" content, assignments and reports.
The HTML eBook is a browser based eReader web app that is device agnostic and the first of it's kind in the educational market. The feature rich app is the container for many of the HMH products. It has many capabilities including data persistence. The UI spanned 3 grade bands and a teacher view.
Lead Designer on the interactive white boards for grades K-5. The team collaborated with Learning Designers and in-house illustration talent to create fun interactive lessons. The IWBs were created in an html format for online use and with interactive white board technology.
The team developed interactive games for learning to spell and read. The games were designed for class participation.
HMH Fuse Math Reports support site. The was created to allow teachers and Administrators to create and print reports. I designed and created the Splash screen and UI.
From User needs to feature requirements
The Player is a web app that will provide students and teachers with a digital ecosystem to access and engage with core program materials online and offline for all programs.
The objective of the workshop was to bring together the Design team in one location to conceptualize the integration of the storage and writing tool into the Player student experience. The company had recently acquired a cloud-based online storage company. Our goal was to improve the overall UX with the integration of the new features into the Player. (release pending)
The first task was to have a group discussion to list the current player, platform, cloud-based storage, and other features and services.
Deriving from the list, we created the student and teacher high level tasks. The tasks were simplified and consolidated into 5 top tasks for both users.
The team then sketched out user stories from the high level epics.
The sketches of the user stories were translated into task flows using Axure by my team and me. The task flows visually communicated the concepts to stakeholders and teams.
My team and I created interactive wireframes for user testing to uncover usability issues and validate design decisions based on actual user reactions. (I did not create this wire frame)
http://gxtrok.axshare.com/#p=dash_interactive
