High Court

Understanding the Challenge 🧐

The High Court's website design presented a unique set of challenges that required a nuanced and careful approach. The website had not been updated in 15 years, and any proposed changes were met with understandable caution from the client. As a highly respected institution, the High Court had a strong attachment to its traditional identity, making them wary of anything that could disrupt the gravitas and authority of their online presence.

Balancing Tradition with Modernisation: The primary challenge was to modernise the website while maintaining and respecting the institution's history and reputation.‍

Strict Confidentiality Requirements: Given the sensitive nature of the project, all design work had to adhere to strict confidentiality guidelines. This meant that no references, logos, or images associated with the High Court could be included in the mockups below.

Solution 🎯

Redesigned main navigation bar with clearly defined buttons

Implemented dropdown menus for expanded subcategories

Added breadcrumb trails for easy navigation and context

Colour Palette and Aesthetic Consistency

UX Research 🔎

Cofluence provided an initial project brief the High Court's requirements were explained. The brief highlighted the following key requirements:

Modernisation with Restraint: Any updates to the design had to be subtle, preserving the traditional aesthetic that reflects the High Court's stature.

Navigation Set up: The website needed a more intuitive navigation system to improve user experience.

Content Hierarchy: The varying levels of information on the website required a clear content hierarchy.

Design Solution💡

Redesigned main navigation bar with clearly defined buttons

The website's navigation was designed to improve user experience without overwhelming the traditional design. The main navigation bar featured clearly defined buttons, with dropdown menus that expanded to reveal subcategories. This structure allowed users to easily find the information they needed while maintaining a clean and organised layout.

‍

Implemented dropdown menus for expanded subcategories

Dropdown menus were designed to offer clear categorisation of content, enabling users to easily access various sections of the website. Each dropdown was organised by relevant topics and subcategories, reflecting the site's overall content hierarchy.

‍

Added breadcrumb trails for easy navigation and context

The information on the website was organised into a clear hierarchy, signifying the importance of content through visual cues. Larger images were used on higher-level pages to draw attention to critical information, while smaller images and text were used for less critical content.

This approach ensured that users could quickly grasp the significance of the content on each page, improving overall usability. Moreover, the breadcrumbs provided feedback to the users on the pages navigated up until that moment.

‍

Colour Palette and Aesthetic Consistency

The colour scheme was derived from the primary colours found in the High Court building, both inside and outside. These colours were applied consistently across the website to create a cohesive and respectful visual identity that resonated with the institution's traditional values.

The use of these colours not only reinforced the connection to the High Court's physical space but also added a sense of continuity between the old and new designs.

CivicTheme UI Kit Integration

The "CivicTheme" UI kit provided by Cofluence was a solid foundation for the design, ensuring consistency and accessibility. I customised the elements from the kit to align with the High Court’s traditional aesthetic, added content provided by Cofluence and modified fonts.

‍

The final design solution not only met the High Court's cautious approach to change but also provided a modern, user-friendly experience that preserved the institution's identity. The mockups were developer-ready, with all design elements clearly specified, ensuring a smooth transition to the implementation phase.

Key Learnings ✍️

Navigating Client Conservatism: Designing for a client with a strong attachment to tradition, such as the High Court, required a deep understanding of their values and cautious approach to change. This experience reinforced the importance of balancing innovation with respect for established norms.

Effective Collaboration: Working closely with Cofluence highlighted the importance of clear and consistent communication, especially in a project with high confidentiality. Regular Zoom calls and well-organized revision notes shared via Dropbox were crucial in maintaining alignment and ensuring that the design met Cofluence’s and their client expectations.

Developer-Ready Design: Ensuring that the mockups were ready for developers emphasised the importance of creating designs that are not only visually appealing but also practical for implementation. This involved careful documentation of all components, making the handover process smooth and efficient.

What the client says 💭

Clara developed a suite of website mockups for Cofluence to our brief for a high profile client. She was extremely collaborative, courteous and professional even when we were being a little demanding with changes! It was a complex brief but she delivered an excellent result and our client is impressed. Due to delays at our end I t took much longer than the initial agreement but Clara was patient and proactively helpful. I recommend her without reservation.