The Comic Book Origin Story
Realize was my first professional project as a UX designer. Myself and another fellow NAU Grad were hired to complete the four-designer team that would later become Pearson’s UXMen thanks to the desperately-needed geekiness we added to the party. Our manager liked to consider us a startup within a company and thanks to our extremely well-received work developing the user experience and visual design of Realize we expanded quickly.
On this page you’ll find examples of that work and a few good stories about the challenges our team faced during this project.
So what is Realize?
It’s a K-12 Learning Platform where teachers can create classes, assign subscription-based content, and keep track of their students’ performance. These main pillars of the experience are divided into three sections; Programs, Classes, and Data. Students get a similar experience with the ability to complete their work, check up on their grades, and even browse the student-facing version of the content their teachers are subscribed to. Each section gets its own identifying color that is consistently featured in across its following pages.
Realize was a challenging project to build and we continue to support it moving forward, in but retrospect I think our toughest challenge was crafting the K-2 (that’s kindergarteners – second graders) part of the experience.
It’s story time.
Centers – The K-2 Experience
How do you adapt a platform built around logins and an assumed understanding of basic computer skills to be intuitive for little kids whose technology access is limited to weekly computer lab time at school? First, we did a general test of Realize as it existed at the time and the expected happened; our system failed. The K-2 students we brought in had trouble logging in, finding assignments, and pretty much none of our terminology made any sense to them.
Should we give them a whole new interface?
So began our first attempts at creating a paired-down version of Realize with much more clear and literal labels for the interface. We tested this version with an interactive prototype I put together using another team member’s designs. Things went a little better this time, but it wasn’t quite there yet. We also learned kids can be very literal.
“What would you expect to see if you clicked on the red button?” – Moderator
“Pictures of red hammers.” – 2nd Grader
Rethinking Our Approach
It became clear from early testing that we needed to take a step back and think more about our use cases for younger kids interacting with Realize content. The computer lab environment made us think more about how the ideal experience is more of a set it and forget it situation for teachers. The few teachers we brought in for early testing verified this. They need to be able to get the kids set up and able to operate on their own so they aren’t constantly asking for help.
This lead to us designing what felt more like a hub with super literal labeling for easy instruction from the teacher’s perspective. To do this, we thought of a few different ideas for environments that appeal to kids and did some sketching. It was fun to play with colored pencils for a change.
The characters in these designs essentially became our labeling for the interface. Now teachers could say, “Click the fox and do the activity.” To get more high fidelity mock ups, we reached out to the art team. The gave us a lovely forest to work with.
It was all coming together. Using these assets I chopped up the characters, animated them, and built us our final prototype for testing the K-2 experience for Realize. You can check it out here.
This went over really well with kids. The only thing left to do was figure out how teachers get this running in a computer lab on multiple machines.
Centers: The Fourth Pillar of Realize
We now had our identity and student-facing experience for Centers, but how do we make it useful to teachers. The one thing we knew for sure is that they needed to be able to easily set it up on multiple computers. This lead to the idea of launching the center from Realize. All they need to do is log in on each machine and set it up.
Initially we got a little ambitious with how much control teachers have when setting up a Center for their kids. This included allowing them to individually pick what content items were assigned to the center, naming it to save for later use, and creating a special login for each center. Testing taught us very quickly that, if you’ll pardon my French, teachers don’t have time for that shit. Not when they’ve got a room full of kids trying to get on their computers.
So we took a step back and made things easier by working with the content teams to develop content tailored specifically for centers. Now all teachers have to do is select a program, pick a theme (there’s a space one now, too) and launch.
The Onboarding Process – Modern Wizardry
No Fireballs, Promise
When someone uses Realize for the first time, there’s a few things the system needs to know before they get started To make this an intuitive and pleasant experience we worked towards a more modern take on the classic step-by-step wizard. And so began my introduction to the now hilariously overused parallax scrolling webpage.
Let’s Be Trendy
I think keeping up with trends is very important in any field related to design, so I was very excited to try out this fancy new parallax business when I coded our first prototype for the Realize wizard. It turned out pretty cool, but it turns out this sort of thing eats up performance and wouldn’t work all that well on the older browsers our customers were using. That’s okay, it’s easy to let go of things that don’t affect usability and probably better we didn’t get too far down that path.
Still, our use of a sticky top bar showing users where they are, letting them preview their background image, and assuring them that all the choices they were making could be changed at any time where the most important usability features to come out of this.
What About Post-Wizardry?
Once our users complete the initial set up, they’re free to start exploring their programs, set up classes, or come to their senses and switch to that awesome sundial background image if they didn’t pick it already. At this point we took a more passive role in guiding users to explore the three main sections by marking them numerically. As they visit each section, it gets marked off on the home page until they’ve taken a full tour. By that point, they will have seen what content is available to them, set up a class, and created an assignment for their students.