All Saints’ Hockerill website development — a UI/UX case study
About the Project
Overview — The existing website for All Saints’ Hockerill focused on providing accessible information to solve the needs of its users. What it lacked, however, was an understanding of its users’ goals. As a community led charity, the website has to be the key communication channel in encouraging people to visit. The new design needed to streamline the experience for users by remoulding the unstructured content and poor navigation into a mobile-friendly design. There was also no way to manage the content of the site which meant the website was rarely up-to-date so I saw an opportunity to implement an appropriate CMS.
Solution — An overhauled website which improves (1) usability on all devices, (2) user journeys, and (3) the maintenance workflow.
How can we refine and optimise the experience for users to find key information which is up-to-date, whilst reducing backend workflow?
1 — Usability on all devices
The existing website was designed in 2012 to create online exposure for the church and to provide an accessible point of information for its users. Unfortunately, the design was restricted to a desktop experience and was difficult to navigate. The site was therefore losing out on online traffic and failing to meet the needs of the users. Identifying two fundamental issues in the design enabled me to focus on a solution which would resolve both problems. It became apparent that Responsive Design would be the basis of the redesign. Having this building block gave me a starting point to approach how to find solutions for further design opportunities.
1a — Design Opportunities to Improve
Opportunity 1: There is no continuity in the design — By examining the current site, there seems to be an existing theme. The design has a colour scheme that represents the brand and uses photos to break up content and guide the user through each page. However, inconsistencies make it apparent that the U/I doesn’t follow a style guide. For example, I observed the following:
- Whilst there is a colour scheme, only using grey and maroon as the two defining colours of the site causes a lack of definition in hierarchy for the information and links. The shade of grey for the text does provide some contrast but, according to WCAG 2.0 guidelines, it doesn’t meet AAA conformance.
- Colour and contrast: there are only 2 defining colours of the site. Due to the lack of contrast, important information is harder to see.
- There is no uniformity in the typography. Three font types are used which makes the content feel disjointed (Arial for headings, Verdana for links outside the main body of text, and Corbel for paragraphs and paragraphs links). The font sizing is also arbitrary- the breadcrumb and sidebar links are different sizes and the heading is not much bigger than the links provided in the sidebar.
Opportunity 2: The information is presented badly — Whilst the information provided on the site was comprehensive, it lacked clarity in its organisation and format. Each page has been designed to reduce its overall length. In theory, this approach aims to increase visibility by reducing the amount of scrolling necessary. In practice, it makes the text more difficult to read and it isn’t applicable to smaller screens.
Note how the content is overwhelming for the user. The page is unbalanced as the layout hasn’t been defined by a viewing pattern and the lack of paragraph headings and whitespace reduces visual focus. Each block of text is substantial meaning that the user has to read the whole page to understand if they have reached their desired goal. The justified type also distorts the whitespace, making the text more difficult to read due to the varied spacing that breaks the continuity of flow of words.
Opportunity 3: There’s a lack of visual direction to guide users — An important approach was to consider that the site is to be treated as an online representation of the church for both new and existing users. I decided to analyse the very first interaction between the user and the site: the Home page. Unfortunately, it currently functions on a basis that a user always knows what they are looking for and where they are to find it. There is no visual hierarchy due to the body consisting of text with no use of U/I elements. Therefore, the limited structure to the design of the pages presents a confusing user experience which doesn’t encourage further exploration, something which is not a reflection of the real-world relationship between the community and the church.
1b — The Design Process
To start the design process, I created three wireframes that solve the problems presented in my three design opportunities-
Wireframe 1: A new style guide — The first wireframe addresses the U/I and implements a new style guide which underpins the design of the whole site, no matter which screen a user is interacting with.
The first step was to update the brand identity. The existing website used old branding elements like outdated colours and typography. It was key the new styling reflected the aesthetics of the church, and inspiration was taken from the existing website to ensure the change wasn’t too radical that it would disorientate existing users.
The colour scheme was chosen to present a familiar experience to most internet users. The colour blue has become synonymous for hyperlinks, and users have become accustomed to minimal design that utilises white and grey for clarity. For instance, the paragraph text is now generating a contrast ratio of 17.3:1 instead of 6.91:1.
Side note — The colour styling was also heavily influenced by the 2013 award-winning gov.uk website, which highlights a user-centred approach through the moto “simpler, clearer, faster”.
I also wanted to simplify the typography by keeping the number of different font weights and sizes constrained for both ease of usability and readability. In the end, I went with two typefaces, utilising two font weights and five type sizes.
Wireframe 2: A way to present information to the user — The second wireframe focuses on the U/X design and incorporates a viewing pattern to enable the design to present the content more cohesively. The “Layer-Cake” pattern consists of highlighting the page’s headings and subheadings, making it the most effective way in which users can scan pages.
To accomplish this, text chunking will break the content down into paragraphs which can be managed into more specific sections. The images are positioned within each paragraph to ensure the photo is contained under the appropriate heading, even when resized. On larger screens, alternating the images from left to right alignment helps to keep the page balanced.
I also found that an effective way of highlighting the sections is to utilise accordions which serve two purposes: they visually increase whitespace between the elements making headings stand out more and they enable more content that the user specifically needs to be visible on all screen sizes.
Wireframe 3: Guiding the user’s journey — Finally, the third wireframe refines both the U/I and U/X design of the Home page to help understand how user journeys can be optimised throughout the site. The Home page is the natural option for users as the gateway to the rest of the site, as they do not always know what to search for or they may be interested in discovering new options. However, when users open the existing site, they are introduced to an interface that has no interaction system to guide them.
The problem with the current architecture is that if users want search for something they are restricted by the lack of components available to them, as the existing Home page only consists of text with embedded links within the paragraphs. Take for example that a new user is trying to find the regular service times. A quick scan of the main navigation reveals there is no direct link to the page so the next step is to scan the main body of text. Again, the wording ‘service times’ is nowhere to be found so the user has to resort to reading the whole text to ascertain which link will hopefully take them to the correct page. If the link isn’t correct, they have to go back to the Home page to restart the process. Unfortunately, this experience is slow and frustrating and will result in a high bounce rate.
To address this issue, I created four call-to-action elements based off user search analytics and other church websites: Service Times, Visit Us, About Us, Contact Us. Highlighting these links at the top of the page reduces the number of ‘perceived options’ for the user to choose from, allowing them to quickly accomplish their goal or allowing them to be easily introduced to other areas of the site. Showcasing these links at the top of the page reduces the number of perceived options for the user to choose from to only four choices, allowing them to quickly accomplish their goal.
If the user is looking for something else, this approach is translated into the rest of the content on the Home page by using cards. Key pages are highlighted in headings that encourage users to explore the site without overloading them with information they may not necessarily need. Reducing the amount of text also makes viewing the page more comfortable and legible on smaller screens.
2 — The Navigation
Now I have a better understanding on how users would operate the site, I am able to examine the structure of the website with a clear understanding of user’s end goals.
A clear issue with the current website is that the structure doesn’t lend itself well to the user interface. The subpages are only visible once the user has accessed the parent page as they do not show on the main navigation bar. Once accessed, the subpages aren’t visually linked to the parent page due to the position of the sidebar on the right side of the page. The links appear as further reading due to the non-specific ‘Explore More’ subheading which is misleading as they do contain specific information that the user might need that isn’t laid out on the parent page.
My initial solution was to implement a drop-down menu to group all of the pages together. I realised however that whilst this solved the aesthetic issue of visibility of the site’s navigation it revealed an issue with the relationship between the pages. A lot of the pages duplicated the same content and a lack of distinction between the headings meant that a lot of the sub-pages could be grouped under the same heading. I found this to created too many options and levels for the user to navigate causing a lack of clarity and direction.
To solve this, I realigned the content to fit into a strict hierarchical model. I reduced the number of pages with sub-categories from seven to four and defined more distinct, recognisable headings for each category. I also created a more generic New to All Saints’ category to make content more discoverable for new users.
3 — The Backend
The need for a CMS — From the outset, it was recognised that the website is an essential tool for communication with users and was needed to be kept up-to-date. Yet, in the current code-only format, the demands for content creation, publication and maintenance became unmanageable. In this case, I found WordPress to be a flexible and adaptive solution that provided an easy-to-use system that would be accessible to non-technical users.
- Using the WordPress extension Advanced Custom Fields, I was able to create a modular design that provides components with standard interfaces that can be rearranged, customised and reused site-wide, enabling users to easily change or fit singular elements without changing the entire design.
- Page templates allow users to focus on the content and not worry about the design as they can follow consistent page designs that determine the components available.
- By utilising a CMS, users can draft adjustments which can be immediately previewed without disturbing the live site.
- As the church is a charity, many different volunteers are involved and multiple user profiles with differing levels of capabilities enable roles to be distributed and transitioned smoothly.
- Consolidating the site structure into one application allows a clear view of all content, menus and understanding of the website layout.
Recap and Final Thoughts
The initial cause of the problem isn’t the real problem — When I first started the project, my attitude was simply that the site needed redesigning. Whilst I was correct, I quickly found that this approach wasn’t constructive as it was too generic. I therefore started to find specific issues and break them down by constantly asking ‘Why?’ to explore cause-and-effect relationships underlying the particular problem. I soon found that a lot of issues had similar root causes and one solution could solve many problems, which I ended up narrowing down to my design opportunities.
Good design starts with good planning — Going off the first point, it’s tempting to get carried away in the design. When you are presented with the opportunity to put your mark on something it is easy to forget why you are doing it in the first place. I put pen to paper and wrote down thoughts and ideas and questioned my decision making before designing. It was something I hadn’t done before, however I found it more productive to make decisions this way rather than spending hours perfecting and redesigning elements which may not actually resolve the issues I was facing.
Know the user — Assumptions are incredibly hard to avoid and I was guilty at the beginning of making decisions based off my own experiences. Even though my experience is valuable, it was very important to listen to external sources, be that researching other church websites or listening to other users or the client. All of these references together provided me better clarity for understanding how and why to choose my redesign approaches.
Less is more — Finally, it was important to give myself freedom in the project. The redesign that was needed was not just a cosmetic update but a substantial reassessment of the site in its entirety. Once I recognised that I can remove elements without losing original identity or substance, I was able to more effectively streamline everything. It is always important to remember- and to reiterate to the customer- that quality is more important than quantity.
Acknowledgements
Brian Lin’s DoorDash redesign case study — from which I based this structure on.
Jessica Ko’s Dribbble workshop — which gave me the confidence to start this case study (and pointed me in Brian Lin’s direction!)
