UX of Chartered Institutes

User Experience of
Chartered Institutes
– A review

2 3

Contents
4 Introduction

5 Chartered Institute websites reviewed by Zabisco

6 Zabisco UX consultancy & design
By Natalie Moore
- Customer Experience Researcher
7 User Experience/UX

9 The start of the user journey
– The homepage

12 User-driven focus vs organisation focus

18 User interface

18 Using a hero

19 Navigation

22 User engagement
Hammad Khan
- Director of User Experience 23 Accessibility

27 Mobile and responsive web design

30 Summary

Published by
32 Table of figures
Zabisco Digital Limited
team@zabisco.com

www.zabisco.com | customer experience: research | architect | design | evaluate | implement www.zabisco.com | customer experience: research | architect | design | evaluate | implement

4 5

Chartered Institute websites reviewed by Zabisco

Introduction
he purpose of this paper is to review the current

T
status of the digital presence of Chartered Institutes
(CI). In this Whitepaper, we will be looking at how Figure 1: Chartered Institute websites reviewed
successfully or how unsuccessfully CIs provide a
good digital User Experience (UX) to their members
and visitors. CIs are professional bodies for people
in a particular profession. The CI exists to provide resources and
networking opportunities for those people and it exists because it is
funded by those people, its members. Therefore, ultimately, a CI is
user-centred in essence. The members/users pay for an affiliation to
the organisation, to get what they want out of the organisation; they
have a significant impact on how the organisation should be run and
the services it delivers.
Therefore, with them being user-centred in principle,
we would expect all member organisations like CIs
to deliver a user-centred digital service, providing
a positive user experience (UX). As such, here at
Zabisco, we have done a wide-scale review of a range
of CI websites. This Whitepaper has been produced to
discuss our review of the digital UX within this sector
and indicate where opportunities exist to improve their
UX. With a great amount of CIs worldwide, we have not
reviewed all but a sample across the sector; the sample
of websites we have explored can be seen listed in
Figure 1 below. Furthermore, of course, non-member
access is restricted; therefore, we can only comment
and discuss pre-login experience across the range of
sites. The discussion we present cannot reflect the
quality of UX in the secure areas.


6 7

User Experience/UX

Firstly, why should UX be considered at all? What does UX really
mean in digital design? UX is a well-established profession and an
integral part of digital design because it is identifiably important.
The term is reasonably self-explanatory; we work on the experi-
ence that a user has when using a digital service. Those two words
can be considered individually though to give two key factors why
Zabisco UX consultancy & design this practise is important and what should be taken into account:
who is the user and what is the experience?

So, who is the user? Professional bodies, such as CIs,
provide services for a particular group of people as
they exist around a certain profession. The organisa-
tion’s purpose is to deliver resources and opportunities
At Zabisco, we specialise in understanding users, their
relevant to people who work in a particular field. This
needs and motivations. We shape their digital experience
does not mean, h owever, that those people’s drivers,
through designing the environment and tools which
interests and motivations are necessarily the same.
create that experience, with the end users always in
The CI may be providing services for a large population
mind. For us, users come first and remain the key
of people with one major element in common, but that
consideration throughout.
does not mean that there is little diversity within that
group.

When considering who the visitors to the website of
a CI are, the diversity in who they are, why they are
In the following sections of this paper, we will discuss visiting the website and what they may want from it
what UX is and why it should be a fundamental concern becomes apparent. Firstly, there are members and
in digital design. In our review of the CI websites, we will non-members; instantly there are two factions of people
evaluate the various factors that create the UX, discuss with a different reason for visiting the website. Within
what makes good UX in relation to these aspects and those two groups are different types of users: not only
highlight examples across the CIs sector that we have different job roles, gender and ages, but different levels
researched where we feel the UX is being addressed of internet literacy, knowledge, loyalty or affiliation and
effectively and where it could be much improved. attitudes. Each of these users may be engaging with
the website with a different motivation and goal and,
therefore, will have a different experience from the
same site. Considering who your users are should be
the first thing identified when designing a website and
should remain at the forefront throughout.

www.zabisco.com | customer experience: research | architect | design | evaluate | implement

8 9

T
Then, consider the experience those users
will have from the website. We’ve established
there are different users, with different
needs and wants, but what is the same is
that all users will be seeking a satisfying
experience. The experience is important;
it affects the user’s perception of the organisation, the
level of engagement this incites with the organisation and
potential leads created with the organisation beyond the
website. As stated, organisations like CIs exist for their
users and remain in existence by retaining and attracting

The start of the
new members and, thus, funding. Therefore, the UX
of the website is an integral part to the success of the
organisation.

The positivity of this experience is determined by how
easy the user journey is and whether the user gets what

user journey
they want from it. A user journey is the route a visitor to
the website takes to find what they want: the pathway
from A to B. This may be via C, D and E; it may be as
short or long, simple or complicated as the design of the
website helps to make it. In the following parts of this
paper, we will discuss the elements of the CIs website

– The homepage
designs that shape the user journey and the overall UX.
There are many factors of digital design that combine to
create the UX and each of these, and the interactions
between them, should be considered. We have broken
these aspects down into a 10-point review, listed below.

Actually, the start of the journey is not the homepage; the start of the journey is the user’s motivation and how they
1. User-driven vs organisation-driven focus
find their way to the website. This highlights our first point – the user, who they are and their motivations and goals,
2. Information architecture always comes first. Something to consider…
3. User interface
4. Interactivity and engagement

5. Aesthetic appeal and media

6. Accessibility
For the purposes of this paper, however, to address the
7. Functionality and features website UX, the starting point for a user interacting with
the organisation’s digital service is the homepage. This is
the first interface they see, where they begin to find what
8. Content
they are looking for. From this first impression, the user
will obtain a perception of the organisation and an instant
9. Social integration and sharing
perception of how easy this website may be to explore
and identify what they are searching for. For instance,
10. Mobile and responsive web design look at the examples below; it can be seen with these
how the design affects the appeal of the site and sets
expectations of how easy the site may be to use. Some
We discuss CI websites throughout this paper in comments follow giving examples why we selected these.
terms of these points and their inter-relationships;
some are considered in conjunction where they
heavily interact. Firstly, however, we’re looking
at the beginning of the user journey and first
impressions before we review in a greater level
of detail, although some of these points will of
course be touched upon.


10 11

Uncluttered homepage is easily digested by the user and clear
sectioning makes it easier to register areas of content quickly.

Figure 2: Homepage design providing better UX - Chartered Institute of Public Relations

Use of media allows users to interact with the site content and
enhances the user’s interest.

Highlighting ways in which users can interact with the organisation
beyond the website; ie social media and mailing list.

Figure 3: Homepage design for better UX - Chartered Institute of Architectural Technologists


12 13

Two CIs have recently undergone a website redesign:
the Chartered Institute of IT and the Chartered Institute
of Engineering and Technology. The Chartered Institute
of Engineering and Technology was a UX design by
Zabisco. In both cases, a user-centred design approach

User-driven focus
was employed to improve their online presence and
the UX for members and visitors to their website. In
both cases, the redesign resulted in a user-specific
starting point to navigate from, clearly visible on the

vs organisation focus
homepage. Both CIs use an interactive hero to display
this information, making it noticeable and distinct, shown
below in Figures 4 and 5. The value of using tools such
as this is covered later in the paper.

As we have said, the user comes first. The users’ wants, needs, motivations and goals will determine why
and how they approach and go through a website. So, logically, provide users a journey based on who they
are and what they need: streamline their journey and make it easier for them. As reiterated throughout
this paper, considering whom your users are and their motivations and keeping this at the forefront
throughout ensures a user-centred design.

Figure 4: User-driven navigation - Chartered Institute of IT

A user journey initiates from the
homepage, therefore the digital service
should be user-centred from this point.
Some CI websites we have seen
incorporate this principle to some extent,
to direct people to areas of the website
related to that user, by having links on the
homepage for employers or students, but
this does not delve deep enough into who Figure 5: User-driven navigation - Chartered Institute of Engineering and Technology
these users are or their motivations, which
in turn would help shape the best user
journeys for them.


14 15

It is still possible to navigate to areas of the site from the homepage
immediately, of course, by content or resources the Institute offer,
and this is appropriate and important, but the option is available to
filter information based on the user. Allowing members and visitors
to engage with the website from the outset based on who they are
creates an enhanced experience, of having a focused and relevant
relationship with the Institute.

Many of the websites reviewed, however, do not take
this approach. They are designed around what the
organisation has to offer in terms of departments or
services rather than whom they are offering it to. As
stated above, content-driven navigation options are
important, but this too can be user-centred to give
a good UX. Of course, being user-centred does not
mean everything must derive from a specific user
perspective. Yes there are variations amongst user
groups as outlined earlier in this paper, but there are
some commonalities in terms of content they will be
looking for. Therefore, some task or organisation-
based content is user-centred, but which elements
these are needs to be identified and the presentation
of them must be considered to provide an optimal
user journey. This is where many CI websites could
be improved. For example, Figures 6, 7 and 8
demonstrate a poor UX in terms of content navigation
and comments below each outline some reasons why
this is the case.

Figure 6: Poor UX design - Chartered Institute of Environmental Health

• There is a lack of logical organisation to the main links in the centre of the homepage.

• It is not immediately obvious or intuitive what information all of the links will provide,
particularly to a novice visitor

• The benefit of using imagery has not been effectively included to enhance user understanding
of the content.


16 17

The content is there, but it is not engaging in terms of user
or content type, nothing stands out, making the user have
to seek out any information and therefore not providing the
easiest user journey from the start.

The scrolling feed on the right ‘What’s New’ is bland, not
well-spaced and moves too quickly to read the longer pieces
of text easily and comfortably.

Figure 9: Chartered Institute of Public Relations Figure 10: Chartered Institute of Public Relations

• Disorganised layout; for example, there is an Upcoming events
section but they are scat tered all over the homepage and not
clear.
Figure 7: Poor UX design - The Chartered Institute of
Patent Attorneys • The use of so many different fonts and colours is distracting
and makes the page look cluttered; there is no consistency to
help guide the user.

In member organisations such as CIs, membership
and disseminating information through news or offered
services are most commonly placed at the forefront
on homepages. However, the more contemporary
websites with better UX present these aspects in a
visually more appealing and immediate way, enabling
users to easily access this information more instantly –
thus providing a user-centred UX. Some examples of
CIs who address these aspects are featured above in
Figures 9 and 10.

Figure 8: UX not addressed - Chartered Institute of
Internal Auditors


18 19

User interface Figure 11: Using a sliding hero - Chartered Institute of Architectural Technologists

The layout, links, menus and navigation options are all designed to make up the user interface which
facilitates the UX. The aesthetics of these aspects and any media used to enhance interactivity and
engagement create a better UX. Following, we’ll look at these various factors of website design and how
well CI websites are addressing them.

Using a hero
Figure 12: Chartered Institute of Public Relations
Effective use of a hero on the homepage has a positive
impact on the experience of a website from the outset.
Using an interactive hero not only makes a webpage
look instantly more aesthetically appealing, it enables
more content to be displayed in a condensed fashion. A
sliding hero creates a level of interactivity with the user,
engaging them, and gives an opportunity to display
information the organisation wants to highlight and draw
attention to. In the figures below, we’ve selected who we
feel utilises a hero for beneficial UX.


20 21

Navigation
Of course, a critical part of the user journey and UX
created is the navigation. Several factors impact whether
the navigation provides a good UX or not: a combination
of the Information Architecture, aesthetic design and
interactivity involved. We’ve previously discussed
initiating a user-centred navigation from the homepage Figure 15: Sliding menu panel - Institute of Engineering and Technology
but it is important to retain a user-centred perspective
throughout in forming user journeys.

Menus and links should be clear and direct the user on a
streamlined journey. Cluttered pages should be avoided, Very few of the CI websites utilise other
so making use of interactive features such as drop down features outlined above such as sliding and
menus, heroes, sliding and collapsible panels allows for collapsible panels. This interactivity engages
content to be displayed in a condensed and organised users and makes them want to look at what
format. This approach is more digestible for the user. is there. In Figures 14 and 15 are examples
For example, as shown below in Figure 13, the use of from our own website design for the Institute
drop down menus on the main navigation provides better of Engineering and Technology to demonstrate
UX in terms of displaying immediately to the user what the effectiveness of these interactive features.
content a section contains without having to leave the Figure 14: Collapsible menu panel
page they are currently on. - Institute of Engineering and Technology

Within the site, cues and feedback to the user
are important to facilitate their journey. As can
be seen in the figures 14 and 15, small visual
cues can make significant changes to user
understanding. In each of these images, the
interactivity of these areas is indicated by the
inclusion of the arrows. They intuitively signal
to the user this means they can click on the
content to move it in a direction. The arrows
on the collapsible panel in Figure 14 change
direction to feedback to the user which section
is ‘open’ to reveal information.

Feedback and cues are important throughout
Figure 13: Use of a drop down menu navigation, to indicate to the user where they
- Chartered Institute of Personnel and Development are on the site and what their options are
and their actions mean. The use of colour is
important; for example on the main navigation,
changing the colour of a tab compared to
The drop down menu enables content to be condensed and the rest of the tabs highlights to the user
reduce the amount of information required on the homepage. what section they are on. This can be done
texturally also, for example by changing the
impression of the text when the mouse hovers
It enables the user to find out what clicking a tab could lead over it indicates to the user it is a clickable
them to without having to leave the page they are on, there- link. Breadcrumbs are a useful tool to simply
fore reducing page loading or the potential for beginning on demonstrate to the user where they are on
an incorrect journey to find what they want. the site, where they were previously and allow
them to go back to a section in one action.


22 23

User engagement

Visitors to the CI websites, members or non-
members, need to be encouraged to explore the
website for this resource to fulfil its purpose. A
visitor firstly wants to achieve their goal and get
what they want out of the website and a bonus is
being attracted to view other areas of the site. In
order to do both these things, the website needs
to be inviting and enable the user to engage with
the service it provides. Photos and images are
incorporated in the majority of the websites we have
reviewed, which does serve to enhance the appeal
of a website. In some cases, appealing aesthetics
are utilised well on the homepage but not carried
through to sub-level pages.

Figure 17: Chartered Institute of Environmental Health

Figure 18: Chartered Institute of Environmental Health

The Chartered Institute of Environmental Health is an
example showing how poor aesthetic design make a
website much less inviting to read and explore; users
are not attracted and drawn in to the content.

Figure 16: Collapsible menu panel to condense information - Institute of Engineering and Technology


24 25

Accessibility
The Chartered Institute of Architectural Technology is a CIs are - or should be - user-centred organisations,
great example of using media to engage with visitors to as previously outlined. A constant goal for member
their website, as can be seen in Figure 19. Two videos
are placed at the forefront on the homepage to attract organisations like CIs is to both acquire new members and
users to find out more about the organisation. Animation retain those acquired. Maintaining and increasing their
is used within the videos as well, which makes them member base secures the funding and resources needed
more interesting viewing. The homepage of this website for the organisation to exist and grow. This is done through
is simple and does not have a lot of content, but the use providing services and resources that cater for all users’
of an interactive hero, imagery, animation and video can
tell a user a lot more than a block of text. needs and requirements; in this instance by making the
website accessible. The digital services provided need to be
inclusive for members and potential members, considering
potential disabilities and requirements they may have that
would affect the use of the site. Some websites we looked at
do incorporate accessibility functionality into their websites
and this is great to see, but it is not present in many.

(A) (B)
Figure 20 : Key indicators to change text size

The Chartered Institute of Architectural Technologists
(A) and the Chartered Institute of Payroll Professionals
(B) firstly both include functionality to change the text
size on the site, increasing the accessibility of their
sites for people with visual difficulties. Secondly, they
both present this in an accessible way. There are no
separate pages or descriptions on how to change the
website text size; a simple row of letters in different
sizes is recognisable to the user that this is how they
change the text size.

Figure 19: Chartered Institute of Arcitectural Technologists


26 27

Another functionality common when including
accessibility options, but not common in application, is
the ability to change the colour contrast of the website,
seen below in Figure 21. This option was not found on
the majority of websites we reviewed as many do not
include these options clearly at all. Again, providing
these options would enhance the user experience and
ease of use for a proportion of visitors to the website.
The Chartered Institute for IT has included both options
presented in a simple, clear way.

Figure 22- : Accessibility functionality on Chartered Institute for IT

Figure 21 : Accessibility functionality on Chartered Institute for IT
The Chartered Institute of Management Accountants have
considered accessibility and aimed to deliver a service
that is understandable by all and technically easy to use.
However, they have not covered physical accessibility
for those users with impairments as there is no option to
change text size or colour contrast.

Arguably, yes, someone with a disability that impairs
their use of computers or websites can change settings
on their computer or browser that would improve the
usability of websites – as the BBC website gives a
comprehensive overview of1 – but, what about a user
accessing a website from someone else’s computer, a
shared computer or a public computer? What if someone
else modified the settings for the user on their computer
and they are unable to do so themselves on a different
computer? Wouldn’t providing some simple options
on their own website deliver a better service from the
organisation to the user?


28 29

At Zabisco we created an infographic on the UK

Mobile and
smartphone market in 2011, demonstrating the
trend towards smartphone usage. An excerpt
from this is above in Figure 24.

responsive web design
The digital world and how people access websites is changing.
Sales in desktop PCs are declining and we are seeing an
increased market in mobile devices such as smartphones and
tablets. The graph below shows recent and predicted trends.

Apple’s iPhones and iPads are leading this market
with others quickly following suit. At the beginning
of this year, Microsoft published a report on their
upgraded operating system Windows 8 and outlines
how it will be an upgrade for better experience on This has significant implications for UX and web
mobile devices. The user experience to be had design, and the accessibility and usability of websites
in comparison to Windows 7 on a PC will be very when put into today’s contexts. If many people
similar; the improvements are proposed to be already, and continuously increasing amounts of
significant for small portable devices like tablets and people, are accessing websites on mobiles, it should
smartphones, suggesting that Microsoft recognise be a priority whether your website is suitable for
this as the changing face of the digital market.” browsing on a mobile.
“3” on page 33
There are fundamental differences between mobiles
and desktops which mean that a desktop website
design does not transfer well to mobile browsing. The
screen is obviously smaller, so how easy content is
Figure 24: Infographic on UK smartphone market to see and read becomes an issue. The users do not
2011– Zabisco have a mouse to navigate and select buttons and
content, they use their fingers; target sizes become an
issue. It is not so easy and is frustrating for a user to
type a lot of information using touchscreen; minimising
the need for user input becomes important. In addition
to these issues, internet connectivity on a mobile can
be less stable. Page loading can be slower, therefore
the content and navigation should be designed with
this accounted for; minimise the need for input and
page reloading.

Of those we’ve reviewed, even the RC websites
that we determine provide better UX are not
optimised for mobile and this is certainly a domain
that anyone providing digital services should be
moving towards. We recently published a blog on
the key factors of great mobile web design; for
more information on effective mobile web design,
this can be viewed at http://www.zabisco.com/blog/
Figure 23 : Trend in smartphone sales the-keys-to-great-mobile-web-design/.


30 31

The Chartered Institute of Management
Accountants (CIMA) we would highlight next
and are pleased to see them adopting a design
to facilitate the user experience. There are
interactive tools and helpful navigation tools, there
is use of media and – most importantly – this
carries through the site to sub-level pages making
them easy to digest.

The Chartered Institute of Public Finance &
Accountancy (CIPFA) rates just above the ones
we present following. CIPFA uses some good
navigation tools from the homepage: a sliding

Summary
hero and mega-nav drop-down or pop-up menus.
It has a clear, simple, uncluttered layout which
carries through to sub-levels. Unfortunately the
experience becomes bland; there is a lack of
intelligent use of imagery and interactivity to
assist the user in their journey and make it more
appealing.

To sum up what we’ve been discussing in this paper, we’ve selected some examples from the websites we reviewed
that we rate higher in terms of aspects of user experience and rank them here for their overall user experience.
There are 8 Chartered Institutes appraised here; all go some lengths to address the user experience and succeed in
elements, but on exploring the sites they begin to separate out…

The Chartered Institute of Public Relations (CIPR), the
Chartered Institute of Payroll Professionals (CIPP), the
Firstly, of course, the Chartered Institute of Chartered Institute of Marketing (CIM) and the Chartered
Engineering and Technology (IET) rates highly Institute of Architectural Technologists (CIAT) we rank
with us – we designed it. When designing a somewhat alongside each other. They all do include
website we consider all the aspects of the some video media to enhance the content of the website
user experience discussed in this paper as we and begin with providing an appealing homepage.
recognise the value of doing so. IET comes up However, first impressions are not everything,
top because it gives a user-centred experience particularly when evaluating the holistic user experience.
from the outset and this carries through the site Unfortunately the rest of the content is not presented so
and through the user journey. The IET website interestingly or in fact user-friendly; it is not so easy for
does not incorporate the accessibility functionality a user to find what they are looking for without reading
discussed in this paper, but unfortunately this through a long column or block of text. Aesthetic design
aspect is rarely high on the clients’ priority list and would improve these websites – font style, colour, layout
is not fit into the agenda. The Chartered Institute all do have an important impact on user experience.
for IT (BCS) also incorporates a user-driven
journey through their site and navigation tools
such as a hero and mega-nav; but the website None of these websites have a user-driven approach
is lacking in aesthetic appeal, visual cues to the in the same capacity as the IET website or BCS
user for multimedia, interactive tools to condense website. All of these websites are difficult to rank in a
and break down information…we feel it could be definitive order; different sites provide better or worse
improved. user experience in different aspects of the information
architecture and design. To provide an optimal user
experience all aspects need to be considered in a
holistic approach to the design.


32 33

Table of Figures Bibliography
1
5 - Figure 1: Chartered Institute websites reviewed http://www.bbc.co.uk/accessibility

10 - Figure 2: Homepage design providing better UX - Chartered 2
http://money.cnn.com/2010/07/20/technology/desktop_PC_
Institute of Public Relations death/index.htm
11- Figure 3: Homepage design for better UX - Chartered Institute 3
http://money.cnn.com/2010/07/20/technology/desktop_PC_
of Architectural Technologists death/index.htm
13 - Figure 4: User-driven navigation - Chartered Institute of IT

13 - Figure 5 : User-driven navigation - Chartered Institute of
Engineering and Technology

15 - Figure 6: Poor UX design - Chartered Institute of Environmental
Health

16 - Figure 7 - The Chartered Institute of Patent Attorneys

16 - Figure 8: UX not addressed - Chartered Institute of Internal 21 - Figure 14: Collapsible menu panel - Institute of Engineering
Auditors and Technology

17 - Figure 9: Chartered Institute of Public Relations 21 - Figure 15: Sliding menu panel - Institute of Engineering and
Technology
17 - Figure 10: Charterered Institute of Public Relations 22 - Figure 16: Collapsible menu panel to condense information
- Institute of Engineering and Technology
19 - Figure 11: Uaing a sliding hero - Chartered Institute Arcitec-
tural Technologists 23 - Figure 17: Chartered Institute of Environmental Health

19 - Figure 12: Chartered Institute of Public Relations 23 - Figure 18: Chartered Institute of Environmental Health

20 - Figure 13: Use of drop down menu - Chartered Institute of 24 - Figure 19: Chartered Institute of Arcitectural Technologists
Personnel and Development
25 - Figure 20 : Key indicators to change text size

26 - Figure 21 : Accessibility functionality on Chartered Institute
for IT

27 - Figure 22- : Accessibility functionality on Chartered Institute
for IT
28 - Figure 23 : Trend in smartphone sales

28 - Figure 24: Infographic on UK smartphone market 2011
– Zabisco


Published by
Zabisco Digital Limited
team@zabisco.com


UX of Chartered Institutes

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie UX of Chartered Institutes

Ähnlich wie UX of Chartered Institutes (20)

Mehr von Zabisco Digital

Mehr von Zabisco Digital (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

UX of Chartered Institutes