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/ 

Increased context on the site index

Something we have overlooked for a while is the site index on wayne.edu. We have been gathering sites and adding them to the list, but frankly it is something we don’t use on a daily basis. The list is used as a “suggested search” in the search box on the homepage. When we (internally) are looking for a website we just start typing in name and it quickly pulls it up and you have the ability to jump right to the site.

But others use the index

As we looked at our stats we realized just how many people use the site index. It is linked to from our global header and is the ninth visited page on our site.

Looking at the page and trying to use it a few times we realized it had some serious flaws. We had too many links on the page and there wasn’t enough context around them.

School of Medicine

The second largest set of sites were from the School of Medicine. The school is so large is basically has an entire copy of the main campus departments. This is what caused most of the confusion, two Admissions Office’s, Computing,  and Research departments to name a few.

Our solution

We decided to keep the full list but have the ability to filter to only the main campus or med campus sites. We also added “, School of Medicine” to the end of all the medicine sites. I have included an initial sketch of our idea on the right.

The site list does need some clean up and we are doing that slowly, it takes some time to go through the hundreds of links to determine which are no longer relevant.

One less feature going forward

The “Suggest a site” feature has hit the cutting room floor. It wasn’t hard for us to run a report and realize almost all the recent suggestions were spam. Almost all authoritative sites that have been added in the past year have been by us, only three have been from the campus community. It wasn’t worth the time to mark the spam to justify the feature.

Hopefully our users will find this new context and features useful. We are watching the stats and will be modifying the page even more based on how our visitors are using the page.  We hope you find this new layout just a little bit more useful if you do use it.

View the new site index at: http://wayne.edu/siteindex.php

The birth of a new feature

We have been running into the same reoccurring issue with the digital signs and yesterday we just had enough.

We are pulling the news announcements from the CMS where the news is already being entered and scheduled for the departmental websites. The issue arises because it is the same information in two different contexts.

So we sketched out an idea of how we can allow content creators to modify the titles just for the digital signs. By default the sign would need to use the main title but if the department wants they can change it. The initial sketch is above.

Three hours later it was implemented into the CMS and pushed to production. The signs are now displaying the titles specified for the sign context.

Situations like this make us glad we maintain our own CMS and have the flexibility to accomplish the universities goals in a timely and cost effective manor.

Whiteboard: Exemplar Online Newsletter

Whiteboard of Exemplar Online Newsletter

Just wanted to post a quick example about the importance of using a whiteboard during an initial meeting to visualize different areas of a site. Although we talked with the client over e-mail about the navigation and features of the site, drawing it out made it real. We ended up walking through the visitor’s experience and moving things around on the fly.

Above are the final whiteboard wireframes and below are the actual approved templates. As you can see they are very similar.

Without going through this process with the client we would not have ended up with a final end product. This method eliminated countless design and programming revisions.

Whiteboard: Planning our next campus map

After some delay we finally kicked off the new campus map project with a two hour meeting, tons of notes and some whiteboarding.

Current campus map

The current map is completely flash based. We developed it over six years ago when flash was the upcoming trend. Although it is old it still works great, we have had nothing but compliments from visitors about how easy it is to use. We have tested it with many people and we don’t want to loose any functionality. The problem is it is not accessible on mobile phones and is hard to connect to external services.

As a small mobile fix we forward any mobile traffic to an SVG version of the map so it is at least usable if someone is walking around campus and is accessing it from their mobile phone.

The current campus map is available at http://campusmap.wayne.edu/
The SVG version is available at http://campusmap.wayne.edu/iphone/

Some upcoming new features

  • Built on top of Google Maps
  • Mobile version with location awareness
  • Separate maps for main, medical and extension center campuses
  • Locations for OneCard fill machines, ATM’s, wifi, computer labs, blue lights
  • Campus tours
  • More images/videos per location
  • Upcoming events per location
  • Integration with Foursquare/Gowalla/SCVNGR

User interaction

The best thing about using a whiteboard is the ability for everyone to see the same thing, add and erase things as comments come up. Walking through the user experience step by step gives everyone on the team the ability to understand the features and layout in context. The drawing above although it looks simple took a few iterations to get to and a lot of the functionality identified in the single picture.

Basic functionality like listing and searching was the largest part of the discussion, then allowing single or multi layers on the map and how a visitor would add, see and remove them. The options are endless but seeing it on a surface, using a finger as a mouse and actually mimicking the user’s experience is crucial to coming up with a usable product.

We will be posting more about the map as it develops in the coming weeks.

Whiteboard: Giving HTML E-mail Flow

The last two weeks have been really busy for us if you haven’t noticed the lack of posts. It’s been a good busy though and we have been getting a lot done. Posts will be coming soon.

Boxes and Arrows

In the spirit of sharing how we work I’m starting to post more about our process. The photo above is the planning for the upcoming Division of Development HTML e-mail newsletter. The first thing we do after meeting with a department and before we start any design or development is outline the entire user flow on a whiteboard. We do it with boxes and arrows to show direction, space and user experience.

As we talk through it the flow often changes, the content moves around and we simplify things. It’s also a prime time for the designers, developers and content writers to get a good understanding of the requirements for the project. We experience pain points and work through them to focus the whole experience on the user.

Sneak Preview

Here is just a preview of what it will look like when it launches in the next week or so… (subject to change)

Please welcome Brett! Our new student developer

A few weeks ago I put a call out for a student developer looking to work with us. The response was awesome, thank you everyone who inquired! Unfortunately we only had one spot and that position was filled by Brett Brainered.

Brett is a senior in the computer science program and has done web work for the last few years. He started two or so weeks ago and I just haven’t had the chance to post about it. Brett jumped right in to adding tools to our CMS and you should start seeing some of the work he is doing shortly.

His first project is expanding the report and maintenance areas for each site in the CMS. We are adding a “page analyzer” which will inspect the content on each page within a site. Check it for broken, development or slow responding links and images. It will then validate the content and/or clean it up with HTML Tidy.

We have been doing quite a bit of redesigns lately and often the structure of a redesign changes from the current site. The page analyzer will have the ability to download an Excel sheet for us to start a content audit. Once we determine where each page will transition to we can put that information in the CMS and have this tool copy the pages to the new development site in the new location for the department to begin working on cleaning it up. It will be a big help to have this migration done automatically.

Whiteboard Learning

The first thing we did with Brett was to walk him through the tools and flow of how our pages execute. We don’t have any official documents where this is explained. We like to keep our process as agile as possible so things may change faster than we can document them. Probably not the ideal situation but it works.

We do all our teaching on whiteboards. Whiteboards are the best way to show an idea visually as it matures and offers the ability to change and manipulate things as you step through and learn. I personally have probably 100+ pictures of whiteboard drawings which explain various UI interfaces to code execution.

Below is the flow of our page execution for our web apps. Not all sites go through this same process, just our large applications. It might look a little confusing, especially since it’s pretty sloppy, but you can get an idea of the flow.

I think I will start posting more whiteboards on the blog. After looking through them I realize how useful they are in explaining why we do the things we do. The decisions behing UI elements and user flow through a site are told as a story on the board and that is really valuable information.