GOV.UK— a UX/UI Case Study

A redesign of ‘homepage’ and ‘How Government Works’ section of gov.uk

Nikki Iyayi
6 min readJun 15, 2020

--

A good proportion of the UK public do not vote in political elections or are politically engaged. Many people feel disconnected due to a lack of knowledge or scepticism— they either don’t know what policies affect them, they don’t know how to interpret or trust the information from the government. Media outlets play a key role in providing governmental updates and political information, however, it is impossible to ignore the biased, divisive and provocative narratives sometimes perpetuated by such an integral part of society, which ultimately influences policymaking.

With ongoing policy changes in the UK due to Brexit and COVID-19, it is critical that individuals take personal accountability to make fact-based decisions when participating in politics — as this does, in fact, affect us all. Recent developments in the past few weeks regarding the events in Parliament Square, Bristol and other peaceful protests around the UK — ignited by the murder of George Floyd at the hands of the police — reveals that when the people take action (in this case, protesting and speaking with their local MPs), politicians make provisions for those who participate.

I wanted to find out how the ‘How Government Works’ section of the gov.uk site, which provides factual information about the government, could be used more effectively to tackle one of the barriers to political participation: engagement. A recent report from the House of Commons shows that the importance of political participation is valued highest in groups aged 18–24 and 25–34, however, the 18–24-year-olds were least likely to have engaged in political activities.

Challenge: factual governmental information is readily available but is not easy to consume, engaging or accessible.

The current layout of the ‘How Government Works’ section of gov.uk

Design Process

I am a big fan of simplifying things and I found the UX design process on Think with Google easiest to refer back to during this process. I wanted to focus on how to make politics look sexy and appealing (law of aesthetic usability)— kind of like Netflix or any application that we just can’t get enough of meets gov.uk.

https://www.thinkwithgoogle.com/marketing-resources/experience-design/strong-audience-design/

1. Take action

In this section, I did some research on other government sites to find out how other countries organise information on their websites.

I spent some time the gov.uk website and the governmental websites for the US, France, Bahrain, South Africa and Brazil. I attempted to find the ‘How Government Works’ equivalent on all websites and found it easiest to locate this information on the French Government website. This was because the ‘How Government Works’ link has a greater hierarchy compared to the UK government page as it is located on the main navigation bar on the homepage — compared to the UK government page where it is at the bottom of the page in a very small greyed- font.

UK government homepage (left), French government homepage (right)

2. Get emotional

Next on this journey, I wanted to hear how people felt about the information they currently receive about the government and politics. I carried out a survey, phone interviews and used this information to create a persona and mini affinity map.

I conducted phone interviews and also created a survey that was completed by 23 participants. The surveys and interviews were great tools for collating information quickly within a sample of my target group and gaining a further understanding of participants’ habits and preferences.

Key takeaways:

  • People are not participating due to a presumed lack of access to factual information
  • Most people consume political/government information from social media sources e.g. Twitter (most common)
  • People would prefer information that they can view on the go in the form of video/audio
A rough outline of questions asked and consequent results arranged into groups

The survey showed that 81% of participants are active voters, however, 72% of participants felt that they required a deeper understanding and access to political information in order to be more engaged. This showed that although the vast majority of participants voted, they also revealed that they felt they required a deeper understanding of government and politics. A considerable number of participants expressed a need for content to be displayed in video form as it is easier to access on the go.

This persona was used to capture insights of user research and maintain focus on what the end result might look like

3. Start sketching

I started off with a basic outline of what the information architecture of the homepage could look like based on the layout of the French government website. I then drew a wireframe sketch what the ‘homepage’ and ‘about government’ pages would look like on a desktop.

Skeleton of what the homepage for gov.uk could look like after incorporating elements of the French government website and insights from user research

Initial sketch

‘home’ and ‘about government’ wireframe sketches

I showed this sketch to a friend of mine who is a product designer and makes applications all the time, in order to get some feedback to comply with the UX rule of constant iteration! My feedback revealed I needed to think about the positioning of the navigation bar and a possible carousel option to view the next page to facilitate a user’s journey.

4. Test early

I really feel like the current gov.uk website is lacking aesthetic appeal — lack of images, typography, hierarchy, no ‘scroll to top’ at the bottom of the page to scroll immediately to the top.

I used the same colours used on the gov.uk website already. I thought it was better to use colours which have no political leanings to the current party in government.

Unfortunately, I was not able to make an animated prototype due to time constraints, however, I was able to complete a degree of user testing with images of the new homepage and ‘how government works’ page.

Revised ‘homepage’ and ‘how government work’ pages

Reflections

This was a difficult task to recreate as the call-to-action buttons on the current gov.uk homepage signifies that individuals may not always use the gov.uk website to gain more information about government and politics. There were numerous options for services such as benefits, tax, childcare, employment and so many more, but little attention on how government works.

Conclusion

  1. This is just a concept project and is my very first UX case study (only been studying for 5 weeks so far)
  2. I should have asked questions more precisely during my user research. On second thoughts, I believe my questions were too vague which resulted in me having to carry out another phone interview to gain further insights.
  3. Creating a high-fidelity prototype would have been really useful to understand user flow and how viable this concept could be
  4. I learnt the importance of information architecture and how to create surveys for user research
  5. If I had more time, I would test, test, then test again! This would ensure that this design would capture user needs on the website as a whole

If you got this far, you’re a star! Thanks for reading my first ever case study and I really want to hear what you think. All feedback is welcome!

--

--

Nikki Iyayi

Fascinated by social norms, human behaviour, habits, and patterns.