Bringing a New Brand to Life

Work

Bringing a New Brand to Life

Dakota State University

Dakota State University (DSU) is nationally renowned as a leader in computer and cyber science education, with a forward-thinking approach to technology and innovation.

A bold rebranding in 2019 repositioned DSU as a university designed for the future. What they needed next was a future-forward website that could bring the new brand to life.

Strategic Goals

DSU unveiled a new visual identity in May 2019. To further its branding efforts, DSU developed a new website to support the new brand and main business goal: to improve the digital experience of prospective undergraduate students considering DSU through strategic insights gained by mapping the customer journey. A secondary goal was to highlight the research and academic strengths of the university and its faculty and leadership.

The Beacom College of Computer and Cyber Science has the largest presence within the university. It houses the nationally ranked degree programs in cybersecurity that have earned Center of Academic Excellence designations for DSU from the National Security Agency and the Department of Homeland Security. The university also offers business, education, arts and sciences in its other three colleges. A successful new website would present all of the university’s programs equally with its strengths in cybersecurity.

student focusing on assignment
a person's hand holding cables connected to a server
DSU campus building
students laying on the grass with their heads in a circle

Strategies

Brand Execution

DSU Marketing and Communications Director Kelli Koepsell and Web Editor Joelle Johnson managed the multi-stage process of bringing their new visual identity to life on the new website — and found ways to maximize opportunities in other areas while doing so. They brought website accessibility to the forefront of the design discussion and engaged their partners to ensure the brand system met compliance standards.

Lawrence & Schiller (L&S) — the firm that created the new brand with university leaders — worked directly with mStoner under Koepsell’s guidance to finalize the brand guide and make sure that print and web applications had the same typographic hierarchy. The two firms also partnered with Koepsell to figure out how DSU’s new signature hexagon symbol would be animated on the website.

“Properly executing a new brand can be tricky,” says mStoner Creative Director Ben Bilow. “Until you start to play with the brand’s elements, you can’t figure out if the whole brand system is going to work or not. Luckily, DSU had already arrived at a very strong visual identity with L&S. The typeface looked great on the web, for instance, and the brand colors passed accessibility standards. The brand shapes weren’t too complex either, too patterned or busy, and they display legibly.”

Visual Design

The new DSU brand is streamlined, geometric, and modern — embodying the forward-thinking, innovative character of the university. The visual design for the new site would only succeed if it amplified these qualities. This wasn’t just an aesthetic mandate; it was also an enrollment marketing one. DSU is looking for prospective students who are excited about the technology and innovation focus of the university.

mStoner delivered a sleek, on-brand, bold set of design templates that would speak to prospective students looking for a tech-forward school.

The homepage design presents an optimized narrative that mStoner has honed over the course of partnering with more than 350 universities: people, programs, place, promise. “These are the four topics that all prospective students want to learn more about,” says Voltaire Santos Miran, mStoner’s CEO and head of client services. “Sites need to give visitors a sense of the community, ready access to academic programs, an understanding of the benefits of particular geographic location, and a clear sense of the benefits of an education from the institution.” The DSU homepage design meets these needs of visitors by showcasing points of pride, student stories, a mini-program finder, and a student life section.

But creative flourishes in DSU’s website design make it stand well apart from other university sites. These include the micro-animations that DSU and mStoner spent several weeks adding to the homepage and top landing pages. Subtle, elegant actions surprise and delight when a user scrolls the page or rolls over buttons and elements. These touches broadcast a sophistication and a feeling of hospitality, as if to say “we’re glad you’re here and we’re proud of who we are.” They also hint at the cutting-edge nature of the university.

The new design templates really provide a wide range of functions. There are so many different components we can use on a page: mini-slide shows, videos, quotes, and more. The new design allows us to make every page function dynamically.

— Joelle Johnson, Website Editor for DSU

User Experience Design

The user experience also supports the university’s focus on technology and innovation. The primary navigation is noticeably modern and simple, with a narrow sidebar on the right. The sidebar is “sticky” (it stays in place, no matter where you go on the site) and also features calls to action that levitate slightly upon mouseover. Usability testing conducted by mStoner proved that both of these sidebar features are highly effective in attracting users to the site’s three most important CTAs: request info, visit DSU, and apply.

To address DSU’s goal of presenting all of the university’s programs equally, mStoner designed a visually inviting and user-friendly program finder. Tiles of programs sort themselves instantly depending on the filters a site visitor selects. Not only can people quickly discover which programs are offered online, but they can also sort by area of interest or level of study. The finder is simple and fast, it works flawlessly, and it features the subtle motion design also found throughout the site. As a result, the user experience delivers an impression of technological sophistication, authority, and warmth.

The use of motion on the site is unique. When you roll over something, it gives you a little bit of magic. Though it was challenging to implement, especially in designing an accessibility-compliant site, it’s so fun to see those little easter eggs.

— Kelli Koepsell, Director of Marketing and Communications for DSU

Funnelback for Internal Search

The lack of search-ability on the old site was a major pain point for DSU. External and internal audiences alike were accustomed to leaving the site to use Google in order to find their content. The DSU team wanted to look beyond the standard Google internal site search tool for their new, best-in-class website. They gave mStoner their requirements for a search tool and mStoner came up with a few suggestions at different price points. DSU decided on Funnelback, a “search and insights engine” that could match the look and feel of the new site design and also help site visitors accomplish important tasks.

mStoner designed the search bar to always be accessible in the sticky nav and expand into a full-screen modal window that includes extra marketing content. When a site visitor enters a query, the Funnelback platform returns visually stunning search result pages that fit seamlessly into the site’s new design. The results don’t just display relevant dsu.edu webpages; they also display other types of content such as people, news articles, and FAQs.

The insight part of Funnelback’s “search and insight engine” refers to the data analytics and customization options that make the software a powerful marketing tool for DSU. “We’re able to see what people are searching for and what the most popular pages are,” Johnson said. “We can move things up or down in search results to promote certain pages. The tool also gives us SEO information and ranking reporting. This helps us know which pages to optimize so they appear higher in our own search results as well as Google’s.”

“There is tech in everything that we do. Our graduates are highly sought-after for that reason and now we can highlight this. We can also show the uniqueness of our online programs and the deep breadth of research that we do.”

— Kelli Koepsell, Director of Marketing and Communications for DSU

Results

DSU launched a multichannel marketing campaign along with the website to roll out the new brand. “We’re hearing people say they have never seen the amount of marketing that they’ve seen from DSU,” Johnson said. “We’re running digital and out-of-the-box strategies in our campaigns. But no matter how people arrive at the website, they all have a consistent experience with our brand. The site itself is just visually beautiful, and the side navigation and all of the components mStoner created really promote our identity as a university that is moving forward or rising, which is our tagline. We have definitely seen an increase in awareness of who we are and what we offer.”

Johnson is also grateful for the new backend management system and governance measures, which make her job easier. “We can assign content to owners so we can improve accountability and make sure content is up to date. We can create and then track workflows and change requests. We can also roll back to a previous version of the site if we need to. And the site and production environment are hosted in the cloud, which is much easier for our IT department to manage.”

As a senior administrator reporting to the President’s Cabinet, Koepsell says, “I am 100% proud of where we are right now. You can’t get a better public-facing site than this. A Federal Times article covered us recently and they commented: ‘all this in the middle of a cornfield.’ Yes, we are in South Dakota, and we are a premier cyber university, and we are telling our story loud and proud.”

Awards

  • 2020 Web Award Outstanding Website
  • UCDA Award of Excellence graphic
  • davey award graphic icon, gold

Services

Discovery report; user experience design; information architecture; responsive redesign; brand execution; visual design templates; art and photography direction; content management system selection; program finder creation; search engine selection and configuration; thematic CSS development; programming and site implementation; content migration; quality assurance testing; user testing; analytics configuration and custom reporting.

 

Visit the Site