Digital Marketing & Communications

We've seen 1s and 0s you wouldn't believe

Tagged: Development

Wireframing and prototyping the Students homepage

  , , , ,

📥  Communication, Design

Over the first few weeks in my role as User Experience designer in the Digital Team I've been working on a redesign of the main Students homepage. We're using the layout and styling of the First Year Student homepage as a starting point to ensure visual consistency across the student experience.

We've conducted a whole swathe of user testing and stat analysis and are using what we've gained from this to inform our initial wireframes and prototypes.

Here are a few quick insights into the process I use to create these initial designs.

Kicking off the process

You've reviewed the stats, checked the heat maps, written user tests and grabbed feedback from real users during face-to-face testing. Where next?

Me? I grab the Sharpies, a bunch of stickies and some rough paper and start sketching. I start by loosely outlining ideas for page layout, key elements or modules and some thoughts on possible user interactions.

Sharpies, stickies & sketching

I love iterating initial designs on paper. As a designer, it's refreshing to not be precious about these quick sketches. Stick a set of paper wireframes in front of other team members for their feedback and they feel comfortable to tear, edit, stick or scribble their thoughts directly on the page. Ideas can flow without being restricted by the medium.

Tools of the trade for paper wireframing

Tools of the trade for paper wireframing

Once the pens have run dry, I'll consolidate all the feedback and sketch up a more… considered wireframe. I try to keep my colouring within the lines on this one.

This 'tidier' iteration can be used for some interim quick 'n easy user testing to gather feedback on specific tasks – “How would you find your tutor's contact email on this page?” – but I'm usually itching to get something in the browser before then.

Prototyping in the browser

As part of our ongoing investigations into Zurb Foundation framework I'm keen to conduct the next stage of our user testing on the revised student homepage design in the browser using real HTML & CSS content.

Supported by Foundation 5, it's a swift process to create a live prototype with active links, rollover states and a sprinkling of other interactive elements. The prototype now looks and behaves like a real web page. With the prototype in hand we can expand our user testing tasks appropriately, asking more detailed questions of our users and gaining further insight into the success of our revised design.

Now to find some more students…

Want to cycle bits of your page? We can help

  , , ,

📥  Development

Right in the middle of our homepage is an area of featured news which cycles on a timer. When we were originally implementing this feature back in 2011 we had a look for a library to drop in, but couldn't find one which met all our requirements:

Progressively enhanced
The page needed to present a working page to visitors without javascript - the most important feature needed to be loaded and we didn't want the left/right controls on-screen if they weren't going to do anything.
Cycling HTML blocks
Most gallery-type features will cycle an image, but we had an image in a div, usually with some text underneath. In practice, we really need to be able to cycle between arbirary blocks of HTML.
Low initial page load
The obvious way to solve this problem is to transfer all the data on initial page load and show / hide different elements as required. The problem with that solution is that it loads all the assets up front, and we were talking about a series of high quality images. To be kind to our visitors on low or limited bandwidth connections we wanted to only load elements when they were actually going to be seen.

We also had to consider the maintainability of the library and the content it displays - obviously the homepage changes frequently so it couldn't be a major job to do it!

We couldn't find anything which solved all these problems so we rolled up our sleeves and created our very own jquery plugin. It has proven useful to us - not only on the homepage, but also elsewhere on our site. Now, a few years on, we have released this code under the Apache license for the world the enjoy. You can find it on github under the "bathweb" organisation. Keep an eye on this - we aim to release other interesting and (hopefully) useful code in the future.

The repository contains a working example and all the docs you'll need to get it up and running. Why not check it out and have a go?


My first development project

  , ,

📥  Communication

The PHP code

The PHP code

My day to day job as a Web Supporter is to answer queries and sort out technical issues relating to various systems surrounding the University of Bath website. My life doesn’t solely revolve around RT though! I have started to perform development tasks alongside my main role in order to improve processes, solve issues and assist the rest of the development team.

The first development project I have been given is to improve the way that Public Lecture Podcasts appear in iTunes. This involved creating some scripts using PHP.

I first had to work out what tags needed to be included and added to the mp3 files and generate an XML file based on this information using the iTunes guidelines for adding podcasts. This required quite a bit of research in order to make sure that they got added to iTunes correctly. I created a script that generated the XML file and another to add tags to the mp3 files. I noticed that the existing procedure for adding common tags manually to all mp3 files was prone to error so I automated this to eliminate this issue. I also used the Zend framework in order to get some of the functions I wanted to implement working correctly.

I have had some issues along the way, just as any developer does, where I have wanted to throw the monitor out of the window. However, you just have to sit back and reflect and even come at it with a fresh pair of eyes later on. Assistance from my colleagues from time to time was always very much appreciated!

I have a few more development opportunities on the horizon which will no doubt keep me out of mischief for a long time to come.


The benefits of open formats

  , ,

📥  Communication, Development, Team

As of this time last year, the University Academic Year Charts have been generated in HTML, PDF and iCalendar formats from Excel spreadsheets. Previously there were only PDFs for download but we thought that providing versions to view live on the web and a version people could add to their own calendar software would be useful.

To take the burden out of maintaining all these different formats by hand we used some short Ruby scripts to do this (using libraries such as roo, pdf-writer, and icalendar).

Within Web Services we use the calendar plugin of our wiki to schedule who handles our frontline support on a daily basis (and then get it deliverd to us over instant messenger, as we've blogged about before) but it didn't show the University holidays, meaning that the support was somtimes unfairly balanced.

A screenshot of our support schedule plus University holidays

A screenshot of our support schedule plus University holidays

Yesterday we remembered that one of the year charts we generate just contains dates relevant to staff, without all the teaching days and student holidays marked in, and like all the others, we generate an iCalendar file for it, which the calendar plugin can read. So, a few clicks later and now our support schedule contains the University holiday dates as well as our custom-added events.

This means our calendar has an iCalendar input (the holidays) for human usage when we're updating the schedule as well as an iCalendar output (our support schedule) for robot usage when delivering our schedule directly to us! We've had to do comparatively little to enable this, neither of them have to be maintained by hand, and this is only a tiny fraction of the things that are possible, and all enabled because we use software which generates and consumes standard, open formats (and thanks to Tom Natt for making sure we did it!).