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.
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/
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
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
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.
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.
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/
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.
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.
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.”
― Aristotle
I recently spent sometime working on a responsive header using foundation 4 and was in the process of testing it on other machines around our office. I noticed on a co-workers machine that the fonts looked a lot different than on my machine. I was puzzled as to why this was occurring.
My browser vs. Co-workers
We are both using Mountain Lion and Chrome in this example. As you can see the fonts look thicker and bolder on my co-workers machine. I did some investigation and found an option under Mountain Lion’s general system preferences called “Use LCD font smoothing when available”. On my machine this was unchecked. It looks like on newer machines this is checked by default. If you uncheck this option and relaunch your browser (Chrome in this case) you’ll notice the thicker and bolder fonts go away.
We wanted to find a solution to normalize this on the web because we preferred the way it looked without font smoothing enabled. We found that if you apply this to your websites it fixes the problem. Please note that this only works in webkit browsers. We have not found any other vendor prefixes that accomplish this.
body {
-webkit-font-smoothing: antialiased;
}
Rolaine has been out on maternity the last few months and we missed her terribly. We missed her so bad that we placed something on her desk each time we thought of her. As you can see the items added up quickly and she came back to an overflowing welcome this morning. 
Welcome back Ro, we missed you!
There is only so much time in the day and if you’re not careful small distractions can chip away at your ability to accomplish tasks. I’m always looking for ways to reduce distractions for myself and my team.
Distractions break “flow”
We are big fans of 37 Signals and they have written about distractions extensively over the years. The nature of our work requires a balance of requests from many constituents around campus and the actual work those requests require. If we can’t accomplish the desired work we might not bother taking it on at all. The desired effect is to get in to a “flow” throughout the day to concentrate on the task at hand and complete it with the clarity and attention that every task deserves.
It takes a village
We have done many things as a team over the years to improve the amount of flow the Web team is able to obtain each day. It may seem like simple things but reducing the amount of sensory input is a huge help. If you’ve been to the Web office at any time you’ve noticed ten of us work in one open area, which is an efficient use of space but is a slippery slope for distractions. We all work in the dark to reduce visual noise, most everyone wears headphones to reduce auditory noise, and there is very little talking before lunch. It takes the entire team to ensure the environment is respectful of everyone’s personal flow.
“Managing Distractions” series
I though I would start a series on the small things that make a big difference when it comes to managing distractions. The first and what I feel is the most important is the ability to get out of your inbox.
Get out of your inbox
Email is not a to-do list or an immediate trigger for action. If someone needed something this second they would call or rush in to your office. Emails never stop and reading/responding to them as they come in will keep you caught up in the thick of the thin all day. Before your know it, no real work actually gets done.
I’ve found the best way to remove the distraction that an email is “waiting to be read” is to get rid of the badge on the OS X Mail dock icon. Many would argue that never opening the Mail app in the first place accomplishes the same goal. But it doesn’t, because if you need to send an email or reading through a folder other than your inbox, that unread is there just begging for your attention.
Removing the badge is actually quite easy, just go in to the Notification Center and click Options. In here you can manage all the annoying alerts that each app can produce. Find “Mail” and uncheck the “Badge app icon” to remove it completely.
Overall I recommend turning any “push” type of alert off except for the absolutely necessary ones. But this one alone can make a world of difference. Try it for a week, my bet is you’ll focus more on the task at hand and check email only when you have a few minutes to dedicate to it.
I mentioned a little while back that I was co-chairing a Michigan regional of the HighEdWeb conference on May 20-21, 2013, at the University of Michigan-Flint.
HighEdWeb Michigan is a conference designed for higher education communication and Web professionals—writers, marketers, designers, developers—who want to explore the unique Web issues facing colleges and universities.
As more of the campus moves towards implementing an integrated content strategy with ever growing properties, Web, digital signage, email, social media, video, etc. We encourage all Wayne State University faculty, staff, and students to consider taking advantage of this invaluable opportunity to meet colleagues from across the Midwest and learn how to approach the university website in a more effective manner.
Content strategy built in
The keynote presenter is Kristina Halvorson. Halvorson is widely recognized as one of the most important voices in the realm of content strategy. Other session topics will include social media, content strategy, project management, responsive Web design, content management systems, and more.
Speaker line-up now available
http://mi.highedweb.org/schedule/
Learn more about the conference and presenters by following @hewebMI and #hewebMI on Twitter
Registration is now open!
The registration for the conference is just $75. To view the conference schedule and to register, visit http://mi.highedweb.org/register/.
HighEdWeb Michigan is an approved regional conference of the Higher Education Web Professionals Association, an organization of web professionals working in higher education to design, develop, manage, and map the futures of higher education websites. The Association’s mission is “To advance web professionals, technologies, and standards in higher education.”
On Thursday, March 14, 2013 at 7pm EST I’ll (Nick DeNardis) be hosting HigherEdLive. I’ll be joined by some amazing guests to talk about Creative Team Leadership. It’s one thing to bring creative ideas to life as an individual, it’s another to lead a team of creatives to produce the highest quality work and always push the envelope. I’ve asked some of the best creative leaders to join me to talk about what makes a team successful and what skills/environment is necessary to sustain it long term.
My guests, in no particular order, are Ben Callahan, Bob Crisler, and Nick Johnson. They are not only accomplished in their own right, but also lead successful creative teams inside and outside higher education.
Mark your calendars, it will be an information packed show with plenty to take away as a director or member of a creative team.
Ben Callahan
President of Sparkbox and founder of the Build Responsively workshop series, Ben shares his ideas about the Web on the Sparkbox Foundry and other industry blogs. His leadership at Sparkbox has driven the team to be a pioneer in responsive Web design techniques and he continues to push for great user experiences outside the context of specific devices.
Nick Johnson
Nick Johnson is the Managing Director of Marketing Communication at the University of Notre Dame. His Web team handles design, development and content strategy for most of the university’s Web properties, working within a cost recovery model.
With an entrepreneurial background in marketing, design and management, Nick’s greatest professional joy is creative problem solving and the hunt for the correct strategic path.
Nick and his wife, Anna, recently welcomed their first child, Zoey Marie, in to the world.
Bob Crisler
Bob leads the overall Web development effort of the University of Nebraska-Lincoln as Director of Internet and Interactive Media. IIM is organized as a partnership of University Communications and Information Services at UNL. Bob also leads the UNL Web Developer Network, a 300+ -member group formed to support UNL’s unique single-codebase Web development path. A 1986 graduate of the University of Nebraska College of Journalism and Mass Communications, Bob has been with UNL since 1992, working first in print design, and stepping out to lead UNL’s Web effort as the university’s first staff member fully dedicated to the medium (in 2000).
UNL occupies a unique position in higher education Web development. At UNL, a single codebase underlies all sites that are part of the university organization. The UNLedu Web Framework is continually strengthened through the efforts of IIM staff and the contributions of partners through the WDN organization. See wdn.unl.edu for more information.
This is a cross post from nickdenardis.com
