The multiplying effect of shaving 600kb off wayne.edu ⚡️

We’re always looking for things that have a multiplying effect.

A little bit goes a long way

Wayne.edu is just one of those places. It gets ~700,000 page views per month so changes to the homepage impact a lot of people.

Webpagetest.org results for wayne.edu

Scroll map of wayne.eduOnly 25% of people scroll

Internally and externally the homepage is used as a primary resource for the Login, Search or Top menu (in order of interaction).

Because of that, only 25% of people scroll past the initial fold.

Studies show a fast webpage gets more interaction.

The bulk of the file size (and thus perceived speed) of wayne.edu is from images. Using the existing infrastructure, we already compress each image as far as possible. Taking the homepage down from historically ~3mb to ~1.1mb.

Deferred loading of images

Using the technique that Rob implemented on Base to detect if an image is on or near the screen to trigger actually loading it, this was then transitioned to the CLAS website by Tom and wayne.edu proper by Jenny.

The result is a ~600kb reduction in initial page load on wayne.edu, from ~1.1mb to ~600kb depending on the hero image.

Animation of wayne.edu content loading

This change at scale

75% of 700,000 visits = 525,000 pageviews do not scroll
525,000 times 600kb savings = 315gb savings per month!
10.5gb savings per day.

The CLAS homepage had similar results for end users, but with fewer page views per day, the impact is not as visible.

Bandwidth costs can get expensive for our users. This change not only helps locally but globally, the impact is great without impacting the user experience.

Wayne State loves bacon

It’s April Fool’s Day, 2014, the one day of the year where you can’t believe everything you see on the Internet.

The Wayne State Web team hasn’t done anything fun for April Fool’s Day in the last few years and we have a new homepage, so we *had* to do something.

One day while we were out walking on campus, taking a quick break from sitting in front of our computers all day, we started talking about an internet phenomenon re: hiding bacon.

That’s when the idea hit: we could hide Kevin Bacon on our website! After all, there are six degrees of Kevin Bacon, right? If he *is* everywhere he should also be at Wayne State.

One of our graphic designers, Dan Greco, found some stock images of the famous actor and worked them into two of the main photos we have on the homepage. We loved the results and had him work up a few more for April Fool’s Day.

The goal was to be subtle but funny. We think it worked.

 

Increased context on the site index

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

But others use the index

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

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

School of Medicine

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

Our solution

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

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

One less feature going forward

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

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

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

Design Decisions: “Apply Now” button

Last week Wayne State was mentioned the in the Chronicle of Higher Education for our increased traffic to the admissions application from wayne.edu. I wanted to break down a little more about what we did and why.

We work very closely with the admissions office and talk regularly with some of the students who field the calls to our general phone number. This is something we do on a regular basis with any site we oversee, it is important for us to identify problems we can solve on the web before they get to a person and waste resource time. Something that came up was the question about application deadlines, prospective students would call and simply ask when they had to apply by. Wayne State has a rolling admissions schedule so a student can apply and get accepted at any time but each semester has a cut off date. In addition, since the schools/colleges/departments control the content on their websites the level of information can vary. We decided to tackle this challenge on the homepage.

First Try

We decided to play with a few options of adding the due date to the homepage. This would not only solve the prospective student issue but also give the visitor a sense of urgency if they were considering applying. What we came up with is shown on the right. It was a great first step but we got some great initial feedback, the graduate programs all have their own deadlines so we couldn’t publish just one date. We were okay at the time with just publishing the next upcoming semester for graduate.

Refinement

After seeing the page day in and day out for a few weeks we started to notice some redundancy with the “Application” and “Apply” labeling being right on top of each other. So we started to refine the style to put a little more emphasis on the upcoming semester and less on the actual due date.

We also noticed the “Giving” menu item was seriously getting overlooked. Although it was much larger the type and positioning didn’t look like it was clickable. Here is the break down of the click throughs year over year.

The 52% decrease had us worried so we knew we had to at least bring the link back up to it’s normal state. It gave us a chilling reminder that with A/B testing it is important to change only one thing at a time. Otherwise you don’t know what outside consequence you might have.

Current Design

The current design was meant to focus on the upcoming semester they would be applying for which leads to the apply wording visually. We also moved the “Giving” link back up to see if it made any difference. You can see the currently live design on the right. The results so far have been really good. The “Giving” menu item returned back to its normal click through rate. And overall we were seeing a 30% increase in the number of click throughs from the original design.

A breakdown of the clicks from Sept 13 – Dec 21, 2010 to Dec 22 – March 31, 2011 can be seen below. This is the previous 100 days and the 100 days before that.

Year over year increase

This change had us excited, it meant we were on the right path to entice visitors to take action and we had a way to track it. Looking deeper in to our analytics though we realized we were on to something even larger. Below is the year over year stats for the “Apply” link and the new style. It is a little harder because the single link was now split into two but what we found was in the same time period a year prior the “Apply” click through rate actually decreased 17%. What that means is from the previous year we were able to increase the click through rate by an astonishing 62%.

Below you can see a break down of the year over year change:

Looking to the future

We are now starting to plan our next revision of the “Apply Now” buttons to see if we can push that increase even further. Our next step is to clean up the information a little bit to make it even clearer. Here is an overview of the options we came up with. The left most image is the original version for reference, the second is the current and the rest are new.

We realized both undergrad and graduate admissions promote the same semester at the same time so we don’t need to display that label twice. Since we are combining the labels we probably need to remove the separator line so they can be in the same context. We still haven’t decided 100% on which to implement but we will be testing them when we do.

Lessons Learned

Making changes isn’t always going to improve results and improving one result isn’t necessarily going to impact the entire system. We learned that it is important to stick to one change at a time, measure and refine. Not all changes will be earth shattering and you have to accept you may be impacting the user experience for the wrong reason.

We also learned gathering proper results takes time, at least a month to see a clear picture. It may be tough to put up with the opinions of a few people if they don’t like what you are trying but in the end it is all about how it resonates with the end user. They are the only one that matters.

Lastly we learned it is important to try something, there are always opportunities for growth and far too often we hear “let’s tackle that in the next redesign”. Decide on a micro goal, figure out a way to measure it and implement. It is better to have tried and failed than to have never tried in the first place.

New year, newly re-aligned wayne.edu

You may have noticed a little change in wayne.edu when you logged in this morning. Here is a run down of the changes from top to bottom:

Completely re-written code

The new site is built on HTML5 and is ready for any future browser advancements. We are using native HTML5 elements like <header> and <footer> combined with the Google HTML5 Shim. We removed the reliance on Flash completely so the page is the same on all desktop and mobile devices.

We also started to integrate a few media queries so smaller devices (at this point just smartphones) get a slimmed down and easier to use interface (screenshot). It is a good start but we still have more work to do.

Combined search results page

Back in October 2010 I presented at the eduWeb conference on Analyzing Real-time User Visitor Searches. Included in the talk was the introduction of a combined search results page (screenshot) that we have been testing. The functionality of the page was built by observing user search patterns. The combined results page includes Web pages, campus locations, classes, events and people. You can test out the new search at: http://wayne.edu/search/

Focusing on student/faculty success

The main centerpiece of the old homepage focused on branding images with a drop-down menu that hid student/faculty success stories. This was great when we first launched but over time it became apparent that the stories were being overlooked. We discovered by asking students that they were simply too hard to get to and out of the way. We fixed this by putting the stories front and center.

In addition we broke a rule of ours, but for a good reason. Typically we do not allow elements on a page to move without the user taking direct action on them. In the case of the university homepage the goal is to get a variety of audiences to the most appropriate area as quickly as possible. After looking at the statistics for the homepage we discovered people spend 4x the time on this page than any of the child pages (probably because it sits as a person’s homepage). So we decided that if a user has been on the page for 20 seconds and hasn’t taken an action that it is safe to switch up the content. We are giving it a test at the moment and will report the results.

Upcoming deadlines and apply now buttons

Since the primary audience for the homepage is prospective students we decided to give them a call to action. We separated the Apply Now menu item into two buttons with the call out of the application deadlines. The undergraduate deadlines are pretty straight forward but the graduate school has varying dates so we opted to display the upcoming semester. The goal is to give the visitor a sense of urgency and display important information they look for anyways.

Schedule a tour

Below the focus on area we added the ability to schedule a campus tour right from the homepage. From talking to prospective and current students it became apparent thtn visiting campus was a large influence in their decision to apply and attend Wayne State. We wanted to make sure they didn’t have to go searching for the opportunity to come to campus.

Campus status area

Last but not least we added a completely new area to the site. Currently you will see it display some important information for current students, “Classes begin Monday, Jan. 10”. It is the most searched term on the homepage and most asked question on twitter at the moment. The area is meant to give the campus community information about the state of the university. We have something very unique to be displayed once school starts. I won’t spoil the surprise right now. You will have to return on January 10, 2011 to see what it is.

You can view the re-aligned homepage at: http://wayne.edu/

2010 President's Universitywide Address Wrap Up

Today’s Presidential Universitywide Address went off far better than expected. The format this year was completely different than previous years. This year Interim President Allan Gilmour solicited questions on his website from the entire campus community. The community was not required to log in and he received 208 comments in total. President Gilmour read every single one. Dr. James Hartway, distinguished professor in the Music department, was the moderator for the address. 20 questions were selected for President Gilmour to answer. This format was engaging and brought out personality and laughter in the president and crowd.

We knew not everyone could make it to campus so like previous years we streamed the address live via Ustream.tv. We also, as with all streamed events, opened the stream to live chat. We set the chat up so it didn’t require login to comment. We had a banner on wayne.edu before and during the address to drive traffic to the stream. In addition we pushed it out on Twitter and Facebook. We just wanted to give you guys a little insight into the interaction with the stream.

Here are some stats about the stream:

  • 1 Hour in length
  • 260 Average concurrent viewers
  • 275 Total unique viewers
  • 218 Click throughs from wayne.edu
  • 133 Click throughs from Twitter / 35 from Facebook
  • 345 Total chat comments
  • 202 Total comments (open for 1 week)
  • 20 Questions asked

Watch the recorded address at: http://president.wayne.edu/video/2010-universitywide-address.php

Anatomy of a Higher Ed Homepage

The university homepage (not just Wayne State’s) has been in a tug of war since the advent of the web. At some point administration lost sight of their users needs. This is where we come in, web workers know to focus on the visitors’ needs. Take a look at the right side, things people are looking for, I bet there is at least one item you never thought about. (For me, it was the campus police phone number.)

I’m thinking of recording focus groups and usability tests for at least the university community. They might even make their way on to this blog.

Source: http://xkcd.com/773/

An insight into wayne.edu traffic (2010)

Last year I posted “An insight into wayne.edu traffic” which is an insight into the traffic to wayne.edu from June 15 – July 15, 2009. This year I wanted to do a comparison of the same week this year to last year’s numbers.

Below you will find the stats comparison from June 15, 2009 – July 15, 2009 compared to June 14, 2010 – July 14, 2010, I wanted to make sure the days of the week were consistent.

Top Pages

Just a note about the index.php page and the % Change. It looks so high because last year we were not tracking the index.php filename and just the “/” directory.  I couldn’t find a way in GA to compare the two different pages, drop me a line if you know how.

Referring Sites

In the past year direct traffic is down, it doesn’t surprise me that more people are using search, specifically Google to find information from our site. The more sites that transition into the CMS the better SEO they contain and this is a great example of a result of that transition.

Top Browsers

Two big trends to notice with the browser change: Internet Explorer is steadily declining while Chrome is rising by leaps and bounds. If you are interested in the breakdown of which versions of IE are being used you can see them at the detailed IE usage table. Basically IE6 is still at ~9% but is down from 30% last year. Hopefully next year it will be below 2%.

Operating Systems

What I want to point out on the OS table is the growth of everything mobile and the decline of the Windows OS. Android had the largest increase in visits for mobile and surprisingly the iPod is the only mobile device that declined in usage. I was actually surprised by the small increase in iPhone usage, I expected it to be more. This type of data is what we are looking to when developing our mobile strategy. I’ll give you a hint, we are leaning toward a web centric interface instead of app centric.

Overall there are a few things to note about the change in traffic over the past year. Search traffic continues to grow and we are continuing to work on our SEO. Mobile traffic is growing and it doesn’t look like it is going away. And lastly browsers are starting to get more diverse, IE is losing market share but doesn’t look like it is going away any time soon. We still make sure our sites work in all browsers with experiences that match their capabilities.

Mobile device usage

Inspired by Mike Nolan’s post over on the Edge Hill University Web Services blog I decided to give everyone an insight into the mobile device usage for wayne.edu.

Mobile devices for the past month

Now this is just for wayne.edu and not all the sub sites under it so the numbers are deceiving. Also, this is for the last 30 days, May 15-June 14, 2010. In addition, these numbers are a little low because less students are on campus for the summer semester. But this may give us better insight into how our site is being accessed from off campus.

As you can see the iPhone has most of the mobile traffic with Android trailing close behind. If you combine the iPhone and iPod usage it accounts for over 53 percent of all mobile web traffic. That’s a lot and for that fact alone it is where we are focusing our mobile web initiatives.

Mobile access trends for the past eight months

(view more detailed trends)

Mobile access is growing fast and it doesn’t look like it will stop. We don’t want to just make sure our web content is accessible from these devices but we also want to deliver our content in context. For example, if you are viewing this blog from a mobile device the formatting is completely changed to enhance your reading and navigation experience.

Over the next few months we will be posting more about our mobile initiatives for wayne.edu and other areas of the Wayne State web.

Disclaimer: The graphs and data are straight from Google Analyics they don’t include any of our external mobile tracking.

Changes to the wayne.edu footer and impact area

This morning we made a change to the WSU Impact area and footer on wayne.edu. I wanted to write a quick post to explain the change.

The Problem

The WSU Impact area was designed for items that are longer standing than regular news, often lasting a few months and impact the institution as a whole. Over the past year we’ve added things to that area because there was no other spot on the homepage for them. The items we added are forever standing and will not change over time. We filled up the WSU Impact area quickly and it made the page feel unbalanced.

The Solution

We ended up adding a second row to the footer for these forever standing items that will always be connected to the university and need a presence on the homepage. They include WDET, URC and the voluntary system of accountability. This now gives us enough room to promote things that impact the university every few months that regain the goal for the WSU Impact area.

In addition, we added a link to the “Accessibility” section of our site. Although this area is mainly related to physical building accessibility we will be expanding it in the coming months to include web and digital accessibility issues and resources.

With this change in place the bottom half of the homepage is now evenly balanced and whitespace is evenly distributed. Over time we will continue to evaluate the effectiveness of these links and the WSU Impact area.