JMCQUARRIE.co.uk

James McQuarrie is a London (UK) based User Experience consultant who designs and helps build web based applications that delight their users.

Search Results for 'books'

  1. Sweet & Maxwell – part of Thomson Reuters

    Comments Off

    Sweet & Maxwell, owned by Thomson Reuters, provide legal professionals around the world with quality information that they rely on. They publish encyclopedias, textbooks, eBooks and online services that are respected for their authority, breadth of coverage and currency.

    I was initially contracted for three months to work on Sweet & Maxwell’s Westlaw UK online document search product, tasked with helping them design the interface for a new search feature they were planning on adding to the service. I ended up working with the team for twelve months on a number of projects and several different products, all requiring elements of Information Architecture, Interaction and Interface Design.

    Westlaw UK – search interface design update

    Screenshot of the Westlaw UK homepage Figure 1 – The Westlaw UK homepage

    My brief was to evaluate and recommend the best interface design for adding a new set of features to their existing search results interface. I was to work closely with the business team (customer facing), the product development team and the business analyst’s to understand the problem and then come up with a design that would fit with the exisiting Westlaw UK look and feel and not alienate their customers.

    My first task was to learn about Westlaw UK users, who they were, why they used the search tools and how they used them. The Sweet & Maxwell team had a good understanding of their customers and access to a lot of user research. Working with them I was able to put together a good set of personas to represent the most important user groups for the project.

    Each of the different target user groups could want to use the new search controls in slightly different ways, depending on their priorities and search strategies. I developed a scenario map for each persona that allowed us to list all of the different use cases and ensure that the designs would accomodate all of them.

    Once we had a clear understanding of who would be using the new search features, and why, I was able to research current best practises and help the team understand and evaluate the options available. I looked at other online search tools and online shopping tools that featured similar search controls to those that we were going to add to the Westlaw results. I also read through research papers and usability studies that evaluated different search tecnhiques and interface designs.

    Based on this research I mocked up some HTML and CSS prototypes that illustrated each of the different interaction designs that we could apply to the new search controls. These were presented to the product team and discussed and evaluated in detail, and from the options two designs were chosen to test with customers at a usability lab.

    For the usability testing I built two static HTML mockups, one of each of the design choices that we wanted to evaulate, that looked and worked like the real Westlaw UK application. These allowed the test participants to click through a series of screens representing how the new functionality would work in what appeared to be the real Westlaw product. The mockups were tested and discussed with a number of Westlaw UK customers over a two day long usability lab.

    Based on the findings from the usabilty tests the product team choose a prefered design which I then documented and handed over to their in-house development team.

    Lawtel – new content designs

    As well as working on Sweet & Maxwell’s flagship Westlaw UK product, I was asked to help with a smaller project to add a new type of content to their sister product Lawtel.

    Lawtel is similar to Westlaw UK, offering professionals access to a wide range of legal cases, documents and other materials.

    The Lawtel team planned on adding a new content type to their system based on an offline publication that they sold as a “loose leaf” book to their customers. They needed screens designed to accomodate the new content and they wanted help to make sure that the interaction design for navigating the new material would work.

    I worked closely with the product and development teams as well as the content owners to make sure I understood how the Lawtel customers would use a new digital version of the publication, how they would want to access it and how it would be digitised and made available by the Lawtel content team.

    One of the things that made the new content type stand out from the existing material on Lawtel was that it was long form. The majority of the existing material on Lawtel at the time was in the form of short case studies or case reports. Most of which didn’t contain more than a few thousand words. The new content that we were adding in its printed, offline form was much, much longer. Many chapters, many sections all split over several volumes.

    To take volumes of content online and make them searchable made a lot of sense. But, in doing so we needed to make sure that the content was still readable and navigatable in its full, long form. The designs that I developed for the new content focused on two areas:

    1. making the content readable on screen
    2. making the long content easy to navigate both when a user was taken to a specific section of the material via a search or if they wanted to browse to a topic or chapter or volume manually.

    Making the content readable on screen invovled some careful typography choices; leading, colour, size, etc all needed to be considered and tested. I also focused on making the text as easy to scan through as possible. We knew that many users would arrive in the middle of a section of content having searched for something and that they would want to understand the context of the result as quickly as possible to understand if they had found what they were looking for. In order to make this easier, the design paid special attention to the visual hierarchy of the content, with clear headings, sub headings and waypoints throughout.

    IDS

    Screenshot of the IDS homepage Figure 3 The IDS website – ids.thomsonreuters.com

    The team at IDS (another part of the Thomson Reuters family) provide research and analysis in key areas relating to employment. They wanted some help designing a new website that would take their four paper based journals online in one convienient place.

    They team wanted my help in developing the information architecture for the new subscription based site. They had already begun working on the designs, but had run into some trouble trying to tie the four different journal’s content all together.

    I worked with the project team and the lead content owners. We worked through the different content that the four journals offered, how they were related and how they differed. From that work we were able to identify a common navigation structure that worked across all four content types and develop a site wide information architecture that accomdated all of the required content as well as a site wide search facility that allowed customers to search all IDS content or just the content that they have subscriptions to.

    Based on this new architecture I then built a series of static HTML and CSS mockups that represented each of the different screen designs that would be needed for the site. These were presented back to the project team and reworked based on their feedback until a final design was agreed on. Once the basic page layouts and site structure were agreed the mockups were handed over to the Thomson Reuters design teams for branding and visual design.

    Westlaw Insight

    As well as helping the Lawtel team add a new type of content to their product, the Westlaw UK team asked me to help with adding a new type of content to their product to.

    The new content was called Insight. The idea was to get legal experts to write short introductory overviews to areas of UK law that would be useful starting points for anyone researching an area of law that was new to them, or if they needed a quick refresher on a topic of interest.

    The team had the idea and early versions of example content, but they needed some help with the information architecture, navigation, interaction and interface designs for the new area of content. My role was to design these elements of the new feature, and again, make sure that they were in keeping with the look and feel and branding of the exisiting Westlaw UK content.

    I followed a similar process to the other work I did with the team; first looking at which user groups we would be aiming the new content at and how they were likely to use it. Once we understood how customers would use the Insight content I worked with a taxonomy designed by the content experts for organising the Insight content, to help design the navigational elements of the new area and individual Insight screens.

    I built several HTML and CSS mockups of different navigation options and screen designs that we could have used for the new content area, and presented them back to the team. Based on feedback from the team I reworked the designs over a number of months until we had a final version that everyone was happy with. This then formed the based for building a complete mockup of the each of the new elements that would need to be built by the development team to make the Insight feature work.

    Westlaw mobile

    As well as working on the new search designs I was asked to help with a project to look at making the Westlaw UK product available on mobile devices. Faced with a growing interest from customers to be able to use tablet devices to access their research tools, the team wanted some help to re-imagine the Westlaw experience for mobile devices.

    I worked closely with a small team of system architects, product owners and advanced media specialists to help them rethink how Westlaw could work in a mobile world.

    We started by working out which customers were most likely to use a mobile compatible offering, how they would want to use it and under what curcumstances. We drew up a list of personas (building on the work done on the search project) and associated mobile useage scenarios and started to map out the features and functionality that would be most useful in each case.

    Where features existed in the desktop web version of the product we reviewed them to see how easy to use and suitable they would be when used with a mainly touch driven interface and in a mobile environment – in courts, client meetings, on the move, etc.

    Ultimately we developed a new feature set, information architecture, interaction design and interface design for the mobile version of the product that allowed access to the same huge wealth of content as the desktop tools, but in a striped back, easier to use design.

    I created a series of static wireframes based on these new designs that we were able to present to some customers for feedback to confirm if they would consider using a mobile version of the product and if so, if our thinking was on the right track for how.

    The feedback was good, they liked the idea and how the design made things easier in a mobile environment.

    My time on the project ended after delivering a completed set of wireframes for the mobile version of the product, designs that were developed to work on both phone sized screens and larger tablets.

  2. Sometimes trees grow sideways

    Comments Off

    Back in my PA Consulting days I worked on one project to help a client design their public facing website.

    Our aim was to produce a simple, brochure style site that could be further developed over time to be a more interactive forum for customers in the future. We needed to get something together quickly as a stop gap on the road to full blow e-commerce.

    I was working with two people from the client company, their head of marketing and their head of technology. Both were very enthusiastic and eager to be involved in the development of the website. To capitalise on their enthusiasm I invited them both to a meeting to help us work out how the Information Architecture for the site would work.

    In order to get things started I asked them both to write on post-it notes all of the topics that they thought the website should cover (contact details, product information, company information, etc). I then asked them to stick all the notes on the wall and start organising them into some sort of logical groupings.

    The head of technology placed all the notes on the wall in a pyramid arrangement, with the more generic topics at the top (fewer of them) leading to more in-depth topics below (more of them). A typical “tree” structure.

    Up until this point the meeting (or workshop) had been progressing along in the same way as they had when ever I’d run similar sessions with other clients, well. But then the head of marketing stood up and said;

    “I’m sorry, but I completely disagree with the structure. What you’ve put up makes no sense. You don’t move down a website, you move across a website.”

    She proceeded to rearrange the notes (at the head of technologies request) in a structure that started with the generic topics on the left and the more specific topics on the right. Her finished structure was identical to the original pyramid, only moving left to right instead of top to bottom. A tree on it’s side.

    This episode (which resulted in heated discussions between the two of them) raised two important learning points for me.

    1. Not all people see or think about things in the same way. I knew this already of course, but this experience really rammed it home to me. The head of marketing just could not see that in fact both arrangements where identical (the cause of the afore mentioned discussions), even though logically they were.
    2. Different people have a different mental model of how websites work, based on their view of the World. I have been drawing IA diagrams for years and all of them have used a top down, tree structure. Mainly because that is how I was shown to draw them, and that is how they are always drawn in textbooks and other documentation. However when you think about it most browsers (that I know of) let you move “back” and “forward” using left and right arrows, not up and down arrows suggesting that you do in fact move across a site rather than down a site.

    Ultimately we managed to calm things down a bit and get an agreement on how the site’s IA would be designed. The site went live, the project was a success and everyone was happy.

    I still regularly think about that project and the sideways diagrams and can’t help but feel that maybe a sideways metaphor for web navigation may be more accurate than an up and down model.