Intelligence
Seven Decisions Driving the New mStoner.com
mstoner's homepage displayed on laptop

Intelligence

Seven Decisions Driving the New mStoner.com

Nov 30, 2017By Mallory Willsea

Have you noticed? Things look a little different cleaner, simpler, and more beautiful on mStoner.com.

We’ve had an incredible year of groundbreaking research projects, collaborative workshops, thought‐provoking webinars, successful website launches, and shiny new partnerships. We’ve reorganized our agency to be one lean cross‐disciplinary, user‐centered, digital‐first, creative powerhouse. To celebrate, we’ve launched a new website that better represents who we are and how we work.

We’ve said it before: Knowing that your website needs an overhaul usually isn’t the problem — getting started is. Relaunching a website is no small task. We should know; we’ve launched hundreds of them. A successful website redesign requires executive‐level support, appropriate funding, teamwide collaboration, and the meaningful involvement of key stakeholders.

Our conversation about an mStoner.com redesign started in late 2016. Using our redesign checklist as a guide, our leadership team:

  • Reviewed current metrics for insights
  • Mapped our goals for the redesign to agency objectives
  • Assessed and updated our visual brand
  • Researched and reviewed our competitors’ positioning and digital presence
  • Identified team roles
  • Performed a thorough content audit of the current site (and got busy writing new content!)
  • Established a budget

The heavy creative and tech work took place over the past few months. During this time, our redesign team was faced with many tough questions, including:

  • What’s the best way to feature our awesome clients?
  • Can mStoner.com be the gold standard for accessibility?
  • How do we best tell the mStoner story?

Our team shares seven of the most important decisions we made during the redesign — and why we made those decisions — below.

Design

1) The site is intentionally simple and open, allowing the work we do for clients to shine.

As we collected all of the images and content for each of our case studies, we were amazed to see just how much the feeling and tone of each institution is reflected through their photography and brand. Look at the difference between the sites for St. John Fisher College and The University of North Carolina School of the Arts: While they both have the goal of recruiting students, each has a unique flavor that clearly comes across on their sites to recruit right‐fit students.

Our previous case studies showed only one portfolio image, with the homepage repeated and scaled for various screens. It simply didn’t do justice to all of the amazing work mStoner has produced over the years. Our design work is never cookie‐cutter; our creative team creates something new every time we sit down to begin a project, and we wanted that commitment to tailored solutions to show on our new site.

Our design work is never cookie-cutter; our creative team creates something new every time we sit down to begin a project, and we wanted that commitment to tailored solutions to show on our new site.

2) We found opportunities to provide quick access to what matters most.

Did you notice the image grid icon on the top left? This is a fun way to access our client work from any page on the site. It’s a reminder that what matters most at mStoner is our clients, and we’re extremely proud of the work we do for them!

A brief request from designer Abby McLean: “I hope you’ll will take a minute to watch our highlight reel, featured on our Work page. When I watch it, I think, ‘Wow! mStoner does really cool work. I want to work there!’ … and then I remember I already do! #IdranktheKoolAid”

3) Type matters. We chose wisely.

Over the past two years, we’ve slowly evolved the mStoner brand through our type. We began using the Freight family, which is an extremely flexible system. And though it certainly reflects the smart side of mStoner, it felt a little too stodgy. We felt we needed something to reflect our lighthearted side. That’s why we incorporated Sofia for subheads and quotes. It’s more contemporary and fun.

Content

4) The content employs a carefully chosen vocabulary.

We scrutinized every word to ensure our content complements the design direction and highlights our culture: lighthearted and smart. We wanted the pages to be concise and to the point, while artfully illustrating the key ideas.

For example, on the About page: We break down the content into small, specific areas of focus with a clear headline and a short introductory paragraph. We allow the images and design details to shine through and become the focus of the page.

5) We tell our story.

The language of each page reflects not only our values and priorities, but also those of our core audience: education institutions. We crafted a narrative for the entire site that unfolds across pages, starting with a general introduction on the homepage. The story of mStoner, who we are and what we offer, plays out as visitors explore our content. By highlighting a specific call-to-action sentence in the banner image, we set the tone for each page and its content. We wanted to make those sentences both engaging and intriguing, encouraging a deeper dive into the page.

Technology

6) Accessibility is a priority.

We must have a site that meets WCAG 2.0 AA standards for accessibility. Our team approached this just as we do for our clients, by:

  • Testing our designs for color contrast and creating content with text alternatives where necessary.
  • Refining the HTML markup to follow best practices and testing with multiple automated tools.
  • Manually checking the more nuanced items, such as the use of text over background images, to be sure contrast was sufficient. (We know automated tools struggle with this.)
  • Understanding accessibility is a part of the ongoing care and feeding of our site. We’ll continue to work on balancing an image-heavy site with swift performance and strive to keep the site accessible over time.

7) We rebuilt mStoner.com from the ground up.

We’re big fans of open-source content management systems. We decided WordPress was still the best-fit CMS for our needs. But while the old site relied on a theme and a number of plug-ins to achieve desired functionality, the new mStoner.com was purpose-built from the ground up.

We started with a lean front-end build process to produce HTML. We used that HTML to construct a custom theme in WordPress. A modular approach to design and implementation uses custom content types in WordPress and allows component reuse across pages of the new site. This keeps our need for plug-ins to the essentials and results in a design and implementation with no compromises.

Benefits of a Strong Redesign Process

A site redesign can act as a catalyst for a marketing team to address everything from the creative expression of a brand to internal communications, if a strong process is in place.

The process of relaunching mStoner.com helped raise our communications standards across the board. As a result, it helped us audit and improve all of our digital communications and processes. We refreshed our brand visuals, updated conference materials, and gave many of our free resources a face-lift. Next, we’ll tackle our email templates and resource landing pages.

We believe brand and website management is an active process, not a one-off project that happens every three to five years. So stay tuned as our site continues to evolve!