The Deli Creative
color_image_homepage.png

KU Brand Center - UX Design

Website user experience design for The University of Kansas Brand Center.

 
KU Brand Center header Copy.png

KU Brand Center

 

Create a website for all Jayhawks to learn about the University of Kansas brand, how to use brand assets, and to serve as a central space for launching university-wide initiatives.

 

Client: University of Kansas, Marketing Communications   |  Services: User Experience   |   Website: brand.ku.edu   |  The Deli Team: Meredith  |  Date: 2017


 

KU’s Marketing Communications team had just finished an update to the university’s brand platform. Next, the team needed to be sure that every employee who communicates on the university’s behalf was representing the same message. At a school that enrolls nearly 30,000 students a year, that is no small task. The team developed a strategic plan to launch a new website, the Brand Center, in conjunction with an event on campus with presentations, giveaways, and question and answer sessions.

The Deli Creative was hired to design the Brand Center website and extend the brand language to include web elements. Many of the decisions made for this site were then carried over globally across KU's hundreds of sites.

How do huge brands keep consistent messaging?

Before the Brand Center was created, employees had very limited resources for learning about brand assets and messaging. I created a survey to send out to a group of about 200 employees in communication roles in order to better understand the goals for the site. One anonymous voice from the survey stood out -

"A unified voice is better than the sum of its parts.”
 

After wading through our findings, we began to create user groups with detailed explanations of their skills, motivations, frustrations, and information about their roles. The primary audience for our new website was ready to present one cohesive voice, but they just weren’t sure how. 

Our research included a user survey, competitive analysis, and a site audit. 

 
 
user_groups.png

The user groups that would benefit most from the Brand Center were the Communicators and Organizers. Their stories were prioritized over the needs of other groups. 

usergroups.png

How do we know what people need? Simply put- we talk to them. We collect non-bias information, take a close look and discuss. Our method is sometimes quantitative but often anecdotal.


What did we find?
After writing around 50 user stories based on interviews and surveys with brand advocates we determined there were 3 main categories of needs.

  • A more complete understanding of the brand story
  • Guidance on writing with the correct brand messaging and tone
  • Instructions on how to use brand assets along with templates and examples

Each user story was ranked by priority and feasibility, then evaluated against the current site audit to determine if it had previously been addressed, if it needed a minor update, or if was complete gap in the current content. This info helped guide us throughout the remainder of the project and gave us a clear understanding of the content needed for the site.

userstories.png

How do we stay on track throughout a large project? The user stories informed our early project planning. We broke feature and content sets into design sprints, tackling each group based on priority.


Adopt and Adapt
After I presented the research findings to Marketing Communications we discussed how to introduce the new material to such a large group, how to manage expectations, and how to give them the tools to be empowered to fully engage with the brand. We determined that in order for users to embrace the brand changes the site would need to: inspire, educate, and be flexible for inevitable growth and change.

cardsort.png

How do we organize content content for multiple users with different goals?
First, we needed to determine what types of content and features would meet the needs from the user stories. For each user story we wrote notes about what we could do to accomplish this goal. From here, we broke down the content needs into individual cards in order to physically arrange and understand what we were working with. Group, sort, discuss, repeat. This led us to architecture through creating a first draft of the site map, and the second, and third.

Brand_Sitemap.png

Print to Web and Mobile
Since the Brand Center was the first digital use of the new brand identity elements we needed to further consider how the style would translate to web. I created a Style Tile in Sketch that laid out how some common web elements would be styled on the site. This content was considered a further iteration of the brand guidelines book that the team had created for the new brand. The Sketch file became a reference library that the group could use again and again.

Basic Style Tile.png
Basic Style Tile Copy.png

How do we translate print-based branding elements to digital? We must consider responsiveness on all device size, hover states, header and footer, photo treatment, typography best practices, and microinteractions. 


Wireframes
With site map, content plan, and style tile in hand now it was time to bring it all together and build wireframes for each page. This gave the content creators and developers a better idea of exactly where the content was headed and how it would flow on a page. Wireframe iterations began with whiteboard sketches, grey boxes, and eventually built up fidelity until they were production ready. 

Screen Shot 2018-07-09 at 7.16.52 PM.png

Development Iterations
Through the remainder of the project, I worked very closely with the development and content teams to bring the website to life. We problem-solved our way through several iterations of the site as the wireframes began to transform into a realistic and functional website. Below are a few highlights:

Story
This page addressed the need for brand advocates to be inspired to understand at a fundamental level what the brand position is. The Story page needed to be a shining example of how to bring together brand identity and messaging in a single view.

Guidelines
Each guideline page quickly explains how to use the brand element, provides examples, and instructions. Guidelines are easy to navigate to and the format allows for growth as the team is ready to provide more topics.

Tool kit
The tool kit houses the downloads library with important templates that help communicators get started.