A good week on the web

The Web Communications team has been busy making updates, launching sites and improving the web experience for its users. In case you missed it, here are some of the items we’ve been working on this week.

New string series launched on wayne.edu

https://wayne.edu/story/creative-warriors-in-the-community

String stories are a new feature on wayne.edu

Every two weeks the Marketing and Communications team launches a new page that includes curated condensed articles that are all related to one topic. These new pages are called “strings”. This weeks string is focused on Creative Warriors featuring stories on healing through the arts, Jazz musicians in Detroit and community art projects.

All of the string stories showcase the work that is being done by our faculty, students and alumni.

The next string launches on Monday, October 16.

Facebook Live event featuring WSU Press

https://www.facebook.com/waynestateuniversity/videos/10155244871307968/

Example of graphics used for promoting the WSU Press Live Event

The social media team took you behind the scenes of the WSU Press office. A guided tour from their staff takes you from the front office to the warehouse and all the steps in between in publishing a new book.

This Live event is the first of many to come. Future events will feature sneak peeks and behind the scenes looks at our Warriors in Action.

Follow us on Facebook for announcements of the next live event.

Older sites migrated to a new server

All summer and into the fall our developers have been migrating sites off of an older server onto a newer, faster, and more secure environment. At the start of the project, there were over 200 sites to move and now they are down about 20. This week they have migrated:

Big things to come…

If you’ve been by the Marketing and Communications office lately, you may have felt a buzz in the air or maybe you’ve seen many us running around campus with film crews, or outside measuring light poles or witnessed some other fairly odd behavior. Well soon all will be revealed, but until then, the entire Web Communications Team is busy making sure all the web assets are in order to support this great undertaking by Marketing and Communications. If you are dying to know what we’re up to, follow us on the University’s social channels and you’ll get an exclusive first look on October 15.

 

Hiring: Student Web Intake position

The Web Assistant will report to the Web Content Administrator and will be the ‘front line’ contact for incoming 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
  • A basic understanding of HTML
  • A basic understanding of web usability
  • Comfortable 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 part-time position, requiring 15-20 hours a week in the Marketing and Communications office.

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

The Web Assistant’s role in a request:

A request will come into the system and depending on the detail of the request:

You may need to follow up by 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 necessary changes (May take a few minutes to a few hours)
  • 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 Web Communications team.

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 Web Assistant position”.

Global Accessibility Awareness Day 2017, Detroit

Thursday, May 18, 2017

6:30 PM to 8:30 PM

Bamboo Detroit

1420 Washington Blvd, Suite 301, Detroit, MI
$5.00 /per person

Event description

Back for the fourth year, Global Accessibility Awareness Day Detroit is a day to gather together to learn about digital accessibility and how to make the web more accessible for 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 Ladies That UX Detroit.

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.

For our event, we’ve invited two local experts to talk about the importance of planning for accessibility in your design project and how to use an automated accessibility testing tool.

Agenda

6:30pm to 7:00pm: Welcome, food, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentations
8:20pm to 8:30pm: Announcements and thanks to sponsor
8:30pm: Time to leave

Presentations

Design Before Code: Thinking About Accessibility from the Ground Up 
Caitlin Geier, UX Designer at Deque Systems

Think about accessibility when designing: don’t wait till it’s coded!  Caitlin will offer accessibility tips for designers so that time will be saved in development.

Introduction to aXE
Matt Isner, JavaScript Developer at Deque Systems

Learn how to check the accessibility of your web projects with aXe, a free Chrome extension and open source JavaScript accessibility testing engine.

Speakers

Caitlin Geier

 

As a UX designer, Caitlin’s work with accessible design flourished once she began working for Deque. She is passionate about understanding the users she’s designing for.

Caitlin continually strives to incorporate accessibility elements into her work in order to ensure that all users can benefit from inclusive design.

Matt Isner

 

Matt specializes in teaching development teams to plan, test, and code for accessibility and has helped orchestrate large remediation efforts of complex enterprise applications.

He is intrigued by the idea of the computer system as an expression of human neurobiology, and champions the notion that accessible web content is better understood by both humans and computers.

Sponsor

Deque Systems is a leading provider of web and mobile accessibility software and services. Our mission is digital equality, and the Deque team consists of leaders and innovators in accessibility and testing tools development.

We strive to provide practical accessibility solutions that reflect real-world development environments, and we work with a broad range of clients to not only fix their inaccessible content but to integrate accessibility into their existing design and development processes through the use of automation and training. Not sure about your site’s accessibility? Check it with aXe.

Updating a database display order with drag and drop in SQL

In many of our applications we support dragging and dropping datasets to change the order. We save this order in a database column that is an integer and is in sequential order.

There are many ways in javascript to handle drag and drop. I will show an example using jquery sortable. If you’d like to use something else there are three pieces of key information that need to be sent to the server:

  1. Current position
  2. Desired position
  3. User’s id

HTML list

Javascript sortable

Example data set for table todos

user_id display_order todo
2000 1 Take out garbage
2000 2 Clean house
2000 3 Do dishes
2000 4 Cut grass
2000 5 Change light bulb

Step #1 – Determine the position

Step #2 – Update the dragged item

Step #3 – Move the item down

Step #4 – Move the item up

Step #5 – Update the dragged item to the desired position

With this approach the server will do a total of three queries for every change to the display order no matter how many items are in the list. Examples typically tell you to iterate over every item to do an update query to set the new order. That approach results in total queries = total amount of items. This new approach is a significant improvement and has reduced a lot of our large data sets from 40+ queries down to three.

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”.

Photo of the Day, top photos for the year 2016

It has been awesome seeing all the submissions from our community for Wayne State’s Photo of the Day. You all have done a tremendous job of capturing the beauty of our campus and the excitement of Midtown/rebirth of Detroit. The WSU Social Media team compiled a list of our personal favorites as well as top viewed images for 2016.

Editors’ picks

Top viewed

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

Hiring: Full Time Senior Web Graphic Designer

We’re looking to fill an existing position for a full-time Web Designer to join our innovative team.

About Web Communications

We handle every aspect of a website project, from the needs analysis, user research, architecture, design, content migration/editing, programming, post-launch analysis and A/B testing. To accomplish this we work like a mini agency within the university.

This position is integral to crafting and ensuring the university identity is integrated into every piece of communication we put out. In addition to full websites, our team is responsible for the digital signage around campus (currently 77 signs and growing), the official social media presence and a number of HTML templates. This position touches all digital mediums and our work is constantly evolving with multiple opportunities for growth, you will see your work published and interacted with on a daily basis.

About Wayne State

Wayne State offers a competitive benefits package that includes, health, dental, paid leave and more. In addition to great benefits, working for Wayne State’s Marketing and Communications team brings you right into the heart of midtown. We are conveniently located at Cass and Palmer and in walking distance of the DIA, the Detroit Historical Museum and some of the top restaurants in the Detroit. In mid-2017, you’ll be steps away from a Q-Rail station that will take you to the newly developed The District Detroit.

Senior Graphic Designer

  • Solid understanding of working with-and designing for-web applications.
  • An understanding of responsive Web design and designing for mobile first.
  • Excellent visual design skills with sensitivity to user-system interaction .
  • Experience working on large-scale higher education websites and/or creating and maintaining corporate design patterns.
  • BS/MS in Human-Computer Interaction, Interaction Design, or a Visual Arts subject; strong technical understanding a plus.
  • Minimum of 4+ years’ experience designing web-based products for a consumer-oriented website.
  • Ability to act as a leader in communicating conceptual ideas and design rationales, all within a user-centered design process.
  • Able to work and communicate effectively in a cross-functional product development team, and present ideas and designs effectively.
  • Self-motivated to prioritize and manage workload, and meet critical project milestones and deadlines.
  • Proficiency in HTML, CSS, and JavaScript for rapid prototyping.
  • An understanding of the benefits, limitations and customization of a CSS framework (Foundation, Bootstrap, etc).
  • Up-to-date with the latest Web trends, techniques, and technologies.
  • Experience working in an Agile/Scrum development process.
  • Maintain an overall university brand across various mediums including digital signage.

How to apply

All applications must go through the university jobs website, please do not contact me directly. We encourage you to submit links to live websites, portfolios and to submit a cover letter that explains . why you feel you’re right for the position.

Senior Graphic Designer, posting #042093

Formy – Customize submission listing columns

We rolled out an update to Formy, the university’s form creator, that allows form owners to customize the submission listing columns.

Customizing the columns on the submissions list

Set the desired field order in the “Export” area:

export-options

Now “Submissions” will reflect the first three fields specified in the export:

submissions-new

Why this is important

Previously, the first three fields in the form will display on the submission listing page. Which resulted in “First name”, “Last name” and “Email” columns on the “Submissions” listing.

submissions-original

There are occasions that fields further down the form are more important at a glance when reviewing or labeling. This functionality allows the form owner to have more control over their form and submissions for each unique circumstance.