next project > Website Redesign screenshots showcasing responsive web design

Fresh off of a rebrand effort that gave them a new voice, logo and style guide, Mouse came to us to redesign their website. 

Mouse was ready to be bold both visually and strategically in the content they wanted to share. 

The focus of the site is on students creating cool things, solving real problems, and making meaningful change. 

With student stories as our main inspiration, we decided to use large full-width images of students at work on (almost) every page. Large imagery was balanced with targeted and focused copy to communicate to a visitor what Mouse offers and their impact.

We kept responsive in mind as we planned and designed in order to maintain these goals on various sizes. 

Focused Storytelling with Unique Layouts

Full page screenshot of the Mouse work page

To facilitate effective pairing of less copy with big imagery, we created three pages rich with unique design elements. 

The Home page has multiple audiences in mind and as such showcases youth and organizational impact. 

The About page is a single page about the organization and the Work page highlights the services, programs, and offerings of the organization to educational leaders. Both of these have evolved from multiple pages in the previous website to just a single page. 

The Work page pictured here showcases how we treated content uniquely to help make each element and message standout without sacrificing an overall cohesive look and feel. 

These rich layouts allow for micro-stories to be showcased within a bold macro-story of the entire page. All editable via a CMS.

Website Highlights

The following images highlight many of the site's unique elements that blend focused content presentations with vibrant imagery.

Homepage detail screenshot

Page masthead design detail screenshot

About page detail screenshot

Expressing Brand

It was important to us to tell that story in a way that showcased the seriousness and quality of work that the students are doing and that still allowed the creative, fun personality that makes Mouse so exciting come through. 

Smart Technology and a Powerful CMS

From unique individual pages to news and general pages, we employed Craft CMS to allow us to manage and model site content with ease. 

Mouse has the capability to manage just about all of the content easily through Craft's control panel. This includes the unique elements showcased in the Work page above.

It is also important to share that all of the core content management flexibility is powered out of the box, requiring no additional add-ons or plugins. This lessens Mouse's technology debt and improves site maintainability.