top of page
MyLogo_edited_edited_edited_edited_edite

university of birmingham

full ux/ui re-design job

I was hired to work for the University of Birmingham to help them deliver a project that included meeting accessibility guidelines for their student enrolment back end pages. I was hired to ensure that the new pages complied with the new WCAG 2.2 guidelines. Additionally, I addressed user pain points by improving the overall design.

ProblemNot accessible and not functional on smaller screens with a bad UI & UX

My Role | UX Designer

Solution | WCAG 2.2 compliant with improved User Interface & User Experience

User Centered Design

Accesible Design

Authentication UX

UX Research

Usability Testing

End to End UXD

Iphone.png

My Role

Lead UX Designer

Timeline

Tools

Figma - Miro

Oct 2024 - Mar 2025

skip to section

1 - Discovery

discovery

Project background: The University required someone who was able to implement a full UX/UI redesign for their student sign on pages for new students to be implemented for September 2027/28 terms. Before being hired I had to quickly display a small prototype using FIGMA and show how exactly I would be able to provide them with a high fidelity prototype to be able to then proceed with the handover to the technical team who would then implement it. 

The problem: The re-design was essential for the University as WCAG 2.2 was implemented by the UK government which meant that every website for a public company had to be compliant with the new WCAG 2.2 rules and regulations. As the website was older it did not meet any of the WCAG 2.2 requirements. It was then my job to ensure that the new re-design met all the specific WCAG 2.2 requirements.

My Role: As lead UX Designer I was tasked to work alongside stakeholders and Business Analysts and Software Developers throughout the entire design process to ensure for a final complete design. 

2 - User Research

User research

Understanding user needs and evaluating pain points

The goal of conducting user research was to understand the experience that students had with the existing sign on process and to uncover accessibility and usability issues that the students may have.

Research Methods:

User Interviews

User interviews were conducted with student volunteers to gain an insight of the pain points

Surveys

A student survey was conducted on the use of the website before and was also conducted after the hi-fi redesign.

Usability testing

The students tested out a mock-up of the first page to gain an idea of usability before finishing the whole end to end prototype

After having gathered useful user feedback and results from the user research it was time to start working on the high-fidelity prototype and to ensure the new design solves the previous pain points which included mobile and tablet zoom issues, whilst ensuring the main WCAG 2.2 Accessibility guidelines were met.

3 - Information Architecture

Information architecture

Simplifying the student UX whilst sticking with WCAG 2.2 guidelines

This IA graph was designed to help understand the User Journey that the new students have to take for the Online Registration process.

Forgot password

Sign on page

Need help

Yes

No

Sign in

Contact support

Send link to email

1.Personal details

2.Disability details

3. Contact Info

4.Address details

5.Emergency details

6.Programme

7.Higher Education

8.Dubai campus

9.Career questions

10.Photo Upload

11.Finance questions

12.Electoral Reg

13.Authorisation 

contacts

14.Declaration & Registration

4 - Design & Prototyping

Design & prototyping

Using Figma to create the Low- Fidelity & High-Fidelity prototypes

The goal of conducting user research was to understand the experience that students had with the existing sign on process and to uncover accessibility and usability issues that the students may have. Below are the three stages of prototyping from the sketch phase to the lo-fi phase all the way to the final high fidelity Figma design.

Stage 1: Hand-drawn lo-fi prototype

Stage 2: Lo-fi prototype

Stage 3: Hi-fi Figma design

2FF48CC8-490F-4681-B4F2-C54CCBD2FFDA_1_102_a.jpeg
image (2).png
Screenshot 2026-01-13 at 15.04.54.png
5 - Testing & Iteration

Stage 1: The first phase of the designing requires a quick sketch mockup of the potential online registration screen.

Stage 2: The second phase is a low fidelity mockup design on Figma which was created alongside stakeholders before continuing further.

Stage 3: The third and final stage was the final Figma prototype which is to be implemented for the 2026/27 terms.

Testing & iteration

Focus on validating the redesigned student sign on process Identifying issues and refining them based on user and stakeholder feedback 

The goal of conducting user research was to understand the experience that students had with the existing sign on process and to uncover accessibility and usability issues that the students may have. This phase was of importance to help gain an understanding of the final pain points and was also run through specific browsers to ensure the WCAG 2.2 requirements were met. The prototype was then displayed before the board and stakeholders to ensure that everyone was pleased with the new re-design and was then to be handed over to the development team.

6 - Final Delivery

Final delivery handover

Final delivery presented to stakeholders / handover to coding team 

The delivery and handover was conducted via PDF files in which I exported the documents so that the stakeholders who are not familiar with Figma are able to view the new re-design. I also created a word document with all the images of the seperate pages of the prototype with text below each screen including pixel sizes and widths, and the specific WCAG 2.2 compliant colour scheme, to ensure that the developers matched the new re-design perfectly. 

previous Desktop screens

Screenshot 2026-01-13 223258_edited_edit
Screenshot 2026-01-13 223306_edited_edit

desktop re-design

Screenshot 2026-01-14 at 10.22_edited.jp

Previous mobile screens

thumbnail_1768424310230blob_edited.jpg
thumbnail_1768424281975blob_edited.jpg

As you are able to see via the screenshots the student online enrolment pages did not have a mobile version.

Re-designed mobile screens

Screenshot 2026-01-15 at 10.02_edited.jp

© 2026 JULIAN D

MyLogo_edited_edited_edited_edited_edite

UX/UI DESIGNER

JD Logo.png

© 2025 Julian

bottom of page