When less is more, A/B test insights

Last year we re-focused on the admissions area of wayne.edu to reduce the depth of the site (from five to two levels deep) and bring more resources to the front page. As a result the landing page highlights the six most popular audiences and their navigation items.

Each audience has its own landing page, with the same navigation and unique elements which speak to that audience. We found these audience landing pages were being visited less frequently than before the redesign.

Our theory

Initially, we thought users were clicking on a link below their audience heading and getting directly to their needed page. We decided to test this theory using a tool called Hotjar to record where users clicked on the page.

Admissions homepage clickmap

Although each audience listed their entire menu below the headings, the top three items were by far the most popular.

Revised hypothesis

We decided to test if removing the least popular items made it more clear to users that they could visit an audience landing page. If this is the case, are they more likely to visit these pages by clicking the audience heading or ellipse at the bottom of the link list?

“A” variant of the page

Admissions A variant

“B” variant of the page

Admissions B variant

Winner: Shorter list of links with the ellipses

After running the experiment for two weeks, Google found a statistically significant winning version.

Admissions experiment results

Headers or last item ellipse?

Admissions header vs. Ellipse

Of the clicks to the audience landing pages, the headers yielded ~2.5% of the clicks while the ellipses yield ~1%.

Insights

The takeaway from this experiment is it’s possible to go too far while reducing the depth of a website. Having everything accessible from the homepage may be good if you’re familiar with all the options, but it can be overwhelming for unfamiliar users.

Keeping a website as flat as possible while reducing the number of choices to entice users along yields the most interactions. It allows for the addition of refined and contextual content to reinforce a user’s decisions along each page of their journey.

Hiring: Student Web Assistant

The student web assistant will report to the Web Content Administrator and will be the ‘front line’ contact for School of Medicine web requests through email and phone calls.

This person will take the initial request, respond and gather any additional information, complete the request (if small) or elevate it to a staff member when additional assistance is needed or is a larger request.

The position does require some existing knowledge of how the web works, basic HTML and familiarity with web-based content management systems.

The ideal candidate will have:

  • Good written and phone abilities, who is a freshman or sophomore
  • A basic understanding of HTML
  • A basic understanding of web usability
  • Comfortability editing pages in a web-based content management system
  • Experience resizing and optimizing images for the web
  • The ability to detect patterns of requests to create training material and document common responses to frequently asked questions
  • The ability to follow verbal and written directions with an eye for attention to detail

More about the position:

This is a paid position, requiring 15-20 hours a week in the School of Medicine Web Services office.

The volume of requests varies per day, but the average is 20-30 with most taking only a few minutes to complete.

The web assistants role in a request:

A requests comes into the system and depending on the detail of the request:

  • You may need to follow up in email or by phone with additional questions

Once all information is available:

  • Determine which page(s) need editing.
  • Determine how these pages get edited (there may be multiple systems involved), which may require asking some questions internally about the page setup.
  • Ensure the primary contact is looped in on all changes.
  • Facilitate the necessary changes are made (May take a few minutes to a few hours)
    • Including gathering follow up questions/answers
  • After completion, follow up to let the requestor know the change has been completed.

While completing requests it will also be required to document common responses for consistency and to speed up future requests. It will also be required to work closely with the two other School of Medicine Web staff members and the extended Web Communications team. The Web team uses the same servers, tools and already have an extensive library of frequently asked questions and answers.

How to apply

If this sounds like you, email your resume and a cover letter to web@wayne.edu with the subject “Interested in the Student Web Assistant position”.

A picture is worth a huge jump in traffic

What could possibly make a webpage’s traffic grow by 235 percent in one year? Our beautiful campus of course!

Last September we launched “Photo of the Day”, a social campaign that focuses on the beauty and uniqueness of our campus and Midtown. The positive reaction has been overwhelming, not only in positive comments, but in positive statistics as well.

Stat overview:

Since September 2015:

  • We have received 658* submissions
  • From 275 individuals in the campus community
  • 337 pics have been featured on the site so far.

*41 of the 658 submissions were duplicates or contained broken files. The total of photographs up for consideration is 617.

Submissions

Submissions have grown nearly 600 percent from 2015 to 2016 with a large jump in October.

screen-shot-2016-11-08-at-1-48-46-pm

What is equally as impressive, the quality of the submissions are getting greater each month. Don’t get me wrong, we’ve always had high quality photos to showcase, but in the last two months, the quantity of high quality photographs is dramatically higher.

Web traffic

This is first and foremost a social campaign, but of course it has to live on the web. We share the lastest pic on Instagram, Twitter and we recently added it to our Facebook page. All posts link back to the Photo of the Day website.

Unique page visits have grown more than 230 percent from 2015 to 2016. Again, with the most significant jump last month.

screen-shot-2016-11-08-at-1-48-25-pm

Our highest traffic day was October 5, 2016 with 158 unique visits featuring the work of Paige Urbano.

screen-shot-2016-11-08-at-1-30-15-pm

Social stat – Most liked and most retweets

Our most ‘liked’ pic on Instagram and most retweeted post featured the work of Tyler Neal. This one is a personal favorite as well.

screen-shot-2016-11-08-at-1-02-39-pm

 

Social stats – Most impressions

The Photo of the Day tweet with the most impressions (nearly 11,000) was submitted by Justin Jacob. Justin has been a frequent submitter and you can routinely see his work featured on the Wayne State homepage.

screen-shot-2016-11-08-at-1-20-33-pm

Looking ahead

In the last few months we started featuring some Photos of the Day on the university homepage and although we can’t get stats on each pic featured, we are again getting very positive feedback. With the success of this feature, we are exploring other avenues to share this extraordinary content.

Submit yours!

Even though the popularity has grown so much, we are still strongly encouraging the community to send in your campus pics! We want to show off campus from everyone’s perspective not just our own.

See the latest selections and submit your own pics at wayne.edu/photo-of-the-day

Global Accessibility Awareness Day, Detroit on Thursday, May 19, 2016

register-now

Back for the third year, Global Accessibility Awareness Day Detroit is a day for web professionals to gather together to learn about accessibility and how to make the web more accessible and usable by everyone. Events will be held around the world to raise awareness about web accessibility.

This year’s event is jointly hosted by Refresh Detroit and Metro Detroit WordPress.

Who is this event for?

If you’re working on the web, creating, developing, or designing websites or content for others to use, this event is for you! Or if you want to learn how we can work together to make the web accessible to everyone, we’d love for you to attend.

Learn to listen: Experience the Web from the perspective of a screen reader user

You work hard on your web content, the goal being for that content to reach as wide an audience as possible. To that end, you study all the accessibility-related guidelines and do your best to apply them to your work.

But what does it all really mean? How does someone who uses a screen reader experience your site? How will the next change you’re planning to make impact that experience?

In this hands-on session with Al Puzzuoli, you will learn to use a screen reader as a tool to answer the questions above.

  • First, you’ll learn the basics of controlling your computer and navigating the web, using only a screen reader and your keyboard.
  • Next, you will see examples of accessible sites that play nice with screen readers, and other inaccessible ones, which decidedly do not.
  • Finally, the fun begins, as it will be time to play! You will have the opportunity to go the the website of your choice, and use your newly honed skills to do some basic accessibility testing

Note for all attendees: If you have a Windows or Mac laptop, we encourage you to bring it so you can get hands-on with a screen reader. We’ll be working in small groups.

Windows users are recommended to download and install the free NVDA screen reader on the laptop before the event.

Al Puzzuoli

As the resident Information Technologist at Michigan State University’s Resource Center for Persons with Disabilities, Al Puzzuoli spends his time doing network and server administration, troubleshooting computer concerns, and working with staff and students to test the accessibility of various information systems across campus.

When he is not working (or playing with computers), Al enjoys swimming, playing the trumpet, bowling, and spectator sports.

Agenda

6:30pm to 7:00pm: Welcome, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentation and interactive workshop
8:20pm to 8:30pm: Announcements
8:30pm: Time to leave

Sponsorship Opportunities

By sponsoring our event, you’ll have access to an audience of web and business professionals throughout southeast Michigan and northwest Ohio.

To thank you for your sponsorship, Refresh Detroit offers a number of benefits. Contact Deborah at deborah at lireo dot com for more information.

 

Excluding slick carousel using webpack, babel and the UglifyJsPlugin

While learning webpack and babel, our team had an issue with trying to run certain NPM packages through babel. Since we only want to pass ES2015 code through it, we need to exclude packages that don’t use it. To do that you can specify certain folders under node_modules to ignore in your webpack.config.js file like this:

What this will do is exclude slick-carousel from going through babel-loader, but it will still be part of the JS build and make it’s way down the pipe to the UglifyJsPlugin. Note: the exclude is not a string so it should not have quotes around it.

 

Side Note:

It’s possible to pass /node_modules/ and ignore all packages going through babel, but this wasn’t what we needed. Zurb Foundation 6.2 requires passing code through babel, so excluding all of node_modules wasn’t an option for us.

Please update all Pipeline references on your websites

Pipeline will officially be switching over to Academica on Friday, July 31.

Now is a good time to do a search on your website for anything Pipeline-related.

To do this in the CMS, log in via http://cms.wayne.edu and go to Add/Edit pages.

Searching in the CMS page listType Pipeline in the search box above your page listing and click Search. This will find any pages on your site that reference Pipeline. (See screenshot on right.)

You will have to manually update these areas.

If you were referring to instructions in the old Pipeline and have questions about how the process has changed, you can contact C&IT via email at cit@wayne.edu.

HighEdWeb Michigan Speaker Lineup – April 20-21, 2015 at Wayne State University

We’re excited to announce that our conference will feature two tracks, jam-packed with informative content, that you can take back to your office and use to wow your co-workers.

register-nowApril 20-21, 2015

Wayne State University
McGregor Memorial Conference Center
495 Gilmour Mall
Detroit, MI 48202

Speaker Lineup

Marketing Technical
speaker-bronsonThe Kids Are Alright: Millennials in the workplace
Ron Bronson
speaker-wammes10 Command Line Tips for Every Web Developer
Chris Wammes
speaker-sickafooseThe Evolution of A University’s Website… or How We Got from Here, to Here
Martin Sickafoose & Pat Brown
speaker-laforestJavascript and Jquery: Understanding the Connection
Clinton LaForest
The Web Culture Shift
Alaina Wiens
speaker-hessSecurity: Tales from the Field
Michael Hess
speaker-sattlerIf this, then what? : An explanation of how to use one application (IF) to enable the interaction of other popular applications
Kelly Sattler
speaker-swisherBuilding Your Own Personal Minion With Grunt.js
Brent Swisher
speaker-disanoKeeping track of your content (all the things) in Google Sheets
Jenn Di Sano
speaker-fiddelkeCMS Beyond the Web: How we use our CMS to save time and money to feed our print cycle.
Scott Fiddelke
speaker-brownAll inclusive calendar for fundraising and alumni engagement professionals, aka “The Calendar”
Randy Brown
speaker-brandonCreating an Interactive Scalable Vector Graphic (SVG)
Jenny Brandon
speaker-buschMaking the case for unified branding and marketing in a decentralized world.
Steve Busch
speaker-inglesPage performance and responsible responsive design
Jenny Ingles
speaker-poortvlietKickass Web Management Tools
Dave Poortvliet

Seats are limited, and the Michigan regional event has sold out the past two years. Hotel rooms are also limited so if you haven’t already, be sure to register for the conference and book your room today.

Remember, for the low, low registration fee of $85 you will receive:

  • Access to a full day and a half of dynamic presentations by higher ed web communication professionals, many of whom come from your peer institutions.
  • One much-anticipated keynote presentation by Carl Erickson.
  • Two breakfast networking opportunities.
  • A fantastic Monday evening excursion that you won’t want to miss. A tour of Detroit with a strolling dinner put on by Detroit Experience Factory.

register-now

Monday night event: Touring Detroit and Strolling Supper

Detroit Experience FactoryDetroit is transforming. After a jam packed day full of informational talks we are going exploring through Detroit. From the conference we will be shuttled downtown to enjoy a walking tour with strolling dinner put on by Detroit Experience Factory.

Even if you think you know Detroit, you may be surprised. We will set off on a walking tour of downtown Detroit lead by experienced guides to learn the history, current state and future of the city. During the tour we will stop at two restaurants for heavy hors d’oeuvre and half dinner at each. The tour will end at the Volt Bar in the hotel to network with your fellow Highered Michigan Web workers.

Keynote: Carl Erickson

Carl Erickson is the president and co-founder of Atomic Object, a 50-person software product development consultancy with offices in Grand Rapids, Detroit, and Ann Arbor. Atomic Object builds web, mobile, desktop, and device software products for clients ranging from startups to the Fortune 500.

Before founding Atomic in 2001, Carl was a VP of Engineering at a failed dot-com startup (briefly), and a university professor (not so briefly).

Carl also shares his experience on his blog Great Not Big – Experiments in Running a Small, Innovative Company.

Questions?

Contact the HighEdWeb Michigan committee at hewebmi@gmail.com. Follow @hewebMI on Twitter for updates and information about the event, and join the conversation with the #hewebMI hashtag.

See you in Detroit this April!

Welcome Jenny Ingles – Our new full-time front-end developer

Our team has changed shape a bit in the last year, especially in the role of front-end development. The primary role of a front-end developer is to “create the best possible user experience for features on desktop and mobile Web.” For us, that means translating the information architecture, design and content to HTML, CSS and Javascript to bring it to life. Because there is no medium like the Web this is a pretty unique task and always a moving target.

In previous years we had three full stack developers who were responsible for the entire programming of a site from the database data binding to the performance and accessibility of the user experience. It became pretty clear last year that doing everything was spreading them thin and we weren’t able to accomplish the fine grain optimization we were used to. So we decided to split the developers into front-end and full stack roles. The full stack developers still had knowledge of the front-end but their primary focus was university tools and optimizing the data in and out of our API. The front-end roles can spend their time optimizing every pixel that the end user interacts with.

Welcome Jenny Ingles

After months of searching we have found Jenny Ingles, our new front-end developer. Jenny comes to us from St. Louis and has extensive background working with HTML, SASS, Javascript, and Illustration. She has brought a fresh eye to how we structure our code, approach problems, and testing. Since she has started to get involved with projects our code has not been more semantic, page weight has decreased, and the user experience is the quickest yet.

It has taken me a few months to make this announcement on our blog and in the meantime you have probably been browsing her work and not even realizing it. Recently she worked on the front-end of the following projects:

Pivotal Moments

pivotalmoments

For her first project, a website that was already architected and designed, she was thrown in with a pretty PSD and told to make it work. Not only did she break it down technically but also worked very closely with the client at every step to educate on expectations, opportunities that the Web as a medium brings, and responsive implications. What came out of all that was an implementation that was not only within budget but also looks and performs beautifully. Browse around the Pivotal Moments website and see for yourself.

College of Fine, Performing and Communications Arts

cfpca

Jenny got her feet wet with our workflow, process, and structure using our Yeoman Foundation 5 site generator (not public yet). With this she was able to add some new features to the site. The homepage of the College of Fine, Performing and Communications Arts features some uniquely positioned areas with semantic HTML, parallax scrolling and CSS 3. 

The Baroudeur

baroudeur

In the same line with the CFPCA website, Jenny built upon her knowledge to not only include parallax scrolling but also responsive background video. Although the background video didn’t make it into the first launch of the website, we hope to find a video in the future that meets everyone’s needs.

Student Service Center wait times

studentservice

In addition to full scale website builds, Jenny also has been working on the little big details that make the user experience a little more enjoyable. For the Student Service Center she added visual elements to highlight the important information at a glance. In addition, the tabbed view for hours brings the relevant information into initial view and secondary information a click away without scrolling or a refresh. Below that, the frequently asked questions are now within an accordion so they are easy to scan and quick to jump between. An improvement that didn’t revolutionize the page, but made a useful page more of a joy to use.

Art & Art History (upcoming)

art

Although it isn’t live yet (hopefully soon and I will update this post when it does launch): the Art & Art History department website. Another soup to nuts website that Jenny was involved with that really shows off the attention to detail. This site was build on our Yeoman site generator (which means it is a standard starting point for all future sites) and lazy loads hidden images/content, changes design naturally at different breakpoints, and utilizes icon fonts as much as possible. It also features something I have yet to talk about, progressive enhanced page loading with YouTube’s SPF JS. This is something we have been playing around with for a bit and this site shows off how we have nicely adapted it to our Web experience. We can’t wait to show you the final website, which should be available shortly at http://art.wayne.edu/.

Just a few short weeks

This is just a snapshot of what we’ve done in the last few weeks. We don’t believe we’d be where we’re at without Jenny. Let’s give her a warm welcome! We can’t wait to see what she’s able to accomplish in the next few months.

Life in Web Communications, then and now

A lot has happened over the last 10 years that I’ve been in the Web Communications department, but looking back it made me realize how much has changed just in the last year.

I thought I would break down some of the basics to put it in perspective:

Then Now
Relied on multiple methods of contact: Basecamp, email, and a shared inbox. Now using a true ticket system, TargetProcess. All support and project related activity is in one place.
Used Campfire for group chat which was limited to just our department. Now we use Slack which allows anyone around campus to join so more people can be on the same page throughout the day.
Almost everyone was working at a desktop computer. Now most work is done on laptops, in shared spaces, and as much as possible, with the client.
Coffee was the drink of choice for the office. Now it seems most people have converted to tea.
Down a few staff members for various reasons and thus not able to take on the amount of work we were used to. Now fully staffed and back up to speed with all projects. Almost each positon has a ‘pair‘.
Our development stack used to be all over the place with MAMP, Ruby and Gem requirements unique to each machine. Now everyone is running the same Vagrant image which can be replicated in just a few steps. Bringing up a new computer now takes minutes instead of hours.
We used to host all our code in SVN which is great for a single project, but multiply that by 600 and it becomes a pain to manage. Now every project has its own GIT repository, branches and pull requests. We use git-flow to standardize code contributions.
Deploying code changes to the server were done by hand and in some instances involved voodoo. Now all code is deployed by script and in a standard way to ensure accuracy, repeatability, and enabled the ability to roll back if anything goes wrong.
We used to wear multiple hats, switching projects and contexts all day long as support requests and quick turn-around items came in. Now we have two teams, the project team works on scheduled client work and the support team handles hundreds of support-related tasks per week. The teams switch up every month and everyone starts each day knowing what to expect and what they are going to work on.
Our office space hasn’t changed, we are still in an open ‘pit’ area but we used to have our large L-type desks configured to take advantage of space optimization. Now we have removed all L’s and have placed the desks in paired rows to allow for people optimization. This allows a pair from each discipline to work closely together all day. We also have one dedicated standing desk that anyone can use.
Everyone used to have a phone and their own phone number. Now we have a one single phone number for the entire department. We still remain without a single printer, and rely on shared resources as much as possible.

But some things never change.

We hire great people and work on great projects for awesome clients around campus. We continue to challenge ourselves to be the best at our craft, contribute to open source and the higher ed community, and raise the stature of the university.

Refresh Detroit – Frontend Web tooling – Build steps, managing assets, logistics and consistency. – Oct. 15, 2014

RSVP

When: Wednesday, Oct. 15, 2014 at 6:30 p.m.

Building a single website is tough in itself but building and maintaining hundreds of sites results in exponential maintenance. Luckily there are frontend tools to help. You’re probably already familiar with a few of them and may use them on a handful of projects. We’ll explore how to use frontend tools to make life easier regardless if you’re working on a single or hundreds of sites.

Focusing on the end resulting HTML, CSS and Javascript brings a whole set of new and evolving tools. This discussion will focus on optimizing workflows with Node.js, NPM, Yeoman, Bower, SASS, Gulp, etc. If this is your first time being exposed to these tools we will walk through why and how to use them. If you’re familiar with some or all, we’ll work together to hone and build upon your skills.

Speaker

Nick DeNardis is Director of Digital Communications at Wayne State University, where he leads the strategy, execution, and implementation of most all public facing digital communications for the university. His team is responsible for websites, social media, and digital signage around campus. They also are responsible for creation and maintenance of several university-wide tools including a content management system, events calendar, RSVP system, HTML email creator, form creator, and short URL system. Nick has 10 years of experience optimizing university websites for a forward moving user experience. He is a nationally recognized speaker, blogger and scientist in discovering and analyzing Web behavior.

Venue and Parking

Grand Circus is located in the Broderick Tower, and you enter from the Woodward-facing doors.

Once inside, go to the end of the hall, and take the elevator to the fourth floor.

Parking is available at the Detroit Opera House parking garage, located on Broadway. Parking is $10 (unless there’s a special event). There’s also limited street parking on Woodward.

The Detroit Opera House parking garage is a short walk up Broadway and around the corner from the Grand Circus space. Here’s parking information from the Broderick Tower website (PDF).