Digital Marketing & Communications

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

Me first big ship

📥  Beta, Design, Team

Ahoy there! Me name is Tegan and I be Digital’s fresh meat. I joined on the first o' December last year. I’m not long graduated from university, with twenty months in industry, tamin’ the wild seas of the web.
I’m a design buccaneer, a user experience swashbuckler. I conduct hearty user research, rescuin’ marooned users from the shores of confusion, and I make user interfaces delightfully easy to use. I also have a fair working knowledge of code which helps me parlay with devs.

Batten down the hatches an’ I’ll tell ye a little tale ‘bout me first big ship.

</pirate>

Sail, ho! There be a ship!

When we release a new feature or change, we call it ‘shipping’.

This ship had a mission: to grab your attention, inspire you to keep reading and build upon the University of Bath’s visual language with a new visual cue.

This element will be used by Collections, thematic pages with handpicked articles. But it may expand to other aggregate content types, like departmental landing pages.

We’ve called this new element a Hero – it’s well-built and displays outstanding achievements and noble qualities! I kid, it’s actually a technical term for a prominent banner on a page.

Hero image is a term used in web design for a specific type of web banner, prominently placed on a web page, generally in the front and centre.

 

The blueprints

Pile of paper with wireframes of the new Collection hero

To start off the design process, we collected data from current users to see what their behaviour is currently.
Using the scroll heatmap, we could see where people linger on the page.

Scroll heat map snapshot

This heat distribution demonstrates that people don’t spend much time above the fold (the top bit of the webpage that is visible without scrolling down). Users quickly scroll below the fold to read the actual content. This is the hottest spot on the entire page.

Next, we checked out how other people do it. What are the current standards, what does and doesn’t work? This process is called peer review and it is a great opportunity to draw inspiration from what other people have done.

Stop. Sharpie time!

I squirrelled away in a meeting room with the collection of Sharpies and A3 paper to punch out weird and wonderful ideas and directions.
I developed a handful of these ideas further, then mocked them up as high fidelity prototypes and presented them to the product owner for feedback.

Armed with feedback, I iterated on my designs with more sketching and more mock-ups to bring back some new and improved ideas to the table.

I collaborated with Sharpie champion and user experience privateer, Dan, to create a new piece of visual language for featured images. This hinted at the existing call-to-action arrow shape with a bit more visual embellishment.

The prototype on artboards in Sketch app

14 artboards later, we were ready to demonstrate the design on a multitude of device sizes and its limitations. These were shown to the Director of Marketing & Communications for final approval.

Sail ho! The design was approved!

All hands on deck!

To breathe life into this new element, we needed to wire it up to the Content Publisher. This required input from multiple disciplines: designers, developers and content producers.

My role was to create the front-end by gluing HTML and Sass together, while Iris developed the working bits to add a new hero section in the editor, and content seadogs composed some explanatory microcopy.

Collaboratively working with Iris was a breeze, and each piece of work slotted together like a jigsaw puzzle. The build took 2 days, with a further day of squashing bugs and browser compatibility testing. 36 git commits later, we were ready for review.

As this was my first time working with both the Foundation framework and the university's visual language, Origins, I think I did good! Some code structure optimisation and minor (but significant) design changes came to light in review, but all the required amendments were quick and soon got the green light.

Pull requests to production put the build into motion. It was time to weigh anchor and set sail!

Fire in the hole!

The deployment dragon roared out across the sea (department) as the ship... shipped.

Peter Pan ship flying into the distance

This feature was a huge blocker for launching the Research collection, so having it ship was an achievement for the whole crew. You can now see the Research Collection live, or read Hanna's post about it from a content perspective.

This is, admittedly, not my first ever ship here at Digital. So far I have set sail to several little ships, or... dinghies, but this feature was my first big one. Drawing upon my own skills and those of the people around me, we have created a cool new element to drive forward a new chapter in the University of Bath’s visual language development.

I raise me grog to the crew and all future ships!
Yo ho, yo ho, a pirate’s life fer me...

Leave a Reply

  • (will not be published)