Matt Lees and Elliott Barnicle (SMILE) on the design of uea.ac.uk

Nathan Monk
Today, I’m going to be discussing the new UEA website. And in particular, the design process here at SMILE. I’m joined by Matt Lees and Elliott Barnicle, both from SMILE, who were the creative team on this project. SMILE was selected as the partner for the redesign of the UEA flagship website. And today, we’re going to dive into some of the specifics of the UI and UX work. Matt, Elliott, thanks for coming on and talking about the design process today.

So I spoke in another interview with Giles, who I know you both worked really closely with on the project about an agile methodology. And that was something that you adopted in the design process. And I wondered if you could talk about that iterative sprint-based approach. And I want to know about how you got stuck in with a creative process. In particular, though, I’m interested to hear about the UEA design system that you created.

Matt Lees
Yeah, sure. So the UEA project was a huge scale, these kinds of projects are not to be underestimated, lots of moving parts, lots of different pages, different views. So one of the first things we did was break down the workload into packages. And then for each package, we write a sprint brief. So that’ll include things like a user story, measures of success, any technical limitations or considerations. And for us, one of the most important sprint’s was actually the very first one, and that’s where, for a couple of reasons. First up, UEA were keen to move their visual language on.

Their old site was looking a bit dated. So we worked with the team at UEA, we augmented their brand guidelines, and we created this set of digital brand guidelines that became the foundations for moving forward. So we set the expectations and the precedent for what the site was gonna look like and what the visual language is going to look like. And the second reason that that first sprint was was most important was because UEA were also keen to move away from a templated approach to their site. They wanted some a bit more flexible that allowed them to do more when it came to creating new pages.

We also created a series of components and those components covered all sorts of things from different masthead designs, calls to action buttons, lots of different things. And ultimately, they became the building blocks for the site. So as we moved through new sprints, we kind of had the foundations there, both from a brand perspective and from a component perspective, which just made creating new views much easier. You can see some examples of that on-screen here. I talked about calls to action. So if we click into this one here, you can see different versions of the calls to action that we created. We had things like banners, we’ve obviously got buttons in there, those cards for stories with people’s profile pictures in there, all of those kinds of things. Now, being the first sprint, we can’t cover everything at that point. But it just gave us those foundations to move forwards.

And then as we move through the project, we had some I’m going to give a shout out to Angelina at UEA, she named them shiny sprints. And these were the sections of the site that had high importance in terms of recruiting new students, lots of traffic. And when we got to each of those sprints, we’d see an influx of additional components. So as we were designing something up with a special treatment, we would create additional components and they would feed into that library as well.

Nathan Monk
Really nice. Yeah, that’s really cool. And so I did another interview recently with Joe Marshall, the project manager on the job about the logistics and project management, and he said that the collaborative tools that everybody contributed, were a big part in the project’s overall success. Is that something that you’d agree with?

Matt Less
Yeah, 100%. I mean when you work in, across different teams, different vendors, being able to have single sources of truth for all of these things is really useful and the previous screen share, I showed a view of Sympli. So we did a lot of our design work in a tool called Sketch at the time and we could create mockups, wireframes, even clickable prototypes in there. But then we could upload that work into Sympli and Sympli has a couple of really nice views in particular, you can see it again on screen here.

So we’ve got at the top, we’ve got specs and preview. And in the preview mode, you’ll notice these numbers dotted around. And essentially, these are comments from our team UEA’s team are the other vendors on the project. And it was just a great way to gather feedback in a single view. And the other view up here, specs, is really useful for handing this work over to development teams.

So you get a really detailed view of the design choices. So devs know what they’re doing, when it comes to creating the vision that we’ve put together, you can see how when I hover over items, you get these call-out boxes with different pixel counts. So you can understand space in between different items, understand the exact colours that have been used, type sizes, and so on and so forth is a really useful tool for us in that project.

Nathan Monk
And that pink that’s on-screen that kind of the UEA pink, that reminds me of some very interesting tripwires that we had from a website accessibility perspective. Would you mind talking about those for a moment?

Matt Lees
So that the pink we spotted an issue fairly early on in the project and UEA were really great about it. I know a lot of universities, perhaps a bit against moving away from their brand guidelines, you know, things are set in stone.

Basically, the pink wouldn’t pass AA accessibility standards in terms of contrast, when paired with white and black text. I forget which way round it was, one of them would pass but the other one wouldn’t. We made a really slight tweak to the colour pink or almost unrecognisable to the naked eye. But we made that slight change. And that meant that both passed and that just made life easier for us and gave us great flexibility as we move through the project.
It’s really great to hear about that kind of level of detail that you’ve really bought to the project.

Nathan Monk
So, Elliott, now I’ll come to you. And well, you know, actually, it’s a question for both of you really. But Elliott, if you wouldn’t mind taking the lead here. As a creative team, what are you most proud of in this project?

Elliott Barnicle
Yeah, sure. Like Matt said earlier, there’s kind of a few of the shiny sprint’s, one of those being the course catalogue. For universities, their course catalogue is obviously one of the more important sections as it’s kind of one of the main revenue streams, and you know, all that kind of stuff. So it was really interesting to kind of look outside of the sector for inspiration on this one.

And as you can see on the screen share, we’ve got this kind of like, dashboard approach, which is not something you usually see, this far into a website, it’s usually something that you kind of get, like top-level, maybe like a homepage or something like that. But, you know, it was really great to kind of push the boundaries a little bit and really kind of serve something new for the users of the UEA website, I guess. I don’t know about you, Matt. Do you have any kind of favourite parts about this?

Matt Lees
Yeah, I think for me, it was part that came slightly later, after we’ve kind of produced the vast majority. But the homepage was one of the final sprint’s that we went through, and for me, this stands, head and shoulders above other parts of it.

UEA wanted to offer an experience like no other when it came to the homepage. And it was really refreshing to be given that creative freedom, but more often than not, home pages have these huge sites, for institutions, for universities, just become a bit of a political nightmare where everybody wants their share of the homepage. Everybody thinks their message deserves to be on there. And UEA were quite clear with us that we should kind of rise above that and create more of an experience for users.

And you can see on screen here, we wanted to deliver that experience to take users on a journey not just to do the standard, the expected homepage for a university site. UEA had worked with another vendor who had started to formulate some of these pots of content that we use to power some of this and our design team took that and ran with it and we came up with the concept of ‘From space to sea bed’, and then that was the that that was the messaging that we could then hang this visual language on.

And basically, as you scroll the page, you go through your transition through these different sections. So it starts in space, it’s got this kind of starry background, and then you go through some of the key messages, some of the key things that are important to UEA and the students, and you transition all the way down to the seabed with different calls to actions dotted throughout. And I mean, as far as a university homepage goes, I’ve certainly never seen anything like it so that would be up there for me.

Nathan Monk
Hearing about that narrative, and how, as a design, you’ve taken it literally from space to sea bed, you just you don’t see that in university websites, you know, what you usually see is some sort of naff carousel and some news cards or something like that. So I think it’s really refreshing and something that you know, to this day, is still really unique in the sector. You should definitely be really proud of those two things, if not the whole website really. Well done.

Okay well, thank you so much, again, to both of you for talking about this project today. That does just about wrap up this interview on the UEA website. Now, if you’d like to know more, you can always visit us at wearesmile.com where we do have a couple more of these interviews about the UEA website. See you soon