It’s been a long year and we thought it would be good to look back at what we accomplished. We’re a small team, only ten of us full time (including myself), and a few part timers, to maintain 550+ institutional websites. Over the past five years we have used this blog as a platform, when time permits, to give some insight into our work, workload and processes. We have been quiet the last few months and in those months we have experienced the most change to our team, process and the work we produce.
I thought it would be good for myself, and you (of course), to take a look back at the last year to reflect on what we have done and how we have changed. This year we launched 25 sites. That’s one every other week. I have highlighted a collection of the most public sites:
This year we took on an ambitious redesign project, take six months to reimagine and reconstruct wayne.edu from the ground up. We put a small team together dedicated to this single project and on December 16th they brought us what you see today. I’ll be writing more about the project in 2014 but we now have a website and platform to build the future upon.
With the launch of the new homepage also came a completely online campus directory. Previously the directory was a print document and static Web pages. We worked with C&IT to integrate the data right into the main campus map and then into a completely new “WSU Directory” frontend.
Office of Military and Veterans Academic Excellence
Military and Veterans Academic Excellence was a redesign project to bring their website in line with the new capabilities of the office.
A complete overhaul of the Law School website and most of its digital communication properties. The new website is people focused and takes advantage of everything Wayne Law is doing.
Merrill Palmer Skillman Institute
A few small visual tweaks turned into an almost complete overhaul of the MPSI website. The goal is to use the visual design to build coherence to the Institute of Gerontology.
School of Library and Information Science
Another school where we completely reimagined their online identity. The School of Library and Information Science is much more than just teaching librarians to work in physical libraries. We took that inspiration and designed a website that was information focused and different than any other website we have produced in the past.
10,000 Small Businesses – Detroit
A non-university branded website built to support the Goldman Sachs 10,000 Small Businesses program.
Office of Economic Development
A new website for an office that did not have a Web presence previously. There is a lot happening in Midtown Detroit and the greater downtown Detroit area. This site highlights how Wayne State University is a driving force in the surrounding area.
Office of International Programs
The OIP is an umbrella department that oversees various international programs.
As the university’s presence outside of main campus evolves so does our Web presence. Previously we had separate websites for each extension center, with this redesign we changed that. We brought all areas outside of main campus into a single website.
Institute of Environmental Health Sciences
A reconstruction of an institute’s online presence. The new site is completely different than the previous and now more appropriately aligns to the institute’s goals.
Office of the President
This year the university welcomed a new President, and with any new leadership comes a new website. It was a great time to take a step back and analyze the goals and needs of a presidential website. We started from the ground up and created a website that President M. Roy Wilson can build upon as he shapes the university.
Office of Career Services
The Career Services website is a project we took on this year. The new site is now responsive and gets straight to the point, connecting employers with students.
Division of Development
A complete redesign from the previous site to focus on events, news and a responsive design.
We also redesigned the Alumni site from a third party CMS to integrate with the rest of the university systems. The goal was to have the same feel as the Giving website but make sure it still maintained its own identity.
Office of Continuing Education – School of Social Work
We were tasked at redesigning the Social Work Continuing Education website from Joomla into our native CMS.
Each year the University welcomes new faculty, we built a website to get them oriented with the University and Detroit.
In addition to websites our team also launched a few new digital signage templates around campus. The four highlighted above show the range of things we accomplish with the signs.
The College of Nursing uses their signs during the first week of classes to highlight which rooms their classes are in. The Recreation and Fitness Center uses theirs to highlight current and upcoming fitness classes. We created some full screen quotes by our president, M. Roy Wilson, to rotate through each sign. And finally our Welcome Center has a student sign in system, in partnership with the university’s CRM team, we hooked the sign to the data from that system and now display the waiting queue and wait times for students.
Throughout the year we have expanded our HTML email templates and capabilities. We introduced the ability to have multiple editable areas within a single email. There is no way to display the hundreds of emails we impacted this year but here is a subset:
40 Payment RSVP’s
Total RSVP’s integrated, tested and launched. That’s one for every other week of the year.
6 Live Streaming Events
From commencement ceremonies to guest lectures, we promote, stream events live, and moderate the chat during the event.
664.60 Website Maintenance Hours, 13,410.18 Total Hours Tracked
The graph above is just an overview, click for a more detailed inventory of how we spent our time this last year.
Looking to 2014
We have a few sites that didn’t make the cut this year to launch, they just weren’t ready. 2014 is going to be a big year, we are on track to relaunch at least four school/college sites and three major divisions. We will be integrating more sites into the new wayne.edu platform and focusing on data driven UX changes. We also have a few surprises up our sleeves, so stay tuned.
It’s been a while since I have posted site launches or updates, and I’ve missed it. The primary reason is we have been heads down working on the completely revised version of wayne.edu. This last week I was inspired by ENTP‘s weekly ‘changelog‘ post and decided to try it out a bit. Instead of posting once and a while when major things happen, I’ll post an update each week with the large and small things that have impacted the Wayne State Web.
Next.wayne.edu progress published in Today@Wayne newsletter
It’s no secret that we have been reconstructing wayne.edu from the ground up the last five months, but it has finally reached a point where we are comfortable announcing it for secondary audience feedback.
The first few months were dedicated to discovery, the team focused on mining the data we’ve been collecting over the past ten years on the current site. Then doing passive and active user testing with our primary audience (prospective and enrolling students). We then completely re-engineered our internal development processes and went to work creating a site that would resonate with that primary audience. At this point we were comfortable getting feedback from our secondary and third audiences.
The story in Today@Wayne accomplished just that, hundreds of comments, questions and insights came in this week. With one week until launch, we are prioritizing, tackling and scheduling out this feedback.
New WSU Header based on Foundation 5 rolling out
We made an under the hood update to our global header/footer this week. This v5 version works with Foundation 5 and can be built right into the style of a site with SASS. This reduces the number of HTTP requests and ensures the standard look across all our sites. You can see it in production on our Virtual Tour.
Virtual Tour moved to a new server
Another slightly under the hood update, we moved our Virtual Tour to a new server environment and rebuilt it completely on Foundation 5 with the new global header. It looks almost identical to the old site but it is now responsive, contains 50% less HTTP requests and is 60% smaller in file size.
Hosting a Google+ hangout for admitted students on December 12th
Last year we hosted a live discussion about living on campus (#LifeintheD) which was very successful. Next week we’ll be hosting a Google+ Hangout for admitted students. We are calling this chat #AskaWarrior and inviting all prospective students who have been offered admission for any 2014 semesters. The plan is to have staff and students from various areas of campus to answer as many questions as possible.
Student Service Center Live Chat now live
Another small but important update, we added “Live Chat” to the student service center homepage. The Student Service Center handles all requests for Admissions, Records and Registration, Financial Aid and Student Accounts Receivable. They are already advertising live chat on the undergraduate admissions homepage and as they add capacity to answer real time questions we will be introducing this live chat button across other Web properties where appropriate.
As a member and leader of a handful of Detroit tech groups I can say that the community is second to none. If you’re interested in anything tech related there is surely an event every day of the week to attend.
DetCoffeeCode is one of those groups, free to attend, and offers a great place to learn and network. Their next meeting is real close to home, right on Wayne State’s campus at Barnes and Noble.
DetCoffeeCode – Show and Tell
The afternoon will start with a networking session. Later, people will be able to show and tell their projects for 2014 to the group. If you don’t have a completed project then cool, show us what you have so far and we’ll help you out. Follow the Meetup event or @detcoffeecode for the updates!
Saturday, December 14, 2013
1:00 PM to
Barnes and Noble
5221 Gullen Mall
Detroit, MI 48202,
Where: The Qube 635 Woodward Ave., Detroit, MI
Speed by Design – Keep The Mobile Web Quick
As attention spans are heading towards zero and more and more of the population is constantly on-the-go, optimizing your mobile websites to load quickly and efficiently can make an enormous difference in visitor engagement, and most importantly, your bottom-line. Designing for performance should be a top-priority in keeping your visitors happy and allowing them do what they need to do quickly.
You’ll learn a few techniques on how to keep your mobile websites lean and loading quickly, how page speed is actually a component of good UX, how to test and benchmark under various network conditions, and how slow loading times can turn away visitors and potential paying customers.
About Jon Buda
Jon Buda is web developer who loves to design, or a designer who loves to code – depending on the day. He enjoys solving problems holistically, thinking about back-end, front-end, and design all as equally important parts in crafting great experiences. He helps to organize Refresh Chicago and is currently working with Table XI.
Front End Legos – Better Design with Reusable HTML & CSS
There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.
In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible, and how it benefits your design. Writing code is the easy part, finding a modular practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice today.
About Shay Howe
As a designer and front end developer, Shay Howe has a passion for solving problems while building creative and intuitive applications. Shay specializes in product design and interface development, specialties in which he regularly writes and speaks about. Additionally, Shay helps co-organize Chicago Camps, Refresh Chicago, and UX Happy Hour. You can catch up with him on Twitter as @shayhowe or on his website at http://shayhowe.com/.
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.
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/
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.
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.
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.
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/
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
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.
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
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.
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.
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.
The Wayne State Web department consists of ten people sitting at their desks in an open room in the middle of the marketing department, typically with the lights off. Each member of the team typically has fifteen tasks for the day and forty tasks assigned for upcoming dates. As you can imagine it can be hard to focus on the tasks at hand with people walking through the area or with even a one-on-one conversation happening at the desk next to you.
We try to manage these distractions by:
Wearing headphones – Being lost in our own music drowns out any other noise around.
Keeping the lights off – Reduces peripheral vision so we can focus on our screens and reduce the likelihood of noticing someone walk by.
Not having printers – No one in the Web group has a printer, we never have, and the rare time we do print we send it to a central printer in a different area of the department. This reduces noise and people just waiting around.
Reducing the number of phones – We only have three phones for the twelve total staff members. We do most of our support via email or Basecamp. But if someone does call, we have a single number answered by one person who can field the question and only interrupt another staff member if necessary.
“Library rules” before 11 a.m. – It’s simple: respect everyone’s time, space, productivity, just as you would in a library, before 11 a.m.
First things first
The video above, although not the most comprehensive, explains the crux of the problem. With so many tasks, projects and competing priorities it’s easy to get lost in the thick of the thin. We work diligently to not only develop personal tactics to stay productive but also an environment that focuses on completing those big or important tasks first.
Before 11 a.m. we collectively work to accomplish our most important item(s) for the day. We try to keep it to one thing, but you would be amazed how productive you are if you are not interrupted. Just try it for a week.
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 Copenhaver, sent 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.
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.
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
View the new College of Engineering website at http://engineering.wayne.edu/
“For the things we have to learn before we can do them, we learn by doing them.”