A Better Brand
MIND Research Institute is an educational non-profit that has served millions of students over the last 22 years, but the brand was beginning to show its age. An old logotype and outdated website were the biggest offenders. Brand confusion was a major issue, and we needed MIND to be recognized as a thought leader in the EdTech industry apart from just our flagship product (ST Math).
Re-designing the identity of a 20 year old company is no easy task. A lot of brand equity had been built over the years and we didn't want to take that for granted. We knew this was a delicate process and we would need to be very thoughtful with our decisions.
We put together some focus groups within our organization, including our Leadership Team and Partnership Advisory Forum to gather qualitative data on the existing brand and website designs. A lot of discussion was had, but we came away with three key questions. Who is our audience? What is our identity? What is our purpose? The feedback received in these workshops was critical to making this rebrand a success.
Our founder (front) and our CEO (behind) both participated in focus groups and affinity mapping sessions.
With these guidelines, I began sketching the initial concepts for a new logomark. We wanted the logomark to be rooted in math and games to mirror MIND's identity and mission. But, it was also important to me that we didn’t use math symbols or any other “cheesy” solutions. After weeks of explorations and internal feedback within my team, we settled on a few strong concepts to present. We presented the new logo concepts to several executive level stakeholders including MIND's founder. There was a clear frontrunner, and after weeks of iterations and a rigorous approval process, the new logo was complete.
A few of the dozens of logo explorations.
The final mark combines three aspects of MIND – neuroscience, math, and games. The wireframe design is a visual representation of a schema. We visualize schemas as an interconnected web of knowledge where separate subjects are connected by neural pathways. The geometry of the mark was also derived from an icosahedron. Gamers will know this shape as a D20 die. We experimented with different ways to morph this into the two hemispheres of the brain. All of this comes together to form a stronger brand that differentiates us and embodies the identity of MIND.
A Better Brand
The original MIND website was serving as the company site and the ST Math product site, but doing neither very well. This lack of direction resulted in a confusing website that struggled to distinguish the two brands. The user struggled to find useful information and could easily get lost in the navigational structure. It was time to create a better user experience. One that could excite, inspire, and connect.
Our first task was to perform a hefty content audit of the existing site, including blog posts. Most of the product info could be trimmed due to the launch of stmath.com a few months earlier. Even so, there was still a lot of evergreen content that would transition and form the foundation of the new site.
Next, we reviewed our earlier research (see above) to improve our personas and create new user flows. These flows would help inform our new sitemap. We wanted to be sure not to repeat the mistakes of the old website when it came to navigation. You can see one of our flows below aligned to our educator persona.
For this project I led a collaborative effort between my team and a local creative agency. They would be assisting us with visual design and development. We set up a website task force within our department. This team would meet with the creative agency on a weekly basis to review wireframes and prototypes while offering feedback and direction. My role was to guide the design to ensure that it met user needs and complemented our new identity. Because the rebrand was still fresh, we were able to fill in the gaps in our design language with early explorations of the website. This helped us lock in brand guidelines for the remainder of the project.
Above, you can see the progress from wireframes, to hi-fidelity mockups, to the live site with real content.
After weeks of iterations and user testing we moved on from prototypes to development. During this phase, my role expanded to oversee development of components and modules to make sure we were creating scalable solutions. We followed atomic design principles to create a system that would allow our department to continue improving and expanding the site content over the next few years. Although the agency was building the initial site, our team would be responsible for future iterations and maintenance.
To wrap up development, our entire department worked to QA the website leading up to launch. We tracked issues and prioritized those through a shared AirTable with the creative agency. This shared doc also allowed us to monitor progress on these issues to ensure we didn’t fall behind schedule.
The new brand and website for MIND Research Institute both launched in April 2018. Since then, our team has continued to improve the user experience while adding new features and content.
Visit: mindresearch.org