The Royal Veterinary College Website

The Brief

Ceate a dynamic, interactive responsive site using emerging technologies. A contemporary interpretion of the college visual identity whilst still embracing corporate guidelines. A content managed system providing access to an extensive number of site editors and content contributors.

UX Design

Information Architecture

A complex structure of education, research, veterinary medicine hospitals, farms and an international business hub each competing for prominence on the site.

Defining, grouping and prioritizing information structure started from the top, workshopping with senior management to define key operational areas of the college. Once identified additional workshops were facilitated with each key areas to further define structure. The example below provides snap shot of information structure defined through the key area of Study.

Wireframes

I developed wireframes outlining individual element placement and functionality. The biggest challenge to create a consistent layout across numerous subsections with vastly different target audiences and subject matter.

Persona’s

Consulting with various member of each of team personas were developed to ascertain typical users and how they may access and navigate the site. Due to the broad subject nature the personas varied significantly. For example some typical users included:

Potential undergraduate students interested in applying for a course. Typically these users are school and college leavers and their parents and guardians.
Potential postgraduate students. Typically science and veterinary graduates, PhDs and post-docs
The veterinary profession
Animal owners
Pharmaceutical, biotechnology, healthcare and health industry professionals
Research funders and influencers
Press and broadcast media

Rapid Prototyping

Early in the project Orchard Content Management System, a Microsoft .Net open source platform was chosen as the basis for the content management system. Due the quick nature of developing pages and navigational structure within Orchard we created rapid prototypes demonstrating user movements and interactions based on the wireframes. In some cases such as for home and landing pages hi-fidelity screens were developed in Photoshop to present a more holistic view of how the project would look and feel. These rapid prototypes were used for early user testing and further approval from upper management.

UI Design

Being central in the development of the User Experience I had a strong idea of the direction that I wished to take the project visually. Screenshots were developed within Photoshop based on the wireframes. A visual experience incorporating extra large screens down to mobile devices was parammount. The use of large background images on larger screens helped achieve this with CSS media queries removing these from smaller devices. The example below is an early iteration of the study landing page for large screen and small devices

Front End Development

I worked with a developer to create the Orchard Themes of the project. My role here was to use a Bootstrap parent theme and edit HTML and CSS providing a look and feel that reflected the mock that I had created in Photoshop.

Testing

Being central to the design process it was imperative that testing was undertaken by an external company that was not involved in the design and build process. We provided user profiles developed from the personas for the company to recruit. Two way mirrors, eye tracking software, task analysis were used for the user testing.

During the testing process users were asked to choose from a list of words they would use to describe the site. The response displayed in the word map below was very positive.

Final Interations

Thorough user testing and a numerious interations of the layout resulted in the current site. The example below is the final design of the study landing page.

RVC screenshot

Visit Site

The European Board of Veterinary Specialists Website

The Brief

To create a bespoke content management system that administers and manages 35 distinct specialties and over 3300 specialists memberships. Additional to public access, the build required individual member access enabling updating of personal details and download printable PDF certificates of membership. Colleges automatically create and submit annual returns of college data for EBVS administrative and legal purposes.

Project Proposal / Pitch

This was a European Union project and due to its size and budget required it go to tender. I co-wrote the bid and pitched at the EBVS Annual General Meeting with over 70 delegates present.

Information Architecture

The Information Architecture from a public facing perspective was quite straight forward. A shallow navigation including:

One of the biggest challenges of the IA was defining access and permissions for the various EBVS member types. With roles and access for standard diplomats, college representatives and EBVS administration varying significantly. After some early low fidility user testing it became apparent that the organisation itself was not clear of its exact type of membership roles as many of the process of the organization had previously been completed manually and roles and responsibilities were not documented. It was essential that membership types and access be defined before any start on the Dashboard Administration area.

From and administrative perspective we defined 3 types of user:

Super User: Access to all areas of the dashboard
College Representative: Each College nominates a number of representatives that have access to the college pages. The College Representative is responsible for ensuring college information is up to date, adding new members, re-certifying members and submitting an annual return.
Diplomate: Every member of every college has access to their own page where they are able to keep personal details up to date including contact details and photographs.

Wireframes

I developed initial hand drawn wireframes outlining funcitionality of the site.

Wireframes were further refined in Illustrator.

Rapid Prototyping

Axure was ualised to create lo-fidility walk throughs. As the delegates of the organization spanned the European Union this was considered the best route to demonstrate the functionality of the product via a webinar. The notes functionality of Axure was enabled in the prototype for diplomats to make comments. Changes were suggested in the webinar which were rapidly implemented in the prototype. This ensured that we had a functional prototype and a sign off from the organization in short timeframes.

UI Design

EBVS style guide were used to guide interface mocks for both phone and desktop views. User testing resulted in a number of iteration of screens being developed from the original wireframe. The example below shows one of the earlier home page mocks.

Final release

The example below shows is the final design of the landing page after numerious interations and user testing.

Visit Site

Folium

Folium is an online tool that helps individuals to maximize their learning and track their progress towards professional competency. This is achieved through skills logging, tutor supported placement planning and reflection, and through recording of and analysis of learning experiences throughout the course. The reporting function allows the organisations to monitor student progress, to review course outcomes and support course development.

History

Folium in its original incarnation (Day One Skills Online) was developed in 2010 to address the issues of veterinary students achieving competence in their ‘Day One Skills’ by introducing an online logbook for students to record where and when they advance in a particular skill, enabling them to track their personal progress and to visually identify their ‘gaps’.

Over the years functionality was added to the product that was not initially conceived. In 2016 requirements outweighed the usability of the product. I approached senior management and academics and presented a case for the original product to be retired and a new application to be built from the ground up taking into account functionally introduced over its life with possible future requirements not yet identified.

UX Design

User Research

User research included interviews with students, tutors, course leaders and educational specialists. A wish list was gathered and the functionality was prioritised for development. Top level system maps were created to display broader concepts of information flow and function along with user persona, and user walkthroughs. Four main user groups were identified: Tutees, Tutors, Group Leaders and Organisational.

With site funcitionality being complex, the information architecture is shallow. The example below demostrates the IA for Tutee section.

Wireframes

Initial concepts were rapidly drawn in workshops and meetings ensuring all stakeholders were on the same page. Folium hand drawn screen

Low-fi wireframes were created in Illustrator. The wireframes were used for paperbase walkthroughs demonstrated to all user groups ensuring concepts were understood.

The wireframe were imported into Azure to create low fidelity walkthroughs.

UI Design

Initial screens were developed in Illustrator using a bootstrap gridded template to ensure even column for a responsive design.

Prototypes

Initial pages for user testing were developed in HTML using Bootstap framework. Navigation and limited functionality were provided enabling stakeholders a clear understanding of the look and feel of product.

After a number of interations of the original screen the following evolved.

User Testing

A number of different user testing methods have been used to this point. Initially task scenarios and observations with individuals were used to gain qualitative insights into any usability issues. Large group (60 people) task scenario’s were also used to test application on various devices. TurningPoint provided responses to various questions in a short space of time. User testing is ongoing.

Latest Developments

Folium is still in development. A working version of Folium can be viewed here: http://folium.rvc.ac.uk . This instance of Folium has been created for Veterinary Students at the Royal Veterinary College. It is accessable via a Google logon. The Placements and Reports section are currently in development. Placements to be released by the end of June.

Folium has been created to ensure that any skills/competency list from any course or institute can be uploaded into the application.

Folium is an open source project.

Visit Promotional SPA

Visit Application

Parcel Force Website

The Brief

In 2013 Parcel Force redeveloped their website. The development included creating 2 sites, a desktop and mobile friendly. It soon became apparent that one responsive site was a better alternative to take. In 2018 I was the UX/UI designer tasked on the project to convert the existing site to a responsive.

The initial brief was to keep existing desktop graphical layout and adjust for smaller devices. After a number of alternative designs were presented to the clients it was decided that some pages including the home page would given a complete overhaul still taking into account the brand guidelines.

Early workshops also identified a number of UX issues that were taken into account when developing the site. For example the prominent placing of the 'Quick Quote' bar at the top of the screen and the 'Track Your Parcel' sticky footer at the bottom of the screen

Responsive Screens

The original screen

Responsive Screen

Sketch and Invision were used to create screens and present a clickable prototype to the product owner.

Process

The process taken at Capgemini for the project was Agile scrum. JIRA was used to track the project. I was required to attend morning standups with other team members, the testing team being located in India. We had weekly meetings with the project owner both online and face-to-face. Sprint planning and spint retrospective were every 2 weeks.

As the project was completed under budget. I was also tasked with converting bitmap icons and backgrounds to vector. For this I used Adobe Illustrator.

Visit Site

Background

The project was a result of Brexit. A number or processes within the Veterinary Medicines Directorate are managed by a central European body. On leaving the European Union these processes will need to be managed within the UK.

These processes revolve around reporting and registering drugs and medicines fit for use within the UK. At the time of the project the administration was managed via a number of smart PDF’s some of which were over 15 years old and having over 160 fields to fill.

My role in this project was to design a user experience and interface that gathered the same information as the original forms.

One major requirement here was that whatever the end result it must adhere to Government Digital Services Guidelines. https://www.gov.uk/service-manual

Agile Process

The project team here consisted of 3 designers, 8 developers, 5 testers, 3 businesses’ analysists and one srum master. We had daily stand ups, a retrospective and planning meeting every 2 weeks, a show and tell every week along with extensive workshops.

Design

I held a number of initial workshops with product owners to establish requirements. These workshops resulted in taking the original document, stripping it back to basics and filtering essential information. Card sorting exercise were used to create a user flow. The result of these exercise were design flow charts created in Omnigraffle. Omnigraffle was chose due to the complexity of the information flow.

Omnigraffle user flow diagram. This has deliberately been left in a state that is not readable to protect confidentially.

Once user flow was determined screens were created in Invision implementing GDS design patterns. One major hurdle we had to overcome here was GDS guidelines state that JavaScript is only to be used to enhance the user experience and cannot be used in the most basic iteration of the product. In cases were multiple entries may be required within one field. being limited to no JavaScript was a major pain point. Collaborating with developers we designed a solution that involved a looping flow to another page where data was recorded in cache. The loop back to the page adding each additional field.

Prototyping and Testing

Because Invison is not hosted within the UK Data Protection would not allow a typical Invision prototype build. In this case I was required to build a complete html working prototype using the GDS prototyping kit - https://govuk-prototype-kit.herokuapp.com/docs. The prototype was uploaded to https://www.heroku.com/ for testing purposes.

The working html prototype also helped ensure that we passed the stingent GDA assessment.

Testing was conducted with a number of typical users both online and face-to-face. I was required to write test scripts and conduct testing sessions. Users were required to complete the form using data that had previously been submitted. Testing resulted in a number of iterations of the final product.

Background

Google Analytics highlighted a major dropout rate with insurance signup on mobile devices. For this project I was required to review the current signup journey and provide alternative suggestions based on the results of user testing (observational and interviews) a comparative analysis and implementing best UI best practice.

Results

Results of user testing idendified the following areas:

User confusion with pop up window as all site branding disappeared creating a sense of mistrust.
Extensive padding was used on the window reducing screen real estate.
Alignment and consistency issues with button placement.
Use of narrow columns for larger areas of text effecting readability.

The original screen in a pop up window. No branding. Extensive padding reducing screen real estate. Search button required to produce search results.

Suggested screen with compnay branding, reduced padding extending screen real estate. Auto-compete search results.

The original screen with two coumns and narrow bullet labels.

Alternative layout with single column.

The following is a desktop versions of the search shown above

Original Search

Sugested Search Screen

Background

CVS is the largest integrated veterinary services provider in the UK. It has over 500 veterinary surgeries spanning the UK, Netherlands and The Republic of Ireland. It also operates laboratories and pet crematoria. CVS provides extensive inhouse training and continuing professional development for all of its staff including veterinary, scientific and support.

For this project I was contracted to lead a team to design the experience of users within the company accessing the learning platform.

Information Architecture

At the start of the project CVS had over 100 clinical and non-clinical courses with no logical hierarchy or grouping for end uses to be able to identifiy or find appropriate courses. Using Proven by Users I created and ran a number of card sorting exercises. The first was an open card sort to identify groups. These groups were later tested in a closed card sort.

Maximum agreement results for closed card sort

Dendrogram

Groups and agreements

Course Sign-up Service Design

Courses within CVS are delivered in a number of ways; face-to-face, fully online and blended. One major requirement was the ability for users to be able to book any face-to-face attendance through the platform. I ran workshops with users including administration staff tasked with organising workshops, end users wishing to book workshops and management staff requiring reporting. It became evident that the process here was quite complex requiring multiple notifications both to admin staff and end users. A service design was initially created in OmniGraffle.

CVS KnowledgeHub Course Booking Service Design

Background

SmartLink Offers is rewards program aimed at hotels, financial institutions, airlines and other businesses linking credit cards for both online and instore purchases improving customer engagement. Collinson has a long history of rewards programs and the aim of this project was to create a contemporary product using technology to fully engage customers.

Competitor Analysis

A competitor analysis was performed evaluating user interface and journeys of other reward programs including the signup journey. This helped provide direction for the look, feel and experience of the product.

UX best practice and the competitor analysis identified a sign up journey that:

removed all distractions,
labeled fields above the input,
only ask for required information,
conveyed a clear message.

User Journey and Low Fidelity Screens

User journeys were mapped using Sketch

Low fidelity screens were created.

Preely was used for remote testing purposes. Remote testing identified some minor issues with linking credit cards to the account. To address this an option to add a credit card in the sign up process was included.

Hi fidelity Screens.

Hi Fidelity screeens were created using Collinson branding. Sreens were uploaded and prototype created in Invision.

Fully Responsive - Mobile View

Experience

Information Architecture

Wireframes

Prototypes

User Research

Interface Design

Front End

Portfolio