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.

Student Center Renovation website: 24 hours from sketch to production

Student Center Website  Recently we were given the task of putting together a website for the Student Center Renovation Project. We knew it was coming but we didn’t have much to go on until the details were approved. On a Thursday we got word everything was approved and set up a conference call to talk requirements, content and images.

Outlining the requirements

After an hour discussion with the client we determined that we had to mirror the messaging/feel of a banner being placed outside on the actual Student Center building. We also determined an initial set of menu items that included: The Project, Visions, Highlights, FAQ and Contact. We had no idea what was going into each of these areas but the task to finalize the content was on the client, so we had to work with Lorem Ipsum.

Sketching exercise

SketchesEveryone in the conference call was then involved in an initial individual sketch exercise. Everyone got 5-10 minutes to sketch one or more ‘wireframe’ layouts of how they perceived the site should be organized. This was a great first step to get designers and non-designers collaborating. Even though everyone was in the same meeting, heard the same questions, responses and decisions from the client, everyone came up with different interpretations of the client’s and project’s needs.

Student Center WireframeOnce the time was up, everyone presented their wireframes and explained why they chose to place elements where they did and how they saw the website working. We talked pro’s and con’s as a group.  In this case everyone agreed all the content could fit on a single long page so we decided to go right to a single wireframe. This time we used a whiteboard so we could draw, move and erase as we worked down the page.

Divide and concur

Once the wireframe was decided upon we split up the tasks to parallelize the work. The tasks broken down:

  • Base CMS and Foundation structure setup
  • Photoshop polished elements
  • Frontend interaction polish
  • Gathering and preparing the assets

Foundation WireframeI started getting the logistics of the base site setup in our CMS, the folder structure on the server and the wireframe mapped out. Once that was in place Tom was able to start working on each section in isolation to get the interaction working so the site functioned with placeholder content. In the meantime, Dan started polishing the design in Photoshop. And lastly, Rolaine worked on gathering, formatting and cutting the images that would be used on the site. We are now about five hours in and things are starting to take shape.

Content creation

While we divided up our work  for the Web, the client and editorial were going back and forth on finalizing and approving the content. This usually starts with Word documents but as soon as the a piece is 80 percent finalized we transition it into its final location in the CMS. This is so it can be edited in the native editor and as we are refreshing the frontend assets we can see real content and how it meshes with the finalizing design.

Putting it all together

Student Center 80 percent doneEight hours in and the elements are starting to come together. The template is now more refined, final content is pulling from the CMS and being updated in real time so we could see and test it within the final site. Assets were polished to ensure pixel-perfect definition and the non-interactive HTML started to get some javascript life.

Adding the interaction layer

Every site we create works for the lowest common denominator browser, basically Google scraping the pages looking for content, links and assets. We then use progressive enhancement to add the style layer of CSS that most users see and browse with. After those foundations are in place we add interaction with javascript. For this project specifically we use Foundation’s ‘top bar’ for the main navigation combined with the ‘fixed’ positioning to allow it to follow the user down the page. We also utilize Foundation’s Magellan to create a ‘smooth’ scrolling effect for the user down the page to the desired content. Add in some alpha transparency on the menu as the user scrolls and it results in what feels like a must more polished experience than just a bunch of static pages that someone has to click through. Lastly, the FAQ’s expand only when needed and the renderings of the floor plans open in lightboxes so users don’t have to leave the page to view them. In order to add the interaction layer efficiently it’s important that everyone can work independently without colliding with anyone else’s work.

The final product

23 hours later the site was ready to be deployed to production. It was tested in all modern browsers and devices, the content was edited several times. The images have been proposed, refined and optimized per device. The open graph, twitter card and other meta data are added. We send the client the signoff and as soon as they are good we run the deploy…

grunt deploy:production

Final Student Center websites

And we’re live!

2013 – Web Year in Review

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:

University homepage


This year we took on an ambitious redesign project, take six months to reimagine and reconstruct 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.

Online Directory

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.

Wayne Law


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.

Educational Outreach


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.

Faculty Orientation


Each year the University welcomes new faculty, we built a website to get them oriented with the University and Detroit.

Digital Signage


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.

HTML Emails


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 platform and focusing on data driven UX changes. We also have a few surprises up our sleeves, so stay tuned.

Redesign: Undergraduate Research Opportunities Program (UROP)


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:

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.



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: and

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:

Launch: Community Engagement website

Community engagement happens all across the university. A large majority of students are engaged in the community and it’s a big selling point for prospective students. Our problem was it was hard to communicate everything the university was doing when the content was disbursed across multiple websites.

Centralizing content

Bringing a site like this together isn’t easy. The prerequisite was to gather all the community engagement across campus, identify who maintains it, and get everyone talking. Without solving this information problem the website wouldn’t be successful. Luckily the Government & Community Affairs department did an amazing job gathering and working to promote all community engagement around campus.

First impressions, deep content

Getting someone to a website is only half the battle, let’s imagine by some miracle a visitor lands on the homepage of this (or any) site. They basically have ten seconds, at the most, to determine (often subconsciously) if they are going to find the information they are looking for.

I use the term “find what they are looking for” because every visitor has a motivation for their actions. The notion of someone just “surfing the Web” I’ve never actually heard a user say as a motivation to visit a website.


Too much content can turn a user away (information paralysis), too little information can leave visitors wondering if the site can actually fulfill their needs.

The balance happens when distinct information paths are separated by visual consistency and actions for the user to dive deeper. On the Community Engagement website we did just that.

Visual cues

Building visual and interaction cues and keeping them consistent is essential to building confidence in visitors. We accomplished this on the Community Engagement website with three main elements:

  1. Green-banded headers – These areas immediately call attention and by using them sparsely we direct visitors to areas that offer more information. Some of them wrap around their container which call even more attention because it introduces an angle to break up the visual squareness of the blocks.
  2. More information arrows » – Keeping the construct of a forward-moving user experience and the way a user would turn a page in a book (or swipe right to left), the idea of an arrow pointing right gives the visitor a feeling of “advancing the page”. We wanted to keep this consistent throughout the website. Anywhere a visitor sees a single or double arrow they can click to read more information on a different page.
  3. Dots to expose more information on the same page – Since we can’t fit every piece of information on the homepage we have to hide some. To give the visitor a cue that there is more information to explore, we use dots. The number of dots show how much content is hidden and what else the user can explore with low barrier to click since it will be exposed on the same page with a low loading time.

The website encompasses so much more than just the visual cues and user motivations I’ve highlighted above. I just wanted to give some insight into some of our decisions and the motivations behind them.

Explore the new Community Engagement website at:

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.


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.


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.


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:

Launch: A new virtual tour experience

We get a lot of feedback when we ask students what their impression of campus is. The general consensus is they had no idea how large and green it is. Being an urban campus most people think that Wayne State is just a collection of buildings along busy roads. But in reality we are a 400 acre campus with quite a bit of green space and a traditional campus feel.

It’s easy to change the impression once someone steps on to campus, but what about the people who can’t physically make it here. A few months ago we evaluated our current virtual tour website (left) and found it to fall short of the “immersive experience” we give students who come on a physical campus tour. We set out to change that.

Campus immersion

Bringing campus to life means capturing and showing off as much of campus as possible.We decided on highlighting over 40 areas on campus to provide 360 degree immersions.

We broke the experiences down in to five categories:

  • Academics & Research
  • Athletics
  • Libraries
  • Campus Life & Housing
  • Medical Campus & Extension Centers

Areas to explore

In addition to the 40 locations the user can explore we also added 60 “hotspots” which show up embedded in the locations. When the user clicks on one they are presented with some text, additional images or a video that explains more.

Next steps

The result is a landing page that we created that allows a visitor to choose a path and a full screen window opens to allow them to start exploring campus at their own pace. The tour is also available on any iOS device.

We have calls to actions on the landing page and throughout the tour. We are tracking users as they go through the tour, it is still a little too early to tell how effective the new tour is. One thing I can say that it has already surpassed the previous tour as far as engagement and time on site.

View the new virtual tour at:

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.


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.


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: