Wireframing and prototyping the Students homepage

Posted in: Design, Development

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…

Posted in: Design, Development