October 2014

Cathy McVey and Carlyn Chatfield welcome and describe what ITCOMM group is for. A way to get together once a month or so to discuss a particular topic, good informative discussion and then a chance to just talk with people who do what you do at another institution.

Brad and Jen are our tech hosts.

Allison Oslund and Laura Root from Texas A&M IT (TAMU) presenting an online web site design clinic. The patient is an out-of-date CIO web site that Rice University plans to overhaul in the spring. Join us in the clinic as the doctors examine the patient and prescribe fixes.

it.tamu.edu redesign - PowerPoint presentation (PDF link at bottom of page)

Poll on how familiar you are with responsive design. 45% priority for comm team, 30% novices 15% heard about but not tried, 10% not familiar.

Team is 3 communications, 3 graphic designers, 2 web developers

About 25-minute presentation on how we went from designing websites the old way, with desktop first, to the new way, mobile first. Then the design clinic, then Q&A.

Within the next year, 81% of US cell phone owners will have smartphones. The 18- to 29-year-old group, half of them use their phones as their primary way to access the Internet and not their desktop.

You've had this experience: Go to a website, where are my glasses, have to pinch and zoom and scroll, and try to hit tiny navigation with my finger, mis-click, try to get back. So frustrating. Responsive design: Think small screen first, low bandwidth first. Solving hardest challenge first.

Change is hard, going to be pain points, this process we describe will make things smoother and ultimately it will take you less time.

New workflow, new way of thinking about web design.

Who needs to be involved? Your content organizer, content writers, graphic designer, web developer, approver/client.

Most critical role is the content owner / content creator. Content is key in mobile-first design. Trim content down to only what's necessary. Different way of thinking about content.

in a kickoff meeting, all four roles are represented. Your meeting is to set strategy, audience, purpose, and content. Audit content and determine its purpose and priority. Don't talk about design or anything else.

When organizing content, start by breaking content into types: navigation, photos, short explanatory text, long articles, key links important to include.

Now it's time to prioritize around mobile-first. Organize in a list the way you'd see it on a small screen. Easy to grow from small screen to large screen.

Do this content prioritization and grouping for each type of page you have. These become the templates for your developers.

Once the content is prioritized, curated, and organized, another meeting to present content hierarchy to designer, developer, and approver. Sign off and designer gets to work.

Approved content priority document makes process easier for designer.

Designer develops wireframe and moodboard.

For wireframe, start by thinking about content types: video, article, news story. Place those things in black and white boxes. Do wireframe for smallest mobile phone and a desktop. We've done this enough we can imagine wehat tablet like iPhone or Kindle would look like.

Show how navigation works. This is where you should spend most time, before anyone codes. Be clear about how a user will navigate to content.

When you line up wireframes you can see how a lot of it changes on the mobile wireframe.

Don't get detailed, black and white wireframes, steer away from design and talk about functionality and usability.

Moodboards. This is where designer shows look and feel, tonality of site, what headers and text might look like, patterns, images. Can get some examples online (called "style tiles") if you've never done this before, colors, key words, tones, callout buttons, fonts, images. Way to get people onboard before you starting designing actual site.

We had three different moodboards to choose from for TAMU redesign. Gave them names to help people talk about them. Words like "open and airy" or "curves and color" to explain the feel.

Can also use this meeting to show cool functionality from other sites that you think you want to use. Lets developers respond if they have concerns about going down rabbit hole. In past, developers had been left out of design discussion.

New process has developers in every meeting from the get-go so decisions aren't made without them in mind, know they have input on it.

Third phase: Once you have wireframe and moodboard approved, designer starts design refinements. Developer builds working wireframe. Doesn't have to style, do color. Make boxes work so they can be skinned later.

This is where you really start saving time, waterfall approach to workflow where someone completes work and hands it off to someone else. In past, designer finished comps and handed to developer. Now designer and developer working hand in hand at same time, along with content creators. Then it all comes together instead of waiting on someone. Can rethink things quickly when issues arise, so whole project moves faster.

Example of working wireframe, design elements starting to be placed, get sense for how it will come together. Keep it loose, shoot at consistency but not possible to get pixel-perfect on every device.

Show mockup on phone to show how limited the space is. Have to be fluid and loose with your design because the new devices all have an impact, you'll see it.tamu.edu already looks different from what we're showing you and that's why.

Final phase:

Start testing prototype / test site on many devices. Team of 8-9 gets together and brings all their devices, and start looking at parts of the site, use a variety of device types with OS's. Can do some simulated tests with tools but we feel best way is to test actual devices. Looking for bugs, navigation issues.

Test your site continuously because devices and OS keep changing.

Use Google Analytics to see what devices, browsers, etc. the majority of your visitors are on

Checkpoint before launch to see if you've met all the objectives you outlined at the beginning. Do user testing to see if people can do the things you outlined in your strategy.

Tools:

responsive.is will show you how your site looks on different devices

Welcome to use any of the resources from gomobile.tamu.edu, have a great blog that we add to regularly

Summary: If you're not designing responsively, you're not designing responsibly.

Rice Design clinic - screenshots (see the four jpgs at bottom of page)

Carlyn Chatfield from Rice. Design in 2008, first time we had a content management system, before that was Dreamweaver.

1.5 FTE on staff, and I'm the 1. No designers. Work with Web Solutions Group for design and the process that TAMU just walked through. All I do is words and pictures.

See VPIT1-home.jpg below. Screenshot of website home page for vice provost for technology (vpit.rice.edu). This is not our primary website (it.rice.edu).

When we went into content management system for both sites, had way too many pages, customers couldn't find what they needed - typically software, hardware, sometimes org chart.

So we said let's get rid of everything no one goes to. Called VPIT site our "legal and ego" site - policy, governance, PR - all got pulled out of main site so it wouldn't clutter it up. VPIT became holding pen for content users didn't want to look at.

New CIO position just announced, haven't had CIO before, don't know how that's going to affect IT leaders website.

Allison and Laura walk through method they'd use with new client.

What's the goal or purpose you're trying to achieve?

The ego and the legal for the vice provost site. Seems kind of fuzzy right now, doesn't seem to be clear purpose that's being told to you for content requirements.

How do you want this site to position the organization? How do you want visitors to think or feel?

Inspire confidence, IT is spread all over, want to unify IT under CIO, inspire confidence in leadership of IT that we've got your back, know what you need for education, research, day to day running of university, we're here for you.

Who's the audience?

Top-level administrators at university and the board of trustees.

What would they be coming here to look for?

Sometimes they come because they have link to process or policy. Don't think anyone is going to read for fun.

Is there anything competing against your site? Or competing interests?

No other freestanding IT websites out there, so no competition that way. Everyday life is the biggest competition.

Great reason to start looking at the text, some pages very long, a lot of text on home page. Think about content priorities.

What would you want people to see if they saw it on their phone? What needs to be at top and what would have to scroll to see?

TAMU went through similar process recently. Had long intro, condensed to paragraph. We want to look at navigation, do audit of content on each page. Think about that long list of links, prioritize, trim if possible.

At TAMU, we downplayed departments so we could support unified IT concepts.

See VPIT4-Governance.jpg. Governance, policy, mission are obvious categories for site like this.

See VPIT2-Innovation.jpg with too much content. Tricks for long content on mobile - we use accordion functionality. On phone, displays headers only with an indicator to click if you want to see more. They can read the one they're interested in, one at a time.

Seet VPIT3-Employment.jpg - does this need to be its own page? When you do page audit, decide if each page has to be a page, or can it be part of navigation, or just be link somewhere.

Administrators still need something that's easy to use. Think about priorities of leadership and what words they think about. Want stuff that's going to draw their eye, that resonates with them.

Three direct links we decided to feature on TAMU CIO home page design, based on what we thought would be most searched: project updates, reporting, CIO bio. Visible on mobile. Can change them out to link to fresh, new relevant content.

How did we know which pages to get rid of?

In 2007-08 we didn't have Google Analytics. We used our judgment and asked our customers. Most popular page is the org chart. We think it's because people want to call people despite all of our "call the service desk" messaging.

Q&A

Response to a link that a participant posted about mobile vs. desktop content:

TAMU doesn't follow the suggestion of having less text on mobile. Really need to strive to get all your content being served on the desktop also needs to be on mobile. Very bad idea to have a separate mobile site. Maintenance of two sites is hard, people don't stick one mobile or on desktop, expect to see the same things both places. Never change the content. Change the functionality. It's one site.

Search is very prominent, people do navigate too, they don't just search.

Question about image sizes:

Apple's Retina display means images that look great on desktop will look terrible on iPhone. Our IT sites aren't as image heavy, we choose to minimize or move the image on mobile. Desktop is progressively enhanced version for images. If images aren't providing purpose, maybe remove for mobile. Another solution is high-res for desktop, low-res for mobile (we don't do this a lot).

Question about testing:

verifyapp.com - drop PDFs or screenshots in and ask users to answer questions or click where they think they'd find something. Can get a heat map. Around $19 a month. Online so can get lots of responses with email invite. usertesting.com - researching this now, allows audio/video testing.

Question about how long the process took:

For IT site, took TAMU 6 months start to finish through the process that was outlined. Pretty big site. Give developers a good month or two. Small site could be a couple months.