A Friendly Penguin
The ST Math program serving over 1.3 million students was getting a much-needed facelift. The updated games promised cleaner design, improved functionality, and new cutting-edge features. We wanted to give the brand and mascot (JiJi) a refresh to celebrate the launch of the new ST Math. But how do you make improvements to a character that is beloved by over a million students without losing what makes JiJi special?
We started by assembling a "JiJi Team" consisting of my marketing design team, design leads from the product team, and several contract illustrators. Our first weekly meeting was to establish the traits that made JiJi unique. We built a character profile in Confluence to keep our documentation organized and accessible. Our following meetings were then dedicated to submitting concept sketches, review, and discussion.
After a couple weeks of concepts, we were able to narrow our focus and move into vector illustrations. During this time, we tightened our feedback loop to include only the leads from the “JiJi Team”. This helped us iterate faster. The entire team would still meet for larger review sessions, but less frequently.
I led the Art Direction of several Illustrators through the concepting phase.
Because JiJi is so recognizable to our users, we wanted to ensure the new direction still “felt” like JiJi. Our UX Researcher was able to get the newest iteration of JiJi in front of students, teachers, and administrators for user review. The feedback was overwhelmingly positive which gave us the confidence to move forward.
The new JiJi feels younger and more energetic. To further differentiate JiJi from other penguin mascots, we decided to add a backpack. This has the added effect of helping JiJi stand out as an educational product, even when not accompanied by the ST Math wordmark. In ST Math games, the goal is always to move JiJi from left to right across the screen. It made sense to show JiJi walking with energy and purpose. Finally, flat colors and a thick outline allows us more flexibility when printing JiJi or placing him on colored backgrounds.
Style Guides
My team created and maintained the Brand Guidelines for ST Math. By creating an online version of these style guides, we were able to easily share brand colors, typography, logo usage, and downloads. This helped us maintain brand integrity when working with external partners like donors and schools, as well as with internal departments in our organization.
Explore: ST Math Style Guide
Password: JiJi2018
Improving our IA
The ST Math website had passed its two year launch anniversary. Over those two years the amount of content had grown by 400%. We had a lot of work to do from an information architecture standpoint. To get the most out of so much new content, we needed a clearer path for the user. A major website refresh would be happening simultaneously with the new logo.
This was an opportunity for us to review and refresh our user personas. We updated our personas to better represent our current audience and used those to craft new user stories and flows. You can see our personas and an example flow for an Administrator story below.
We partnered with Marketing and Research teams to refine our 4 personas.
We compiled user feedback and analytics to inform the new user flows. Next, we aimed to update our information architecture. We started this process with card sorting. First, we did the exercise internally with our Marketing department and a few team members. Then, we had our UX Researcher go into the field to run card sorts with our users including teachers, principles, and administrators.
The user results were very different from our internal results. This revealed some blind spots for our team. We realized some of the terminology we were using was not ubiquitous, leading to a confused user. In addition, the content groupings created by users were very different from ours. This research proved extremely valuable in crafting our new information architecture.
My next task was to take all of this new qualitative and quantitative data and begin building wireframes for the updated web pages. Due to bandwidth limitations, we decided against refreshing every page on the site. Instead, we would focus on high-traffic areas and a handful of new pages. This only worked because most of our design language like colors, fonts, and icons were staying the same. The updates would be an expansion of that language instead of a replacement.
We decided to give the user the option to select their "role" from the start. This guides them to a landing page with aggregated content based on their needs. This also offered us a way to track how those "roles" were navigating our website. What offers were they downloading? Which blogs were they reading?
We added cross-domain search functionality to give users quicker access to keywords they were looking for. This searched all pages across ST Math and MIND sites, including all blog posts. An added benefit was for our sales team. When in the field, they would often get questions about complex subject matter they needed to answer on the fly. Knowing they could search both websites and blog content ensured they gained quick access to approved messaging around these topics.
I built components and modules in a Figma file shared with our contract developer. This helped us build rapid prototypes of new pages and functionality. We shared these prototypes internally and with select users for feedback. After incorporating that feedback, I divided up the development work between myself and our contractor. I let him take lead on some of the more complex functionality while I focused on building scalable components within HubSpot.
The module above is one of many net new components that we created for this project. By building in flexible design and authoring options, we were able to reuse this module throughout the new designs without feeling repetitive.
We launched the new pages and logo refresh in January 2020. Both have had an excellent reception with both current users and prospects. In March, when the COVID pandemic took full effect, we were able to pivot extremely fast and build a new landing page to provide free access to ST Math for schools and homes. This was made possible because of the care taken in building the new components and modules. We were able to set a new standard in scalability and sustainability.
Visit: stmath.com
