Ben Harvey
Middlesex University
Higher Education Web development project
The Project
The aim was to Redesign Middlesex University's website to make it more user-friendly and have a modern design approach.
My task was to redesign their website and make it more user-friendly with a modern design approach. Additionally, the IT/systems team is updating technology, including the procurement of a Centralised Research Information System (CRIS) and progressing CyberEssentials as a priority. This project was managed using an agile methodology with two-week sprints, fostering a highly adaptive and collaborative environment.
Services
UX Research
UX Design
Rebranding
Production tools
Figma
Hotjar
Google Analytics
Optimal Workshop
Lead Time
9 Months Contract
3 Months Research
6 Months Design
Research
Stakeholders gathering
Usability study
Heuristic evaluation
Card sorting
Outcomes
Accessibility features
28% engagement increase
WCAG Brand guidelines
​
Design
Design Architecture
Branding alignment
LO-FI artifacts
Figma prototypes
Process
Role
My process began with comprehensive user research, including surveys, interviews, and focus groups with key stakeholders such as students, faculty, and prospective applicants. This research provided valuable insights into user needs and pain points, which informed the ideation phase. During ideation, we developed initial wireframes and low-fidelity prototypes, prioritising intuitive navigation and a clean, modern aesthetic. These prototypes were created in Figma and underwent several design iterations, each refined based on feedback from usability testing sessions. Testing was conducted with diverse user groups to ensure the design was accessible, engaging, and effective in meeting user goals. A variation of moderated and unmoderated testing was done throughout the design phase. The iterative process of design and testing ensured that the final product was both visually appealing and highly functional, resulting in a website that significantly enhanced user experience and satisfaction.
Senior User Experience Designer, I led the entire UX design process for the Middlesex University website redesign, from conducting extensive user research to developing and iterating on wireframes and prototypes in Figma.
​
Stakeholder focus groups
I arranged multiple focus group sessions with stakeholders, such as staff, lecturers, the digital team and the development team to discuss the following points:​
-
Identifying target users i.e. demographics, and age range?
-
What do you not like about the existing page?
-
What do you like about the existing page?
-
What do you want to get out of this redesign?
​
Student Interview
I ran 1-2-1 sessions and group workshops to interview over 100 undergraduates, sixth-form students and postgraduates these were the main outcomes:
-
80% of website users are primarily 17-year-olds
-
International students struggle to navigate the existing websites
-
The majority of users have English as their 2nd language
-
Undergraduate students want to view course fees, modules and entry grades
-
Postgraduate students want to view staff, modules, employability factors
-
65% of users will be on mobile phones.
User Research
Hotjar Usability Research
From Hotjar heatmaps, videos and face-to-face analysis of how the users some key factors to implement when creating the website were:
-
The attention span of 17-22 year olds is 7 seconds for each page on average
-
Images, pictures, and videos are 40% more impactful than text
-
The translation option on the page is vital.
-
The User journeys for each department are very different from Computer Science students to Arts.
​
Google Analytics
​Results from Google Analytics research and improvement areas:
-
High Bounce Rates (40%):
Simplify page content and improve relevancy to retain users. -
Low Conversion Rates (2%):
Streamline application forms and enhance CTAs for better conversion. -
Mobile Traffic (60%):
Ensure the site is fully optimised for mobile with fast load times. -
Page Load Times (5 seconds on average):
Optimise images and minimise JavaScript to reduce load times. -
Popular Pages:
Enhance navigation on frequently visited pages to improve user flow. -
User Flow Drop-off Points:
Analyse and address drop-offs to refine the user journey and retain engagement. -
Accessibility Compliance:
Implement WCAG guidelines to ensure full accessibility across the site.
​
Surveys
Based on the SurveyMonkey results about Middlesex University's website usage by students, here are the key findings:
-
Ease of Navigation:
12% of students found the website easy to navigate. -
Information Access:
58% could quickly find needed information, aided by the dropdown filter. -
Engagement:
The "Book an Open Day" button was used by 3% of respondents. -
Content Clarity:
63% appreciated the improved text hierarchy. -
Visual Appeal and Accessibility:
8% found the website visually appealing and user-friendly, praising the use of images and accessibility features.
​
Research Artefacts
​To complete the Research Artefacts this was done closely with the student ambassadors, marketing department and head of student services. The following
-
User Personas:
Developed personas such as Prospective Undergraduate Students, International Postgraduate Students, and Current Students to understand their objectives and pain points. -
User Journey Maps:
Mapped out the steps each persona takes from awareness to post-decision stages, highlighting touchpoints and pain points at each stage. -
Site Map:
Created a detailed layout of the website structure to plan navigation and ensure all necessary information is easily accessible. -
Co-Research Workshop:
Using Mural and Figjam for design artefacts I ran 5 research workshops with a variety of stakeholders. Artefacts from this were bespoke wireframes for the website. -
Experience Maps:
Broader representations of users’ interactions with Middlesex University Website data from Google Analytics and Hotjar. -
Analytics Reports:
Data-driven insights from Hotjar, Google analytics and surveys. Showing how users interact with the website
User Journeys
User Flow
Experience Map
User Personas
Research Workshop
Analytic Reports
​
​These were the main outcomes of user research:
Mobile browsing experience
-
Initiation: The user accesses the Middlesex University website on mobile.
-
Responsive Design: Optimised layout for mobile screens.
-
Exploration: Navigate to the "Degrees" section via the mobile menu.
-
Browsing: Views concise degree listings, and filter options.
-
Engagement: Reads detailed program info, and testimonials.
-
Action: Prompted to request more info or apply.
Transition to Desktop
-
Continued Exploration: The user switches to the desktop for deeper research.
-
Seamless Transition: Experience remains consistent.
-
Enhanced Features: A larger screen allows for more detailed exploration.
-
Deeper Engagement: Explores multimedia content, and compares options.
-
Actionable Steps: Ready to schedule a visit or start the application process
Key Findings
Ideation
Affinity Diagram
I conducted a series of affinity diagram workshops with key stakeholders, including students, faculty, administrative staff, and external partners, to refine our understanding of user needs and prioritise design elements. Using Miro, participants engaged in collaborative brainstorming sessions to organise data from initial user research, identify key themes, and prioritise features based on their importance and impact. This iterative process ensured continuous feedback and refinement, fostering a sense of ownership and alignment among all stakeholders. The result was a cohesive, user-friendly design that effectively addressed the diverse requirements of the MDX website’s users.
​
​
LO-FI Wireframes
​
Using Balsamiq for some basic wireframing allows a good visual representation of layout and structure. This includes the placement of key elements such as headers, navigation menus, content sections, and footers. It provides a clear outline of the spatial arrangement and hierarchy of these elements.
Information Architect
I created and tested the information architect on Treejack and card shorting optimal workshop to analyse the user journey on a website and where our test subject would expect to find a specific webpage in an analysis.
​
Working alongside the content editors and website digital editor. We were able to construct a suitable and user-friendly journey for site visitors.
​
Co-Design Workshops
​
I led a series of collaborative meetings with key stakeholders, including students, faculty, administrative staff, and external partners. Using Mural, an online visual collaboration tool, participants engage in brainstorming sessions, share insights, and create user-centred design solutions. These workshops focus on identifying user needs, pain points, and preferences, ensuring that the redesigned website effectively addresses the diverse requirements of its users. The iterative process allows for continuous feedback and refinement, fostering a sense of ownership and alignment among all stakeholders towards a cohesive and user-friendly website.
Moderated Usability Testing
My role was to identify usability issues, gauge user satisfaction, and validate the overall user experience. Key user personas, including prospective students, current students, faculty, and alumni, were defined to ensure comprehensive coverage of user needs. I was the lead designer for this test. Using the artefacts of the LO-FI Wireframes I was able to do a series of tests. During these sessions, participants are asked to complete specific tasks while I observe their behaviour, ask questions, and provide assistance if needed
Methodology
-
Participant Recruitment: Participants were selected based on the predefined user personas. Recruitment was done through university mailing lists, social media channels, and on-campus posters. Incentives, such as gift cards and campus merchandise, were offered to encourage participation.
-
Test Scenarios: Realistic tasks were designed to reflect common user goals, such as finding course information, accessing library resources, and checking application statuses. Each scenario was crafted to assess specific aspects of usability, including navigation, information retrieval, and task completion efficiency.
-
Testing Environment: The tests were conducted in a controlled environment, both in-person and remotely, to ensure consistent conditions. Remote sessions were facilitated using screen sharing and recording software, allowing for thorough analysis.
-
Moderated tests: This direct interaction allows for immediate clarification of user feedback, identification of pain points, and gathering of qualitative data.
Execution and Findings
During the testing phase, participants were asked to complete the predefined tasks while thinking aloud. This provided valuable insights into their thought processes and highlighted areas of friction. Key findings included:
-
Navigation Issues: Some users struggled with the main navigation menu, finding it unintuitive and cluttered. This led to a redesign of the menu to simplify access to key sections.
-
Content Accessibility: Information on certain pages was too dense, causing difficulty in locating specific details. As a result, content was reorganised and broken into more digestible sections.
-
Mobile Usability: Testing revealed that some interactive elements were not optimised for mobile devices. Enhancements were made to ensure a responsive design that provided a seamless experience across all devices.
Outcomes and Improvements
The insights gained from usability testing were instrumental in refining the website.
Key improvements included a more streamlined navigation structure, clearer content hierarchy, and enhanced mobile responsiveness. Post-testing feedback indicated an increase in user satisfaction and ease of use.
Design
Ideation and Prototyping
My role in the ideation and prototyping phase was pivotal. Using Figma, I meticulously crafted initial wireframes and high-fidelity prototypes that formed the blueprint for the site's new structure and visual style. The emphasis was on creating an intuitive and aesthetically pleasing design that aligned closely with user expectations and feedback gathered from stakeholders such as students, faculty, and prospective applicants.
​
Usability Testing
I took charge of leading multiple rounds of usability testing for the MDX website redesign, involving diverse user groups. This comprehensive approach encompassed both moderated and unmoderated sessions. In moderated sessions, I guided participants through tasks, offering real-time observations and insights into user behaviour and pain points. This facilitated deeper understanding and allowed for immediate adjustments to enhance usability and user experience. Unmoderated testing provided additional insights into user interactions and preferences in a more natural setting, ensuring a well-rounded understanding of usability issues.
​
Iteration
Throughout the iterative design process, my role as lead UX designer involved synthesising feedback from usability testing to refine and improve the prototypes. Each iteration of the design was meticulously updated based on user insights and feedback, focusing on enhancing usability, improving navigation, and refining visual elements. This iterative approach ensured that each version of the MDX website design was progressively more polished, user-friendly, and aligned with the needs of its diverse user base, including students, faculty, and prospective applicants.
The prototypes underwent several iterations, each refined based on feedback from usability testing sessions. Testing included a mix of moderated and unmoderated sessions to gather a broad spectrum of user feedback. This iterative process ensured that the final design was both visually appealing and highly functional.
Unmoderated User Acceptance Testing
​
In order to gather comprehensive feedback on the high-fidelity design of the Middlesex University (MDX) website, unmoderated testing was conducted with students and stakeholders. The process involved distributing the prototype link through email invitations, Google Forms and university communication channels, inviting participants to interact with the website independently at their convenience. Participants were briefed on specific tasks to complete and encouraged to provide feedback through open-ended questions and structured surveys embedded within the prototype.
During the unmoderated testing phase, participants were asked to navigate through various sections of the website, such as course information, admissions procedures, and student services. They were prompted to perform tasks like finding specific course details, registering for an event, and exploring campus resources.
These results were then recorded in Google Forms to upload their recording and fill out a few questions about the test.
​
​
​
​
Outcomes of Unmoderated Testing
The unmoderated testing yielded valuable insights and feedback that guided further refinement of the MDX website's high-fidelity design. Key outcomes included:
-
Navigation and User Flow: Participants found the navigation intuitive and were able to locate essential information such as course details and admission procedures effectively.
-
Visual Design: Feedback on the visual design elements, such as colour scheme and typography, highlighted positive responses to the modern and professional appearance of the website.
-
Content Accessibility: Participants appreciated the clarity and accessibility of content, suggesting minor adjustments to enhance readability and hierarchy.
-
Functionalities: Issues identified with interactive elements, such as form submissions and interactive maps, were addressed to improve usability and functionality.
Iterative Improvements
Based on the insights gained from unmoderated testing, iterative improvements were implemented to refine the MDX website's high-fidelity design. These improvements focused on:
-
User Interface Refinements: Adjustments were made to visual elements and layout based on feedback to ensure a cohesive and visually appealing user interface.
-
Content Optimisation: Content was revised and restructured to enhance clarity and relevance, improving the overall user experience.
-
Technical Enhancements: Functionalities and interactive elements were fine-tuned to address usability issues and ensure smooth user interactions.
Outcome
​
Before and After
​
Before
The previous design of the Middlesex University website had several limitations that hindered user experience:
-
Cluttered Navigation: The main menu was overly complex, making it difficult for users to find the information they needed quickly. Important links were buried within submenus, leading to a confusing navigation experience.
-
Overwhelming Filters: Filters for searching programmes and other content were extensive and displayed prominently, cluttering the interface and overwhelming users.
-
Lack of Engaging Calls-to-Action: There were few clear calls-to-action, making it difficult for users to engage with the university through key actions such as booking campus visits or contacting admissions.
-
Inconsistent Text Hierarchy: Text sizes and styles were inconsistent, leading to a lack of visual hierarchy and making it challenging for users to scan and digest content efficiently.
-
Sparse Use of Imagery and Negative Space: The design had limited use of images and negative space, resulting in a dense, text-heavy interface that was visually unappealing and hard to navigate.
​
After
The new design made several strategic changes to address these issues, focusing on simplicity, clarity, and engagement:
-
Hidden Menu Bar: A hidden menu bar, appearing as a hamburger icon, reduces visual clutter and offers a cleaner look.
-
Dropdown Filter for Countries: Filters for country-specific information are now in a single dropdown menu.
-
Prominent "Book an Open Day" Button: A highly visible "Book an Open Day" button boosts engagement.
-
Improved Text Hierarchy: Enhanced bold text and a clear text hierarchy make scanning content easier. Headings, subheadings, and body text are clearly differentiated.
-
Enhanced Use of Images and Negative Space: More images and increased negative space make the site visually appealing and guide users to key areas. Images highlight important content, creating an engaging experience.
-
Visual Consistency and Modern Aesthetics: The design uses a consistent visual language with modern aesthetics. The colour palette, typography, and iconography are standardised, aligning with the university's brand.
-
Improved Accessibility: Accessibility features include alt text for images, keyboard navigation support, and colour contrast adjustments to meet standards.
Results
The redesign of the Middlesex University website has significantly improved user engagement, satisfaction, and overall performance. The introduction of a streamlined navigation system, clear calls-to-action, enhanced accessibility features, and a modern aesthetic led to increased visits, higher conversion rates, and reduced bounce rates. Faster load times and a fully responsive design have boosted mobile traffic and user satisfaction, while the reduction in technical errors has enhanced reliability. Positive user feedback, higher application rates, and improved internal efficiency reflect the success of the user-centred approach. Advanced analytics and ongoing user testing ensure continuous improvement, cementing the redesign as a pivotal enhancement for the university’s digital presence.
Take a look: https://www.mdx.ac.uk/
Handover
Once all the User Acceptance Testing (UAT) and design iterations were completed in Figma, the comprehensive design files, including all necessary specifications, prototypes, and user feedback insights, were handed over to the development team. This transition marked the beginning of the implementation phase, where developers meticulously translated the visual and functional elements into a fully operational website, ensuring that the final product remained true to the user-centred design principles and met all outlined requirements.
Impact and User Feedback
​
The new design has significantly improved the user experience, as evidenced by user feedback and engagement metrics:
-
Increased User Engagement: The prominent calls to action, such as the "Book an Open Day" button, have led to a measurable increase in user interactions. More prospective students are booking visits and contacting the university by 60%, driving higher engagement and potential enrolments.
-
Enhanced Usability: Users have reported finding the website easier to navigate, with the streamlined menu and simplified filters contributing to a more intuitive experience.
-
Positive Aesthetic Reception: The modern, clean design has received positive feedback for its visual appeal. Users appreciate the balanced use of images and negative space, which makes the site more inviting and easier to navigate.
-
An increase in international students using the website with ease. This has resulted in an increase in applications from Africa and China by 90%
-
Higher Satisfaction Rates: Overall satisfaction rates have improved by 42%, with users noting the clear text hierarchy and improved accessibility features as significant enhancements.
​
Challenges and Hurdles
​
Alignment with Brand Identity
Ensuring that the redesigned website aligns with Middlesex University's brand identity and values while still incorporating modern design trends and best practices.
​
​
Accessibility Compliance
Ensuring that the redesigned website complies with accessibility standards and guidelines, making it inclusive and usable for all individuals, including those with disabilities.
​
Budget and Resource Constraints
The project is still underway through development due to budgetary constraints and allocating resources effectively to ensure the successful redesign and implementation of the website. The priority of the website changed and the budget allocated to the Website development turned to managing the migration of existing website data and content to the new platform, ensuring data integrity, accuracy, and consistency before the transition process.
​
​
​
