Redesign: Campus Retail Shops website

Shops desktop viewShops mobile view

We recently launched a redesigned Campus Retail Shops website. This was another in the set of Business Operations websites to get updated. Unlike the others this site is a living repository of retail tenants and shops available to the campus community. This gives the site a few unique challenges:

Content pulled from campus map

Unlike most of our websites, the content for Shops was managed in a separate database so we could provide additional information for each location. This can be hours, parking information, specials, etc. We decided to centralize that information in the university campus map. This required us to add more fields to each map entry, but gave us the benefit of using that extra information anywhere else the location is viewed (mobile/desktop map website, search, etc). It also allows for a single source of data, no more duplication when locations are added, edited or removed.

OneCard fill locations map

Like the retail shops, there are other locations on campus that are not buildings, but instead are inside buildings or parking structures. These are now in the campus map proper instead of a custom Google map.

Show your OneCard and save locations

Lastly, there are locations which may or may not be on Wayne State’s campus. These are shops that offer a discount to our students/faculty/staff for showing their student ID card. This was a tough decision, should we be storing these outside locations, some many miles away, in the campus map data? In the end we decided to store the information with all other locations. The map already had the structure, no additional programming would be required and it would offer a single spot to manage all locations.

Quick page loads with YouTube SPF

If you’ve been browsing through the site while reading this you may notice how quick each page loads. This site employs a method of navigation that we have used on all sites in the past year. The tool is YouTube’s Structured Page Fragments (SPF).

Data available in the API

Building additional things into an already large data set has it’s advantages. The campus map API will now return this additional information for each location.

View the new Campus Retail Shops website.

Redesign: Academic Senate Website

academic-senate-oldacademic-senate-new

We recently launched a redesign of the Academic Senate website.

The previous site was a framed website and managed by hand. Since the site isn’t overly complex that workflow was efficient for a long time. There were a few barriers to that approach, though, and the Academic Senate came to us for help with a solution.

What we came up with is a fully responsive website managed through the university’s central CMS and automatically pulls in data from across campus. A few key features of the new site include:

Built on Foundation 5

As we evolve our responsive approach we have settled on Zurb’s Foundation framework. It is light weight, flexible and allows us to extend it where needed without having it feel like a “Bootstrap” site.

Membership lists using CMS profiles

A big part of the Academic Senate website is broken down into committees and related information. Since the membership of these committees changes over time, and people can be on multiple committees, managing this information can be cumbersome. We transitioned each member into the “profiles” area of the CMS where they can be associated with multiple committees if needed and the information can be managed by the people themselves or by the Academic Senate staff with just a Web browser. They can be updated once and published across the site.

Profile images and content pulling from existing sites

Almost all Academic Senate members already have existing profiles on their school/college/department websites. We didn’t want to duplicate this information so we pull their existing profile information to reduce redundancy. When the member updates their profile, it will automatically update on the Academic Senate website.

Under the hood

A few things you won’t notice is we are standardizing our build process with new sites. We have a Yeoman site generator that we use as a base for each project. Next, we’re using Grunt (soon to use Gulp) as our “build” step to check and compile all assets into their appropriate folders. This not only reduces the initial project build time but also separates source files from their rendered machine optimized results. On that same spirit we have begun to deploy sites in a standard way to speed up the process and reduce the possibility for mistakes.

View the new Academic Senate website at: http://academicsenate.wayne.edu/

Redesign: Undergraduate Research Opportunities Program (UROP)

urop-home-oldurop-home-new

The Undergraduate Research program recently went through a transition in the Office of the Provost and so did its website. Both the scope of the program, name and the visual direction have changed to reflect its new goals.

Like all current sites we launched the site taking advantage of our responsive framework. This means that the website will respond to any device size. This technique has its advantages and disadvantages, I won’t go into all of them, but I’ll highlight a few differences for this particular site.

Tablet is treated as a desktop

For this site, anything above 770 pixels wide is considered a desktop. Because the website is a basic content-driven site with two main columns we did not present a tablet specific view. Although if the site had a deeper menu structure of multiple columns we would have had to adapt to fit within the smaller screen size.

Non-responsive images

Building upon the decision above, the lack of images on this site led us to use a responsive image technique. The problem of optimizing images for each device situation is changing every week. Our lead developer, Rob Vrabel even highlighted the challenges in a recent blog post. Since we are still standardizing the process, we did not want to launch a process that may change in the coming weeks for a few images which are already pretty small.

It doesn’t look all that different than a “traditional” website

This site is straight forward and does its job presenting the information needed and gets out of the user’s way.  It has allowed us to refine our internal process of designing responsive sites. As we roll out more sites patterns will emerge and we will build upon our research. In the end though its all about the user and their experience. Although it may not look like a huge change, a website implemented this way can make a world of difference for our visitors.

View the site at: http://urop.wayne.edu/

The innovator’s dilemma – Isolating the wayne.edu Web team

innovators-dilemma

For the last year or so I have been talking about our “restructure of wayne.edu” homepage and website. We have made some progress but we are not nearly where we should be. This isn’t because we don’t think the project is important, but instead have assured our clients’ (university departments/schools/colleges) deadlines are being met instead. This week that all changed. We isolated four staff members and dedicated them to the restructure and re-imagination of wayne.edu and the top 1,000 pages to support enrollment and retention.

The Innovators Dilemma

One of my favorite books is The Innovator’s Dilemma. If you haven’t read it I suggest you pick it up, it’s a short read and totally applicable to any industry. It outlines the process of company growth and why innovation slows as firms get larger. There are various reasons for this but the largest is that it is easier to up-sell existing customers instead of going after new untested markets with new products. Because these untested new products or markets don’t show value they often do not get the attention of resources they deserve until it is too late.

“What this suggests is that the management best practices are only situationally appropriate. There are times when it is right not to listen to customers, invest in lower performing products that promise lower margins, and pursue small rather than larger markets.”

This is the exact situation we find ourselves in. Because we’re focusing all our time on ensuring we have “internal client” work we haven’t had the time to focus on our true customers, prospective students.

Dedicated resources

The book goes on to explain how companies have been able to overcome this dilemma and innovate around or with disruptive technologies (even if they cannibalize parts of their existing company). One of these successful methods is to create an isolated team in both a workload and also a physical environment without any constraints of normal business practices. This allows a team to innovate in ways that are simply not possible in the day-to-day of company operations.

Starting this week we have done just that. Four staff members, Rolaine Dang, Tom Krupka, Rob Vrabel and Alex Bienkowski have been isolated and given an ambitious project. Take a step back and look at the macro view across all of the enrollment sites that now work well individually and stich them together to work well as a single user experience.

waynedotedu-webteam

All of their current projects/tasks have been re-assigned to other staff members and they have physically been moved to a single office (above) where they are isolated from the normal client work we do here in Web Communications.

Re-imagining wayne.edu

I won’t go too much into the project scope at this point other than the large and long term goals. The team is charged with launching a “re-imaged” wayne.edu by the end of 2013. This will include restructuring those top 1,000 pages that are focused on enrollment and retention.

At the moment the websites within wayne.edu work really well individually, they  have their own navigation, information and design. This works well for visitors that know exactly what they need and what department “owns” that information. But this does not work for those prospective students or on-boarding students who were recently accepted and now need to orient themselves with the university. Browsing through theses websites is not only confusing as they bounce from department to department but it also gives the impression that the university is disjointed. The first goal is to fix this by taking all the departments in these 1,000 pages and bring them all under a single look, functionality and domain. This will result in a single user experience, voice and impression of the institution.

The second charge is to create a revolutionary Web experience for our visitors. To use as much data to tailor the experience for an individual visitor and bring the power of the Web to that experience. This charge is still vague because we won’t know exactly how this will impact visitors until the discovery phase is complete. In the end, though, the final product will not be a set of static pages, but instead an experience that will resonate with the visitor. We’ll just have to wait and see how it shakes out.

Follow the progress

The wayne.edu Web team will be blogging about their status each week on the wayne.edu blog. Over the next few months they will be keeping track of scope, options, decisions and progress in both public and private posts. After the relaunch of wayne.edu we plan to make all the private posts public and allow everyone to see all the work/decisions that went into building what we hope is the most successful website for the university.

Follow the blog: http://blogs.wayne.edu/waynedotedu/

Redesign: Division of Development & Alumni Affairs websites

Last week we launched the redesigned Division of Development & Alumni Affairs websites. These sites allowed us to accomplish some firsts that we’ve been working toward for some time.

The overall goal of the redesigns was to bring both into a similar look, feel and functionality. Previously, both websites were managed separately, in different content management systems and servers. They were not able to share content and the Alumni website didn’t utilize university resources. We set out to change all that and more.

Division of Development

giving-old-home giving-new-home

Over time the needs for the Development website had changed and we needed to refocus the homepage and the content within the site. The first thing that we changed from the old (left) to the new (right) was the centerpiece focus. We brought the stories that were buried and put them up top, front and center. These stories are what change the heart and mind of alumni and donors. The homepage highlights a handful of stories but we built a full donor stories archive where all will be available long term.

We then pulled the news and events up, but also created a clear left column for calls to action. This simple homepage gives the visitor an overview of what is going on while at the same not being overwhelming.

Alumni

alumni-old-homealumni-new-home

The Alumni website is actually two websites, the front facing homepage and a separate members-only community. The focus of our project was to reconstruct the front-facing site while giving a small facelift to the community. Keeping with the same overall feel of the Development website we kept the homepage simple. Alumni engagement events are highlights in the main centerpiece area, three main calls to action are highlighted in the middle and below a list of news, events and longer standing promotions.

The largest change though to the Alumni website was the information architecture. Between the time we started the project and finished, the university changed from a dues-based alumni model to a free one. This change had us and the Alumni staff re-thinking the purpose of every page on the site. It resulted in far fewer pages but the ones that remain are very focused.

Mobile and other firsts

giving-new-mobilegiving-new-child

I made an announcement a few months ago about only launching responsive websites from here on out and we are committed to that. This site started far before that announcement and was the first start we tailored to mobile from the ground up. The wireframes, designs and everything for this website started and continued in the browser environment instead of isolated in Photoshop. The end result is a very usable site on mobile, tablet and desktop, and we learned a lot along the way.

The first thing we tackled is how to handle multiple tier navigation without overwhelming or underwhelming the user. I’ve talked a lot in the past about how 60 percent or more of site visitors enter on an interior page and how to design the best experience around that. Those visitors need to orient themselves quickly with where they are on the site and where they can go from there. We wanted to keep the same approach we take with desktop websites, allow the user to get a sense of where they are at a glance and identify the local navigation quickly. We came up with a simple solution: on a small screen show the breadcrumbs of where a user is on the site, show the most local menu expanded up top, and give the visitor a “Menu” button to expand the full top menu. See an example, above, of the small screen (left) vs. full desktop version of the same page (right).

In addition to the mobile-first responsive design, these two websites are the first to feature a new global Wayne State University header that is also responsive. I will probably do a full post on it once it’s officially released. We are still working through a few specific browser quirks. But overall we were able to reduce the HTML, CSS, and image footprint of it by about 60 percent of the previous header. It only includes a single image, utilizes the same icon font that is used on the pages themselves and is fully responsive.

Lessons learned

Because our redesign projects typically span 9-12 months from initial meeting to launch, that leaves a lot to happen in the Web world. This website is no exception, over that span of time the CSS framework we used, Foundation, for the wireframes and the resulting design, updated from version 3 to 4 and changed completely (for the better) the way it handles HTML and CSS. By the time that happened we couldn’t go back and redo everything. The biggest lesson we learned from this was we have to be nimble when it comes to locking ourselves into a single framework.

ie8-usage-giving

The biggest lesson we learned though was about browser support. Most all of the newest Web technologies are supported fully only in the newest browsers. This isn’t a problem for most (95 percent+) of our external website visitors. But the world of higher education is filled with large enterprise systems that our campus relies on every day. Unfortunately those systems are slow to update and support those most recent browsers and thus there are a larger portion of computers on campus running older versions of browsers (read Internet Explorer 8). Recently a rash of Web technologies have begun to drop IE8 support, the Development and Alumni websites were not immune to that speed bump. So we had to put in an uncomfortable amount of small bug fixes and ended up relying on respond.js to bandaid the situation until we see IE8 visitors drop off enough. I’m hoping to have an official announcement soon about what are browser support will be long term.

View the sites: http://giving.wayne.edu/ and http://alumni.wayne.edu/

College of Engineering website – then and now

Seth Godin recently posted about “Just the good parts“, a trap I think that all too many of us fall in to. The Web is no exception here, it’s great to have an amazing website, but it isn’t something you can make appear overnight or pay a company to produce for you. The quality of your website is a direct reflection of how much time and energy you put into it.

“The very thing you’re seeking only exists because of the whole. We can’t deny the difficult parts, we have no choice but to embrace them.”
~ Seth Godin

Two things happened a few weeks ago that talk to this point directly. The first was that we launched the last of 10 College of Engineering departmental and programs websites as an overall restructure of the College of Engineering Web presence. Secondly, their Associate Director of Marketing and Communications, Kristin Copenhaversent out this email to sum up the recent changes to the marketing of the college. The message was great to bring to light some of the great things available to the college but it intended to be brief. It didn’t get into the details about the process and hard work leading up to what seems like logical pieces of the Web.

College of Engineering “then”

College of Engineering “now”

More than skin deep

Looking at the screenshots above you can tell we made a dramatic change in the visual appearance across every engineering website. Before, every department was able to create their own interpretation of what it means to be part of Wayne State University. In theory, this seemed to work great for individual departments because they had the ability to create highly crafted messages. In reality, the Web was not something in which they specialized. The limited department resources were focused on their research, teaching, and education; the website was often the last thing addressed. This isn’t unique to engineering; it is something we see across our campus and across the entire Web.

Dean Farshad Fotouhi identified this situation, allocated funds and hired an Associate Director of Marketing and Communications to work closely with our team to create solutions that worked for each department and the college as a whole. It came down to every engineering department having a cohesive yet unique look, voice and set of values represented online to ensure consistency and success for prospective and current students.

Insightful statistics

The project overall took on a life of its own but we broke it down in to multiple parts and stages, and had a very consistent routine to starting, migrating and launching every department, alumni, student organization, and other websites, to ensure its success.

This is just a sample of what went into the project as a whole (this doesn’t include daily maintenance and post launch updates):

  • Project Scope: 39 websites, 8 email newsletters, 12 email templates, multiple digital signage templates, internal tools, and more
  • 550+ Web Communications staff hours
  • 45+ hours of meetings with College of Engineering
  • 2 homepage revisions after initial launch
  • 1,700 pages on the new site (compared to 5,000+ on the previous)
  • 75 unique “templates” across the entire website
  • 8 new tools created in the CMS to accomplish goals that are now available to everyone
  • 30,000+ of Web visitors per month
  • 50,000+ email interactions

Below is some insight into where the 550+ hours of Web Communications staff time was spent. The bulk was spent on transitioning content, this is moving the content from the old website into the new. I want to clarify this is not just a copy-and-paste task. It means evaluating and editing every single page, ensuring it’s up to date and possibly splitting it up, removing it, or combining it with other areas across the entire website. This takes dedicated time between the college and Web Communications. We talked daily with Kristin and met every Friday to track progress, ask questions and create a plan for us during the next week. These meetings were grueling but this is exactly a direct reflection of the focused time spent that resulted in a successful website. Simply put, without the talent from the college putting in the hard work, this website redesign would never have been a success.

Time spent - Engineering

Tools that make a communication strategy work

  • College website
  • Departmental websites
  • The ability to share news/events/promotions between them all with a click
  • Faculty Profiles with In the News, Publications, Books, etc.
  • Spotlight on Faculty, Students, Alumni
  • College HTML email template
  • College email newsletter
  • Departmental email newsletters
  • Faculty experts list
  • Social media with support behind the content
  • An analytics package focused on objectives and goals
  • A key employee focused on doing the hard work it takes to bring an entire college together to speak in a single voice to the public

Overview of the Engineering Web content workflow

engineering content workflow

View the new College of Engineering website at http://engineering.wayne.edu/ 

Redesign: Office of Student Financial Aid

Previous Financial Aid HomepageNew Financial Aid Homepage

This week we launched a redesigned Office of Student Financial Aid website. The previous (left) and new site (right) are pictured above.

Not only was the website due for a redesign but it also marks the end of a milestone for the work that we produce. This site will be the last non-responsive major department website that was in our pipeline. From here on out we will be designing and implementing for mobile first and responsive.

Information Architecture

Like most of our redesigns the push came from the overgrowth of the original scope of the navigation. Users can deal with “old” looking visuals, but as soon as the website is hard to find crucial information, it’s time for an overhaul. Our first task was to reign in the thirteen item main menu to just six. This helped the visitor scan and find a direction quickly.

We then took to overhauling the architecture of the information on the homepage. The previous website had information where it didn’t belong. New programs, deadlines and priorities cluttered the previous homepage. We set out to compartmentalize information in easy to scan columns that could expand if needed in the future.

Visuals

The structure of the page content was not the worst we have seen, but there were a lot of areas that needed improvement. For example, the new information chunking on the homepage gave us the ability to visually separate different information and allow for areas to grow in the future. For example the promotion buttons below the menu can expand or contract depending on the time of the year. The main image can be clickable if needed and each column can have more or less resources as needed.

On the child pages we highlighted the selected menu area to make it stand out. Since we only have six main menu items, the secondary menu list is a little larger than normal. We didn’t want to remove the other main menu items so we could keep the context but at the same time we didn’t want the local menu items to get lost. We also added a “Related Links” right side menu to each page. This allows the Financial Aid department to pull specific resources to the top even if they are linked from the content area.

View the new Office of Student Financial Aid website at http://finaid.wayne.edu/

Redesign: Computing & Information Technology website

Just in time for classes to start we’ve rolled out a new Computing & Information Technology (C&IT) website. The new site takes in to consideration all the feedback and analytics we’ve gathered since the last relaunch in 2010.

Information overload

C&IT offers a lot of services, and everyone at the institution has to interact with a handful of their services every day. We discovered that the needs of the site change based on time of year and audience. Faculty/staff are always in need of base services but often don’t realize the full breadth of what C&IT offers. Students who have just enrolled need to get connected to the network quickly and communicate with their professors. This website is key to making that a seamless process.

The previous homepage and directory of services put everything right out front in order to be “comprehensive”. But this approach suffered from information paralysis, lots of links, lots of text, and too much to scan. Visitors ended up clicking on the main menu item for “Services” instead of going to the category of service they needed. The “Services” pages did have the same information as the homepage but presented it in a slightly different way.

Service catalog before (left) vs. after (right)

Previous services pageNew services page

In conjunction with C&IT we tackled this information overload on two fronts. The first is a simplified list of services on the homepage organized by “category” which include a colored image. Less information + visual cues means it is easy to scan.

Diving deeper in to the services landing page shows even more optimization. Building on the idea of “discovery” we added a few options in addition to the simple A-Z list. This page now allows for organization by audience, category and built-in search. This method helps both the frequent and infrequent visitor find what they’re looking for with context about additional services they may not know about.

Building on consistency

The previous website had a large focus on getting out as much information about a service as possible which seemed very logical. But a consequence of having each department maintain their own pages led to inconsistency. Some areas had a lot of resources on their pages while others just had the bare minimum. We knew being able to compare services apples to apples would help visitors feel confident in their decision based on Web content instead of having to call and talk to someone.

Service information before (left) vs. after (right)

As you can see from the two screenshots above, the previous version on the left has a lot of information in a full paragraph, it takes time to scan and read it. The new website breaks content in to specific fields so they can be displayed under common headers and easy to scan formatting.

Extending the CMS

This consistency was accomplished by a small but powerful addition to our CMS, Custom Fields. Inspired by WordPress we had a need to attach structured information to each page. What we figured out after adding the ability for each site to have their own free form title and value pair is that we stumbled on something very powerful.

Below are some of the custom fields for the GroupID service. There is now basic structured information that we can use throughout the website. You can also notice that we allow for multiple fields, there are two “audiences” below.

Custom Fields in the CMS

Because the website content is always evolving and C&IT can add/remove services at any time we wanted to make sure they didn’t have to maintain the page content plus another service catalog database to organize it. We have a custom field called “Service Title” that we are able to use to pull all active pages with that field in to the service listing page. It allows the website to stay updated in multiple places simply by attaching the correct meta information to each page. It’s very natural.

A few other small gems

View the new Computing & Information Technology website at: http://computing.wayne.edu/

Redesign: Institute of Gerontology website

It’s been too long since I’ve posted about a redesign project and I finally got around to writing a few posts. I’ll start with the new Institute of Gerontology (IOG) website. The before (left) and after (right) are pictured above.

Information architecture

Over the last four years the IOG has changed and, well, frankly, the Web has changed. There were a few IA challenges that we had to tackle. Our primary concern was combining the two completely separate menus. The work at the IOG falls in to four pillars and this was one navigation. The other was a more action based navigation. Since there was a lot of cross over in the menu items it was hard to tell which menu their visitors were using.  We used a combination of heatmapping and Google Analytics event tracking to determine where and how people were clicking. This was crucial to determine how and where people were looking for specific information.

Wireframes

Once we had a navigation that accomplished both the IOG’s and their visitors’ goals we started visualizing what was important to be represented on their homepage. Their audience is typically older individuals looking for one of three things: research, events and registration, or resources. So these items had to be prominent.

After presenting the wireframes and walking through the user experience with the IOG we determined that option no. 3 was the best choice. It gave enough attention to the centerpiece and the three main action items. It also felt the most balanced and allowed for flexibility where the others did not.

Visuals

Since the previous IOG website launched the institute has gone through a slight re-branding and we wanted to ensure that it made its way on to the website. Our process was to create three wireframes based on the IA and UX before adding the visuals. Because we did so much work up front to determine the user’s experience we only needed to create one visual direction to be consistent with previous discussions and meet everyone’s expectations.

Content

Although content is last in this post it’s something that we start as soon as the information architecture is approved. Even though we reduced the number of pages by one third there was still a lot of writing to do (about 90 pages). Each page was migrated one by one and cleaned up to be current and work within the new architecture. In the end it’s great that users can get to this content quickly and when they do, they find accurate information.

View the new Institute of Gerontology website: http://www.iog.wayne.edu/

Redesigned: Physics & Astronomy Department

We recently launched the Physics & Astronomy department website. This site fits within the established Planetarium theme. Physics is one of the few College of Liberal Arts and Sciences departments that have broken away from their standard template to focus on a brand that resonates with their primary audience.

Visuals

In order to effectively pull in prospective students we had think like a student looking for a physics or astronomy degree. A large centerpiece image shows off activities in the department. The goal is to attract a student by showing things they could be working on if they enroll. We made sure to also highlight the related programs in promotion buttons on the left hand side. These are supporting reasons a student would pick Wayne State over others schools.

As we evaluated the offerings of the department we ran in to a little confusion about which degrees were offered at each level. We set out to solve this with the new design by highlighting the degree types on the homepage in a multi-column view. In addition, we have a more detailed table on the programs page. This allows a student to see what is available at a glance without having to struggle to find information.

Content

Program descriptions and course listings were on the top of our needs list. Without an accurate and complete description and list of requirements, students won’t be confident in their decision about applying to the program. Creating confidence is the main goal of the content on this site. We ensured every page was hand transferred to its new location and revised for accuracy.

Extending beyond the Web

As an added bonus to using the main university CMS and events calendar is the ability to extend their information beyond their website. Events get promoted across multiple Web areas including the student portal, Today@Wayne newsletter and mobile app. The physics department also has a digital sign in their space that promotes local news, events and features on faculty. All of this information pulls from the same place and on the same schedule so there is no need to enter news and events more than once.

Visit the new Physics & Astronomy website at: http://physics.wayne.edu/