Spotlight on the team behind the new Copac website and design: interface design

Creating the new Copac interface.

As you might be aware the Copac team have been hard at work transforming the Copac service. We have been busy re-engineering the database and creating a new user interface and website. A couple of weeks ago my colleague Beth and I went to chat to our user experience (UX) designers Shiraz Anwar and Leigh Morris.

How did the process start?

We asked Shiraz, “Where on earth do you begin when you’re tasked with a project to redesign a web interface”? The answer? You start with the user! His first question to the Copac team was “What information have you got on your users?” Shiraz wanted to see all of the information we had on Copac users, along with our strategic aims and objectives. He also wanted to work closely with the rest of the Copac team, so they were involved from a very early stage.

To create a new interface they needed strong and current information about users, and they had to work out if there were any gaps in our current information. They asked Copac team member Ashley Sanders to plug some of these gaps with further analysis of site data and Copac Coordinator Shirley Cousins sent out a questionnaire to our users.

This enabled Shiraz to identify and prioritise our user groups, setting in place a foundation for more informed decision making following a user-centred design process. This helped the team prioritise resources towards creating a usable, sustainable and scalable Copac.

A strong message from the user feedback is that ‘Copac saves time and is easy to use’, and our designers were very aware of the need to increase functionality but still keep it simple to use. A challenge, but one that they relished!

Shiraz’s post-it notes of the key messages.

Research on search

Leigh began work on looking for comparators to Copac and analysed what they were doing, what they were doing well and what we could learn from them. He looked at navigation, functionality and learnability of the comparator sites and also did heuristic evaluation and cognitive walkthroughs. Leigh felt that the usability studies that Lorraine Patterson from Edinburgh University did were invaluable to their work on the design.  (She was involved in a JISC project: http://lorrainepaterson.wordpress.com/) and performed usability studies on five digital libraries.)

Leigh and Shiraz also did a lot of designing around the tasks that users perform on Copac, to get them as streamlined as possible. Leigh researched user search behaviour and found these resources really useful in informing his design work:

Prototypes

The next step was paper prototyping , a quick and low-tech way of testing the interface. It was easy to show the different elements on a page but it was also easy and quick to change them. They found using Balsamiq: http://www.balsamiq.com/ to be really helpful for creating prototypes and wireframes.

Leigh’s low fidelity prototype – results screen

They then began work on the HTML prototype, using a flexible grid approach which they will be able to adapt to different devices. The team were inspired by the work they’d been doing on the Mobile Mimas project. As research shows that most of Copac’s use currently comes through desktop access (though the Mobile Mimas work suggests that this may change in the future), the prototyping so far has been concentrated on the desktop version. Mobile and tablet versions will be part of a phased release: this project won’t end with the launch of the new interface, and future developments will be driven by user needs.

User testing – test early and often!

Although the HTML prototype wasn’t actually attached to the database,it enabled them to start user testing.

They tested the site with University of Manchester academics. It was individual one-to-one testing, using the ‘talk aloud’ protocol, where the user narrates their actions and thoughts. They had to tell Leigh and Shiraz three positives and three negatives about the site, plus what features they would like to see. The results from this testing reinforced the messages from earlier research (new Copac still saves time and is easy to use!)and Leigh and Shiraz felt that the prototype satisfied project expectations and validated their investment in the initial research stage.

User Interface design is an iterative process so they have repeated and repeated testing and design –going from a paper prototype to html prototype to a low fidelity prototype based on the actual database. This time it meant that testers could do real world searches and answered the question – does the new interface actually work with the data?

Thankfully, the answer was ‘yes!’ and they were able to release the design for wider testing. An Alpha version of copac was launched at the 2011CILIP Umbrella conference. Overall, the feedback was positive and was useful in identifying bugs which they were then able to resolve.

Feedback from the Alpha release was used to inform the development of the Beta, including the new feature of listing the holding libraries on the brief results page. This was a major change and something that users had long been keen to see.

They also added the login functionality so that users could try out ‘Search History’ and ‘My References’.  Again, the feedback from the Beta release was very positive and most negative responses mentioned colours, fonts, and text. Shiraz and Leigh were pleased with the feedback because they knew they’d been working on a service that users trusted and they didn’t want to destroy that trust. Leigh quoted Steve Krug  and said “you don’t want to deplete the reservoir of goodwill of your users”. (http://www.sensible.com/)

What next?

The feedback from the Alpha and Beta releases will allow Leigh and Shiraz to plan more structured user testing in future. They and the Copac team are committed to continually improving the service and, from a user centred design point of view, more testing can only be a good thing!

The new Copac interface will be made public next month. We’d love to hear your feedback, so please contact copac@mimas.ac.uk if you have any questions or comments about the interface.

(Our beta interface can be find here: http://beta.copac.ac.uk/)

Spotlight on the team behind the new Copac website and design: graphic design, part 2

Last week we heard about how Ben Perry, our new graphic designer got started, but this week Ben explains how he came up with the new Copac design.

Archer Font
Image from: http://www.typography.com/fonts/font_overview.php?productLineID=100033

LJ: So how long have you been working for Mimas?

BP: Well it was the start of the year so coming up on 4 months now.

LJ: How is working at a university or in the academic sector different from the commercial world?

BP: When I work for myself as a freelancer, it’s just me in my studio, I have lots of projects on the go, 5 or 6 things bubbling up at any one time and I’m working on different bits of pieces, emailing clients constantly and it’s very hectic and fast paced, I have to try and keep everyone happy and deliver artwork on time for everyone’s deadlines. Whereas at Mimas, it’s much more relaxed and there’s a slower pace to everything. I think mainly because I’m working within a larger team, so it feels like the pressure is slightly off, which is really nice for me because it gives me more time to try and innovate and be creative with what I’m doing and have a bit more attention to detail so we can deliver something that’s absolutely amazing.

Oh… and there’s lots of meetings.

LJ: How do you develop your ideas normally?

BP: I try to gather together all of the elements that make up the project. I’m a strong believer in trying to get people to give me examples of things that they love and things that they hate. If they’ve seen something they love, I can look at it and understand why they love it and likewise if they hate something – I can work out why they don’t like it. I can then boil it down to the underlying ideas of what clients want. I’ve also got lots of books and magazines at home and I like to flip through to get an idea for something.

LJ: How does the process work for you? Do you have an idea pretty quickly?

BP: Normally things just jump out at you, it may be a colour palette that you start working with. Once I’ve synthesised the project brief, I like to get things on the computer. I find working directly in Adobe Illustrator makes it really easy and quick to sketch out ideas rather than actually using a pen and paper.  I can mock up ideas and change things so quickly on the computer, I find my laptop has become my sketchbook. I do have real sketchbooks too because sometimes there’s a need to hand draw something before translating it to screen. But using Illustrator means that get a rough idea of how you want things to look like, which allows you to visualise things so much quicker. And that’s my starting point. I normally try to go a bit wild, create loads of ideas and then stand back from it and take a look at what’s working and what isn’t.

LJ: So how did you start with Copac?

BP: The logo was the initial starting point for the Copac work. Trying to get the typography right, we looked through all the feedback sheets that the Copac team supplied me with and typography was one thing that users picked up on a lot. It needed tightening up and more relevance bringing to it. That’s where the idea for the logo has stemmed from. I always try and tie some relevance into the name or what service is being provided use that to feed into my ideas. Copac’s about searching for books and libraries and is an academic service but it needs to be modern too. So I starting looking at fonts that had that traditional feel to them, yet were modern at the same time. This is when I came up with the idea of using Archer. Archer was commissioned for use on Martha Stewart’s Living magazine, which I felt had the sort of feeling we were looking for. The magazine was about quite traditional topics but with a modern slant.

The website framework was pretty much laid out, so it just a case of tightening things up and bringing a sense of ‘real world-ness’ to the website. It felt flat, lacked depth and the colours were a bit cold. I wanted to give it a bit of texture; a bit of life, make it more three dimensional. I wanted something that was engaging and lifted itself of the screen, so many websites are flat and things in real life have shadows and textures and rich colours and I wanted to bring some of that into the design.

LJ: So did you come up with the concept quite quickly?

BP: I definitely got the idea quite quickly. I liaised with Leigh, the Mimas Web Designer, and luckily he was on the same page as me as to what he wanted to see. I started drafting my ideas and when I sent out my first drafts everyone came back with really positive feedback so thankfully we hit the nail on the head first go.

LJ: Is that usual?

BP: It depends on the client and what they want and whether they trust you to do the job properly. What been really great at Mimas is the sense of trust that I’m given. People are confident in my capabilities and let me get on with it.

You’ll be able to see Ben’s new design for Copac from 1st May. Watch this space.

Spotlight on the team behind the new Copac website and design: graphic design, part 1

Copac Team Member Lisa Jeskins met up with Mimas’s new graphic designer, Ben Perry to talk about how he got started as a graphic designer and how he came up with the new Copac design.

We’ve split the interview into two blog posts, today we hear how Ben got started as a graphic designer.

LJ: So Ben, how did you become a graphic designer and how did you end up at Mimas?

BP: I started out studying Three Dimensional Design at Manchester Metropolitan University (MMU) and then did a year doing a Business Development course also at MMU. That’s where I started to develop my graphic design skills. After that I was placed for 2 years as Designer in Residence at Salford University, as part of the Design Initiative’s “Setting Up Scheme”, where I further developed my business and skills base.

I then went on to work for Sole Technology, an action sports footwear and clothing manufacturer. I spent a couple of years there producing the art work for their promotional leaflets, magazine adverts and brochures for the UK arm of the California-based company.  While I was working there I also started to get involved in promoting live music events in Manchester and through that I ended up doing a lot of graphic design work, not only to promote my own music events but more and more people started to come and asking me to design materials for them. So after a couple of years at Sole Technology, I decided to leave go freelance so that I could concentrate on graphic design and promoting events.

Slowly over course of last 3 years I’ve ended up tailing off on the events side of things because I was so in demand for my design skills, bringing bigger clients and more projects in to my freelance business. Also it didn’t fit with my family commitments either, I couldn’t really go out late every weekend any more when I had a small child. I’ve been doing solely graphic design for the last 2 years.

LJ: Would we have seen any of you work?

BP: Yeah, you would have done. I do a lot of graphic design for the Printworks, their promotional literature, in-house documents and all sorts of bits and pieces for them. Probably because of my background in music promotion, I do a lot work for the entertainment and night life sector. I met a lot of people when I was promoting events, so I also design a lot for clubs and music promoters, doing their promotional materials and websites. I also do all of the graphic design for a place called Sound Control in Manchester and have done some stuff for the Deaf Institute. All sorts of people, really – it’s quite broad ranging. I’ve worked with independent promoters, a paediatric dietician and have recently done some work for a company who have a mobile paella stand and import Spanish produce – I branded all their stuff for them.

LJ: Do you prefer designing print and promotional materials or websites? Which do you prefer – or do you prefer to do the whole ‘package’.

BP: I do prefer it when companies come to me and ask me to work on their whole brand. For example, I’m working with Levanter Fine Foods at the moment, the Spanish produce people I was talking about earlier. They came to me with this notion of what they wanted and I had to design their new logo. They wanted branding rolling out across everything – letterhead, compliments slips, business cards, flyers, catering stalls, labels for produce and we went the whole hog with everything. It was great because they were really confident in me, they trusted my judgement and my design skills so they knew I was going to deliver what they wanted. So I had free rein over everything and I was able to be really creative and do what I wanted which was really nice.

LJ: How did you build up your knowledge of art? From doing your degree?

BP: I’ve always thought of it as having a ‘visual vocabulary’, which is something that you gain over time – I don’t think it’s something you can learn. From a young age, art was the subject at school that I was most interested in, it’s the one I did best in. However I think that over the years you develop a sensibility and a notion of what looks good, and what feels nice, and for me I have sorts of inspirations. I’ve always been one for looking at my surrounding and being inspired by obscure things in everyday life, textures, colours that you see. There’s so much out there to inspire you. You also have to keep up with trends and new technologies for websites and graphic design and the look and feel of things that are current. One of the things with the Copac site was that you wanted it bringing up-to-date and you wanted it to feel current and modern.

You can hear how Ben achieved this, next week as he explains how he came up with the new Copac concept.