Legends of Learning believes learning should be fun. In school, teachers choose from their library of over a thousand activities to help introduce and reinforce topics they teach. At home, students can extend their learning or get additional practice on concepts by exploring games which might approach the content taught in class from different angles or oriented toward different learning styles.
I never grew out of being obsessed with games—card games, board games, video games, you name it, I probably love it. I still firmly believe playing Civ growing up has taught me more about Product Management than any class or book.
I was thrilled to finally have the chance to collaborate with the Legends of Learning team of talented game designers, engineers, illustrators, 3D modelers on rethinking the visual design of the teacher's web app, print marketing materials for teachers and parents, and the overarching student game.
The work shown here took place from May 2018 – April 2019.
The team works fast, ships fast, and learns fast—so what you see today will be numerous iterations ahead of what you see here. Countless improvements have been made since then from working closely with teachers and students from across the country—from workflow, nomenclature, and entire products.
See what Legends of Learning has to offer today!
1
WEB APP REDESIGN
WEB APP REDESIGN
Legends of Learning offers over 2,000 activities that are specifically designed to reinforce content taught in science and math class for grades K–8. Teachers browse the library of content (such as quizzes, games, and simulations), and launch the assignment playlist to their students live during class, or as homework. After the assignment ends, teachers review performance to measure progress and zero in areas to review in-class.
Creating playlists
QUICKSTART
Sometimes, teachers need a quick way to get an activity up and running. Maybe students finish an activity earlier than planned. Or the class performed exceptionally today and earned some Legends time as a treat.
Matt Moran, our PM, created the concept of a quick launcher—with just a few clicks, the teacher can launch a relevant activity that their class can join.
BROWSE SCHOOL SUBJECTS
If you're planning your curriculum for the next month, or just wanted to browse and see what Legends of Learning offers, you can explore the entire game catalogue by subject, grade, and concept.
When setting up your teacher account, you'll select your school's education standard. This updates the game catalogue to align with your curriculum—if you're a third grade teacher using Next Generation Science Standards (NGSS) and planning your week of "3-PS2-1 Motion and Stability: Forces and Interactions", you'll be able to find games specifically designed around content for NGSS code 3-PS2-1.
A browse experience that emphasizes organization by standard also helps differentiate Legends of Learning from other educational gaming companies that only offer all-purpose science and math games. Instead of searching for "gravity" and needing to sift through irrelevant content that would distract from the core ideas from that unit, this quickly filters down to content that's designed to dovetail into that precise granular concept as defined in the standard.
CREATE A PLAYLIST
For full customization, you can build a playlist from scratch by choosing your own games and assessments (a series of questions).
This is perfect for times when you want full control, such as creating a homework assignment that starts with an instructional game, followed by a simulation so students can try what they just learned, and ending with a formative assessment so you can see what concepts students need reinforcing the next day in class.
SCHEDULING
Teachers generally plan their curriculum months or weeks in advance, then adapt in real-time to the unique needs of the class.
Ensure classes are covered.
Using the calendar, teachers can visualize the assignments for each class (group) to ensure full coverage.
Find the assignment to view results.
See which assignments are live on each day, and easily drill in on the assignment on any date to review performance.
Organize each unit.
See at a glance the start and end dates of each unit throughout the year.
Playing games in class
PROJECTED WHILE PLAYING
On classroom visits, the Legends of Learning team realized that teachers often projected the launch screen to the class while everyone played (even though that screen wasn't originally designed to be student-facing). Turns out, seeing the screen as a class helped students stay engaged and freed teachers to walk around the room to help students (while peeking up any time to check progress).
Everyone can watch the avatars progress through each activity in real-time. Badges like "Behind" or "Distracted" helps teachers keep everyone on-task and know who to support. Students strive to answer correctly to earn special gold, silver, and bronze badges by their name as positive reinforcement.
REVIEWING PERFORMANCE
Visualize the overall class performance during and after the assignment runs. See where students struggled to target your lesson the next day, and identify students who may need additional support.
Visualize the overall class performance during and after the assignment runs. See where students struggled to target your lesson the next day, and identify students who may need additional support.
POWER REPORTING
See reporting on an assignment, class, school, or district level.
For teachers, see where students are struggling to help review in class the next day. Run a review for multiple topics to gear up for year-end review or state standardized tests and visually skim for patterns of understanding to further address in a more personalized way. Flags alert you to struggling students and especially tricky questions to eliminate the performance gap..
For school or district administrators, many of whom have recently made large investments in classroom technology, these detailed reports give them insight into the classroom like never before.
Teacher Rewards
POINTS TO REWARD ENGAGEMENT
Earn points for amazing real-world and virtual gear by contributing to the growing community.
This rewards center tracks your legendary status, rewards that you're eligible for, and immediate actions you can take to climb this ladder and earn the next reward.
This page is designed with content in 4-column and 3-column modules so that content naturally flows from desktop to mobile responsive.
2
PRINT MATERIALS
PRINT MATERIALS
Using the illustrations and models created for the digital products under the creative direction of Mike Gibson, I created a series of printed products to help teachers jumpstart in the classroom and introduce the brand and benefits to parents.
Illustrations by the Legends of Learning team. Copy, layout, design by me.
3
LEGENDS ACADEMY
LEGENDS ACADEMY
To extend at-home learning, Legends Academy is a role-playing game that leverages Legends of Learning's content library (2,000+ games strong!), but adds a whole new immersive universe. Instead of completing activities individually, these accomplishments are now saved in their recruit's journey through Legends Academy. You get your very own dorm room to decorate, power gauntlets to defeat the Forces of Ignorance as you complete quests, and uncover the secrets of your professors and fellow recruits.
Having done so much work on enterprise platforms and relatively serious consumer products aimed at adults, adjusting towards an audience of children and optimizing for fun took some mental rewiring. There are definitely similarities—the UI needs to be clear enough that new users aren't completely confused, but also doesn't get in the way of experienced people who might have trained their muscle memory from using it every day. Though games as a category tend to not explain every feature and possibility (part of the fun is discovering surprises and figuring out things yourself), our young non-gamer audience might need a little more nudging than if this were a standalone RPG.
To extend at-home learning, Legends Academy is a role-playing game that leverages Legends of Learning's content library (2,000+ games strong!), but adds a whole new immersive universe. Instead of completing activities individually, these accomplishments are now saved in their recruit's journey through Legends Academy. You get your very own dorm room to decorate, power gauntlets to defeat the Forces of Ignorance as you complete quests, and uncover the secrets of your professors and fellow recruits.
Having done so much work on enterprise platforms and relatively serious consumer products aimed at adults, adjusting towards an audience of children and optimizing for fun took some mental rewiring. There are definitely similarities—the UI needs to be clear enough that new users aren't completely confused, but also doesn't get in the way of experienced people who might have trained their muscle memory from using it every day. Though games as a category tend to not explain every feature and possibility (part of the fun is discovering surprises and figuring out things yourself), our young non-gamer audience might need a little more nudging than if this were a standalone RPG.
ONBOARDING (CHARACTER CREATION)
The first time you launch Legends Academy, the opening cinematic immerses you in the backstory of this universe. You're now a new recruit enrolled at Legends Academy to help combat the forces of Ignorance—ready or not, you're beaming at warp speed through an animated light portal towards your destiny. It's time to create your profile.
Since the original onboarding series to create your in-game avatar was originally launched (pictured here), the creative team (led by Mike Gibson) has made more progress developing the creative direction of the Legends Academy universe.
After picking your silhouette, it's time to generate your name. This title, name, descriptor format creates interesting combinations that are guaranteed to be G-rated and won't break the game mechanics, but the clicking arrows to scroll through a long list of names one at a time alphabetically could be tedious.
The first time you launch Legends Academy, the opening cinematic immerses you in the backstory of this universe. You're now a new recruit enrolled at Legends Academy to help combat the forces of Ignorance—ready or not, you're beaming at warp speed through an animated light portal towards your destiny. With the animated light tunnel speeding in the background as a transition into the interactive game, It's time to create your profile.
Mike's team have now completed the character designs, which now can be incorporated into this process. The team also wanted to introduce new customization options. After picking your character, we added a mini color picker that allows you to preview your new purple complexion before moving on. It's still not too late if you want to switch characters—the other is faded to the side, but still just a click away.
Popping out a tray allows a longer list of names to be seen simultaneously. Previously, kids could type to jump to names beginning with each letter. Borrowing the pattern from iOS contacts, you can similarly jump to a letter using the mini alphabet on the right. Random has also been tweaked so that you can lock in names you already love, while playing slots with the unlocked names for inspiration.
BATTLE PARTY SETUP
The overall visual style is lightened with bright, saturated colors that feel fun and joyful. Since these 2D UI overlays pass in and out of the 3D-modeled overworld, I focused more visual design around bridging that 2D/3D experience—depth is added through the gradients, a 5° shear across most elements, liberal use of italics in headlines, and parallelograms for buttons. Shapes are large, chunky, and softened with rounded corners to be clear affordances that are easily clickable by younger students.
The team noticed students got a little stuck with the Battle Party Setup during testing sessions. During battle, up to 3 characters on each side enter battle, each standing on a 2x3 grid (positioning matters—some attacks have targeting that affects multiple adjacent targets). In the original design, the two parties are on opposite sides, separated by your library of characters who can be added to your party on the left.
In the updated design, the first time experience is streamlined. The screen in divided more definitively into the two sides: good/interactive (blue) vs bad/not interactive (gray). Instead of having your library in the center, the two sides entering battle are focused in the center, and assembling each party on the periphery. The 6 battle positions on each side are shown so curious students can try repositioning their character into a different slot or shuffling the enemy. Even if the battle party concept or positioning is foreign or confusing, the configuration is prefilled so that you only need to click the pulsing Battle! button to get back on your journey.
As you progress through the storyline, you meet more characters who you can call on to join your battle party. One potential point of confusion in the original design could be that the library is also displayed in a 2x3 format, which sets up expectations that it behaves or functions similarly. In the redesign, the treatment for your library of characters is a single row of 5, with large pagination arrows to scroll through. Each tile is the same size still as your chosen party so it continues to be clear each tile can be dragged and dropped into the empty slots (or select and click add).
When the character is placed into the party, their avatar is grayed on the left character inventory, and filled in the center.
When someone in the battle party is clicked, they can be removed entirely or moved to a different position. Valid tiles light up yellow with a move icon.
Though Legends of Learning is free forever for teachers, students can subscribe for premium upgrades that unlock vanity features, access to unassigned content, and a little extra boost—such as allowing you to take a third member into battle with you. If you're not yet premium, locks appear on empty character slots after two members are loaded—and attempting to add another member triggers a reminder to upgrade to all these other exciting features. Luckily, Unity's particle effects makes implementing shiny animated glow modals like these much more feasible than with JS/CSS alone on the web.
The same character picker is also reused throughout the game, such as in the attribute assignment UI here. After defeating a dojo by demonstrating your depth of knowledge in a particular subject, you earn attribute points to increase the stats of any of your characters.
QUESTIONS
A large part of the experience is reviewing content taught by the teacher in-class or from the instructional games on the Legends of Learning platform.
The original orientation is a classic Who Wants to Be a Millionaire style—question above, answers below. There are many things to like about this format—it's familiar and the eyes naturally wanders down from the question to answer choices. The trade-off is a very long line length for questions (difficult to follow or track back to the next line, especially for younger readers), and jumping side-to-side to read the answers.
Questions pop up during the classic RPG turn-based battles. In order for your character to successfully resolve an attack, you must answer a question correctly. Answer wrong, and your character will miss. Another keeper of the original format is that you don't visually lose the context of the battle during the constant back and forth between selecting your attack and facing the question.
The biggest difference is changing the orientation of question and answers. In the redesign, an alternative layout is to reserve the left side for elements related to the question (generally text and a diagram), and the answers on the right. This allows more vertical space for the question for shorter line lengths and more lines overall. Answers can also be scanned down, which is useful especially for the bulk of answers that are short. The extremes of questions answers—very short and very long—are tested to ensure the UI doesn't break with the existing content.
For consistency, the button for read aloud (for younger or visually-impaired players) is always placed predictably on the bottom left corner of the UI (here, on dialogue screens, and any future features that contain critical text). Even as the game grows, that little corner can more easily be reserved for these important, but miscellaneous functions.
Visually, the new angled UI from Battle Party Setup is combined with existing elements like hexagons (though now placed as an angle to further add dimension and movement). The UI is less rigid to add an element of fun, but without ornamentation that's fun on the first experience, but becomes tiresome, distracting, or patronizing upon the hundreth repetition.
We didn't want the error to feel too painful, since it's likely to happen quite a lot during each play session. Purples and oranges were confusingly not error-like enough to convey the mistake (and plus, we've set a vocabulary that purples are generally caution/errors and oranges are for premium upgrades). We introduced this high-contrast red that hasn't been used anywhere else and the slight gradient softens the punch a bit.
Fleeing battle also gets its own warning modal in caution pink—the main button is to resume the battle, and secondary actions to irrevocably flee or proceed to the Dojo for some more learning.
The format is also flexible for other question frameworks, such as this later application of a 10-question Dojo battle. A header can be dropped in to display relevant information (such as the topic), tracking progress in the 10-question series, and encapsulate the flee button so they can escape from this battle.
BATTLE
Working closely with the game design team who also evolved the battle mechanics, we pulled the moves front and center. Instead of relying on text descriptions, damage, targeting, and status effects are communicated using icons and numbers. All the characters and their status effects are now always visible in the bottom area—now centrally located instead of crowding the battle area with bobbing bars and badges that are difficult to read. Turn order is now less visually innovative, but a much more clear representation of each round of turns—after each character uses their move, the deck of avatars come together, shuffles, and fans out for the next set of turns.
REWARDS
Throughout your journey, you'll earn Power Orbs to unlock new battle moves, knowledge points to level up, coins to splash out on flashy gear, new objects to make your room feel like home, and new characters who join your team.
The main consideration for the new design is how interactions are handled when multiple rewards are simultaneously rewarded, which happens pretty often. Using a flexible system of hexagonal "tiles" marked on top with the icon of the reward type, we're able to reuse familiar UI elements while keeping the animations exciting as each card fans out, and drops away to reveal the next reward.
NEW FEATURES
A major new feature introduced to encourage students to progress through the story, master the subject dojos, and see new updates is through customizing their personal area (dorm room) and tricking out their avatar with sweet new gear.
Unlike other product platforms that may need to scale per customer or re-use UI in safe, scalable ways, designing a game that's run at a very specific aspect ratio with features that are predictable allows the UI to be more custom, novel, and fun. This downward sloping UI is generally a bad idea when things *just* right—but works when the screen is static and scales proportionally.
Once the student finds just the right bean bag chair for their home away from home, they tap to learn more, then tap again to purchase. Closing here returns them to the previous screen, and qualifying information (level, coins) and always displayed for smart purchasing decisions.
The avatar shop naturally took a more vertical view in order to accomodate showing a full-length preview before you commit to buy. Controls to navigate different categories uses the same familiar UI from the battle party setup. A horizontally-scrolling center panel shows the long suits in parallel to the figure.
On the right, menus and submenus related to the selected customization slides out like drawers below each tier, each getting increasingly specific. In this case, the suit's color customizations pops out a color tray. Kids can tap on a wide variety of shades, then tweak on the right for inifite color possibilities.
CREDITS
Character design, in-game illustrations, and product management by the Legends of Learning team
Product strategy, product management, and wireframes by Matt Moran
Creative direction by Mike Gibson
UI & UX by Meng He
