As the Head of Design at Matrix, I was given the opportunity to redesign and build our new site from scratch. Using an iterative design process, my team and I were able to revamp Matrix's site, bringing expected content into focus, and designing a more simpler, intuitive interface. Check out the redesigned live site at matrix.msu.edu
Based off of user testing and analytics, we discovered that the main reason users visited our site was to learn more about a project, or to simply go to the project's URL. With this in mind, we knew listing out our featured projects first and foremost needed to the new site's main feature. Adding more details to project pages, with information on how to donate to the project was also a must. A simpler navigation, a clearer focus on what Matrix is, and an easier way to support matrix were also considered.
Previous Site Design
We also knew that the site should better follow MSU's brand standards, and needed a serious facelift... The following screens are what the site initially looked like.
Problems to Solve
With all this in mind, we clarified what problems we needed to solve:
- A more modern site design
- Bring projects front and center to be quicker and easier to access
- Simplified navigation
- Updated branding that better suited MSU's brand standards
- Ability to search for and filter through Matrix's long list of projects
- More detailed project pages, with information on funding, and easier ways to reach social media and donate pages
- Make it clearer what Matrix's mission is
- A clearer way to donate to Matrix or to individual projects
After a thorough review of user analytics on how users were using matrix.msu.edu, we dicovered that many features were going untouched. So we removed several pages, including the site's blog/news setup and it's search functionality, and simplified the site heirarchy into four main views; Home, About, Projects, and Support.
Knowing users were mostly keen on seeing our projects, we added large project cards front and center on the home page, with little to nothing else except a brief about section.
For each project, we wanted to provide a more engaging experience to peak inside what the project has to offer. Every project now has it's own detail page, offering users an easy way to find out specific project details. Users can quickly see the main goals of the project, how the project was funded, imagery of the project and a brief project description. Most importantly, it is now easier than ever to jump to the project's URL, to support the project, or to view any of the project's according social media.
Matrix has over 100 different projects ranging back to the early 1990's. With so many projects we wanted to include a way to easily view and filter through them. The new Projects page now offers a way to search by keyword, filter by topic, or filter by sponsor.
Supporting Matrix used to be a confusing process, especially when users wanted to support a specific project. With the redesign we added the ability for users to distinguish whether they're donating to a single project, or Matrix as a whole.
The updated About page was designed in a way so our mission statement is front and center on all about pages to make it clear what we are all about. We also simplified our About page down to four sections: Mission, Grants, Research and Staff. Our main staff section also saw a major update, with a clean grid of staff cards, that are clickable to reveal more information.
The final designs for Matrix's site design can be seen below. Changes that occurred after the wireframe process are pointed out. The best way to experience the final design is seeing it live at matrix.msu.edu
For all project cards, we added the option to jump directly to the project's url, instead of having to go to the project's detail page first. We also moved the brief about section into the footer, allowing the projects to be even more front and center, and to have the about section be available on all pages.
Since the funders for each of our project play such an important role, we moved the Funded By section closer to the top of the page, and gave each funder it's own button that will take the user to the funder's website.
Sub pages were given a title to make it clearer which page the user was currently on.
The Staff tab on the about page was updated to be Community. The Community page is seen below, which features three sections that are navigable by a fixed scrolling side navigation. The tab bar was also visually made more impactful, and to feel more interactive.
The Donate to Matrix section was updated to have a greater visual impact, featuring a banner with the site's new branding. The Donate via Mail section was also made more engaging, by adding a subtle envelope with a stamp to enclose the address.
And of course the new Matrix site is fully responsive. Another major improvement from the previous site. Checkout the live site and resize the page!
Brand Design & Style Guide
The new colors used in the redesign were based off of Michigan Statue University's green in order to fit within their branding. As a department of MSU, we felt this consistency was important. Using the colors and arranging them at various angles helped connect them to the angles of the Matrix logo, as well as provide some depth. The following is a simple brand guideline along with interaction examples.
View the full site at matrix.msu.edu