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

Whiteboard: Exemplar Online Newsletter

Whiteboard of Exemplar Online Newsletter

Just wanted to post a quick example about the importance of using a whiteboard during an initial meeting to visualize different areas of a site. Although we talked with the client over e-mail about the navigation and features of the site, drawing it out made it real. We ended up walking through the visitor’s experience and moving things around on the fly.

Above are the final whiteboard wireframes and below are the actual approved templates. As you can see they are very similar.

Without going through this process with the client we would not have ended up with a final end product. This method eliminated countless design and programming revisions.

Whiteboard: Planning our next campus map

After some delay we finally kicked off the new campus map project with a two hour meeting, tons of notes and some whiteboarding.

Current campus map

The current map is completely flash based. We developed it over six years ago when flash was the upcoming trend. Although it is old it still works great, we have had nothing but compliments from visitors about how easy it is to use. We have tested it with many people and we don’t want to loose any functionality. The problem is it is not accessible on mobile phones and is hard to connect to external services.

As a small mobile fix we forward any mobile traffic to an SVG version of the map so it is at least usable if someone is walking around campus and is accessing it from their mobile phone.

The current campus map is available at http://campusmap.wayne.edu/
The SVG version is available at http://campusmap.wayne.edu/iphone/

Some upcoming new features

  • Built on top of Google Maps
  • Mobile version with location awareness
  • Separate maps for main, medical and extension center campuses
  • Locations for OneCard fill machines, ATM’s, wifi, computer labs, blue lights
  • Campus tours
  • More images/videos per location
  • Upcoming events per location
  • Integration with Foursquare/Gowalla/SCVNGR

User interaction

The best thing about using a whiteboard is the ability for everyone to see the same thing, add and erase things as comments come up. Walking through the user experience step by step gives everyone on the team the ability to understand the features and layout in context. The drawing above although it looks simple took a few iterations to get to and a lot of the functionality identified in the single picture.

Basic functionality like listing and searching was the largest part of the discussion, then allowing single or multi layers on the map and how a visitor would add, see and remove them. The options are endless but seeing it on a surface, using a finger as a mouse and actually mimicking the user’s experience is crucial to coming up with a usable product.

We will be posting more about the map as it develops in the coming weeks.

Whiteboard: Giving HTML E-mail Flow

The last two weeks have been really busy for us if you haven’t noticed the lack of posts. It’s been a good busy though and we have been getting a lot done. Posts will be coming soon.

Boxes and Arrows

In the spirit of sharing how we work I’m starting to post more about our process. The photo above is the planning for the upcoming Division of Development HTML e-mail newsletter. The first thing we do after meeting with a department and before we start any design or development is outline the entire user flow on a whiteboard. We do it with boxes and arrows to show direction, space and user experience.

As we talk through it the flow often changes, the content moves around and we simplify things. It’s also a prime time for the designers, developers and content writers to get a good understanding of the requirements for the project. We experience pain points and work through them to focus the whole experience on the user.

Sneak Preview

Here is just a preview of what it will look like when it launches in the next week or so… (subject to change)

Please welcome Brett! Our new student developer

A few weeks ago I put a call out for a student developer looking to work with us. The response was awesome, thank you everyone who inquired! Unfortunately we only had one spot and that position was filled by Brett Brainered.

Brett is a senior in the computer science program and has done web work for the last few years. He started two or so weeks ago and I just haven’t had the chance to post about it. Brett jumped right in to adding tools to our CMS and you should start seeing some of the work he is doing shortly.

His first project is expanding the report and maintenance areas for each site in the CMS. We are adding a “page analyzer” which will inspect the content on each page within a site. Check it for broken, development or slow responding links and images. It will then validate the content and/or clean it up with HTML Tidy.

We have been doing quite a bit of redesigns lately and often the structure of a redesign changes from the current site. The page analyzer will have the ability to download an Excel sheet for us to start a content audit. Once we determine where each page will transition to we can put that information in the CMS and have this tool copy the pages to the new development site in the new location for the department to begin working on cleaning it up. It will be a big help to have this migration done automatically.

Whiteboard Learning

The first thing we did with Brett was to walk him through the tools and flow of how our pages execute. We don’t have any official documents where this is explained. We like to keep our process as agile as possible so things may change faster than we can document them. Probably not the ideal situation but it works.

We do all our teaching on whiteboards. Whiteboards are the best way to show an idea visually as it matures and offers the ability to change and manipulate things as you step through and learn. I personally have probably 100+ pictures of whiteboard drawings which explain various UI interfaces to code execution.

Below is the flow of our page execution for our web apps. Not all sites go through this same process, just our large applications. It might look a little confusing, especially since it’s pretty sloppy, but you can get an idea of the flow.

I think I will start posting more whiteboards on the blog. After looking through them I realize how useful they are in explaining why we do the things we do. The decisions behing UI elements and user flow through a site are told as a story on the board and that is really valuable information.