Every year hundreds of young people apply to the Catenian Bursary Fund, a registered charity based in the UK, for financial help (an 'Award'), to embark on overseas development projects such as building schools and teaching English, or to assist physically and mentally impaired Catholics in Lourdes, France.
In 2018 I built a web application for the client that digitally transformed the way the applications are submitted and evaluated. Fast-forward to 2023, and the client approached me to redesign the website with the aim of increasing user engagement.
I was accountable for the whole project - from the complete UX effort, UI, engaging with Stakeholders and calibrating expectations to coding a solution into the popular Bootstrap CSS framework - ready to hand off to a back end developer.
The solution is projected for implementation in June 2023.
This case study is a glimpse into how I approached the project.
UX/UIFigma, Figjam, Click up
Website buildHTML/SASS/CSS/Javascript
Taking an Agile approach, I managed the project using a the popular project management tool, Click-up, and conducted 45-minute show and tell sessions with the client at the end of 4 sprints. This allowed me to share progress updates, ensure that expectations were being met, identify any blockers, and gather feedback from stakeholders. It also presented the opportunity to uncover new insights and maintain a collaborative relationship with the client.
Understanding the problem
Defining the problems to solve
Developing solutions
Delivering the solutions
I began by uncovering what we already know about the users and the website. This would help to identify gaps in knowledge and help identify areas for exploration later in the research phase.
I analysed website data spanning from January 2022 to December 2022 to gain insights into user behaviour and identify content that could be prioritised or retired.
Using tools such as Wave, Lighthouse and GT Metrix helped to assess performance and accessibility of the website. I used NNG’s Usability Heuristics as a benchmark to gauge the usability of website features.
I asked six past applicants if they would be willing to participate in a 30-minute telephone conversation to discuss their pain points and user journey in more detail.
I recruited a seven university students at a popular local cafe to measure usability. I set three tasks, measuring success and time taken to complete them.
The insights uncovered during the dicovery phase led to some clear actionable recommendations. Here is a sample of some of the key insights:
58% of users starting the application form are doing so on desktop.
40% of users starting the application form are doing so on desktop.
2% of users starting the application form are doing so using tablets.
| User Interviews | Website Analytics | UX Audit |
|---|---|---|
| Users find the application form too long and overwhelming. | The most popular journey is Home to Lourdes Awards with a high drop off rate. | Page structure is inconsistent and difficult to read for visually impaired users. |
| Users are giving up after starting an application because of technical issues. | Individual Awards page has a high drop off rate, possibly due to a lack of information or buried call to action. | Font sizes are inconsistent. |
| It is unclear what happens when users submit the form. | Only 41% of users who start an application actually submit. | Priority content is buried at the bottom of the page. |
| There is no way to find out application progress. | 58% of users do so on larger screens. 40% apply from mobile devices. | Colour contrasting is inconsistent with WCAG. |
By testing the current solution with users at the local cafe, I was able to measure usability. This could be compared with a future solution, and may highlight some issues for improvement in the next sprint.
All users were able to successfully start an application for a Lourdes Award, however three of five users didn't understand what the Catenian Bursary Fund actually does. One participant thought it was a travel agent that arranges trips to Africa.
| 1 | 2 | 3 | 4 | 5 | |
|---|---|---|---|---|---|
| Understand the product or service | |||||
| Establish eligibility | |||||
| Start a Lourdes Award application |
By doing some Affinity Mapping I identified the key issues. Many of the technical problems with the website would be solved by upgrading to a newer version of Bootstrap. Page loading issues may be solved by using a CDN as a resource for Javascript and CSS files. The research validated the hypotheses I had when starting the project.
I developed three distinct user personas based on insights I gathered during Discovery. These personas served as a reference point during the development phase, allowing me to ensure that the needs of each user group were met.
I identified five key features to focus on - based on the insights revealed during discovery:
I approached designing the key features by first conducting Landscape Analysis that might provide some inspiration on solutions. Then, sketching on pen and paper, I created low fidelity prototypes to illustrate to the client how the solutions would work.
I asked six past applicants if they would be willing to participate in a 30-minute telephone conversation to discuss their pain points and user journey in more detail.
I reviewed the website's written content with the client to establish the right tone of voice, consistency with terminology and make sure the language was appropriate to both users who were not familiar with the Catenian Bursary Fund. This not only included the website copy, but also the forms and numerous email notifications that are sent out to applicants after submitting their applications.
I carried out Landscape Analysis to find some inspiration on how we could communicate the application process, eligibility requirements, and give users a heads up on the information they will need to hand when applying. The solution also needed to be technically feasible build using out-of-the-box Bootstrap components.
The Police (UK) website uses an accordion component effectively communicates the joining process. Users can see the full process and see more information by clicking on rows. One limitation of this is that multiple accordion items cannot be open simultaneously.
The site is built on Drupal, but Bootstrap has a similar components that would only need small customisations.
View the Figma prototype
One of the key applicant pain points was that they were unable to track the progress of applications once submitted, causing anxiety and stress. A number of emails are
I looked at a number of delivery service websites including the Royal Mail website which has a 'Track your item' feature. I hypothesised that incorporating a comparable function would provide applicants with confirmation of their application's present processing status, along with projected timelines for payment.
View the Figma prototype
Working with the stakeholders (the subject matter experts!) we stripped out questions that weren't actually being used to evaluate applications. For example, if the Bursary Fund doesn't evaluate based on specific purchases made by the applicant such as clothing, why ask them? I decided to make sure applicants were aware of eligibility requirements and give them a heads up on the information they would need, to reduce drop off rates.
View the Figma prototype
I went to the local Shaman Cafe in Battersea to test the three prototypes on seven university students that might act as proxy users.
I set three tasks - one for each prototype. I wanted to know if the accordion used for the 'How it works feature' was usable and whether the items should be expanded by default, and whether multiple items could be open at the same time.
Five out of the seven participants thought it would be annoying to have to manually close items free up space in the viewport.
In 2020 I created a style guide that would be used across print material (such as the Annual Report and Review), and the new website.
Keeping in mind simplicity for the development effort that I would begin in March, I designed the concepts for the pages based on the style guide. I wanted to keep the visually engaging colours along with large bold headings and copy.
Once I had designed the key features, I put them into a full low fidelity prototype to illustrate to the stakeholders how the website would function.
Given the scope of the work - research through to build, One of the key challenges was planning tasks and sprints. I used a project management tool Click up to make sure the tasks and sub tasks were documented. This would be useful for future projects and help align and calibrate client timeline expectations.
Recruitment was major challenge on a project this size and with little to no budget to work with. Conducting user testing in a cafe proved to be time consuming and a little impractical due to the ambient noise and lack of space.
Having received sign off from the client, I will start building the front end in late March 2023. The site will be integrated into the current CMS by a back end developer in May 2023.
