Project Background:
The client’s two member organizations currently rely on two separate websites to promote various programs, courses, and activities to the public. However, as time goes on, the variety of programs and offerings continues to expand, yet the current website designs have not kept pace with expectations regarding user experience and operational efficiency. Therefore, as part of the client’s digital transformation journey, website revamping is necessary to enhance the experience for users and improve customers relationship management.

Additionally, each website currently operates on its own technology stack and content management system (CMS), requiring editors to spend time in learning the operation processes of each system. Furthermore, each website requires independent resources such as servers and databases, significantly increasing both operational and maintenance costs.

Challenge:

1. Outdated Design: The existing website had an outdated design that didn’t reflect the institution’s modern and innovative approach to education.
2. Lack of Mobile Responsiveness: The website was not optimized for mobile devices, resulting in a poor user experience for mobile users.
3. Limited CMS Functionality: The existing CMS did not have an advanced What You See Is What You Get (WYSIWYG) editor, limiting the editors‘ ability to update content quickly and efficiently.
4. Content Reusability Challenge: The challenge of reusing shared content and functions, such as course lists, news, and events, between websites, poses significant hurdles. Content authors may find themselves needing to publish the same content on multiple sites, leading to duplication and potentially compromising data integrity. This duplication not only consumes valuable time and resources but also increases the risk of inconsistencies across platforms.
5. Inadequate Search Functionality: It is difficult for users to search for the relevant content they want in the old website, and the search speed is relatively slow, which cannot meet the needs and expectations of users to quickly obtain relevant information.
6. Non-Unified Technology Stack: Non-unified technology stack complicates cybersecurity governance, increasing the vulnerability of the websites, data centre and other IT infrastructure.
7. Content Translation: How to quickly convert Traditional Chinese content into Simplified Chinese content, improve content production speed and save human resources, is an important goal of the client in this website revamp project.
8. Lack of unified authority management and work process: The lack of unified authority management and work process leads to data confusion, low work efficiency, inability to track and monitor, and serious security risks.

Our Solution:
The challenges of this website reconstruction project cover various aspects such as website design, user experience, content management, process management and network security governance. Here’s how to tackle each challenge:

1. User friendly design: Intuitive navigation, clear calls to action, and visually appealing layout are designed to enhance the overall user experience. Incorporating elements such as professional training, modern digitalisation, and security to suit the institution’s modern and innovative educational methods.
2. Mobile Optimisation: Optimize your website for mobile devices to ensure a seamless user experience across different screen sizes and devices. Adopt responsive design principles and leverage mobile-friendly technology to meet the needs of a growing number of mobile users.
3. Simplified content management: Adobe Experience Manager (AEM) features a powerful What You See Is What You Get (WYSIWYG) editor that allows content editors to intuitively create and edit website content without the need for Write or understand HTML code. Editors can even easily make adjustments to typography, style, and layout and preview their changes in real time to quickly create professional-looking web content.
4. Reusable content: We took advantage of the reusable technical features of Adobe Experience Manager (AEM) content fragments to design more than a dozen content fragments for the website, such as news, events, and media reports. In this way, the content can be easily shared and reused in different pages, channels, and projects in the future, achieving data consistency, completeness, and repeatability, and improving the efficiency of content management.
5. Optimize the search function: In terms of design, we have redesigned the search interface for course content and page content to make filtering more intuitive, clear and faster. In terms of technology, we introduced the third-party search engine Swiftype to effectively improve search performance and accuracy with its powerful search algorithm and infrastructure.
6. Unified technology stack: Using Adobe Experience Manager (AEM) Cloud cloud solution, all customer websites will be implemented on AEM Cloud in the future. AEM Cloud provides a fully managed service that manages infrastructure, maintenance and updates, so customers don’t need to worry about the management and maintenance of hardware and software. AEM Cloud automatically scales based on traffic demand, ensuring the system always has adequate performance and availability. Adobe provides strict security controls and compliance guarantees, including data encryption, identity authentication, access control, etc., to ensure the security and privacy of user data.
7. Automatic translation: By integrating the Microsoft Azure AI Translator translation tool into AEM, you can quickly convert Traditional Chinese content to Simplified Chinese. Editors no longer need to spend time editing simplified pages, greatly simplifying the content production process.
8. Unified permission management and workflow: AEM provides flexible workflow management tools, and we create and customize workflows according to customers’ customized needs. AEM provides fine-grained permission control. We designed a sustainable department management structure based on the customer’s department structure and management needs, and divided user groups into reading groups, editing groups, and approval groups. In the future, the customer’s IT team will have the freedom and flexibility to add or subtract user groups and set permissions.

Before and After Comparison:
New UI/UX: Responsive design is compatible with all device sizes and has a sense of technology, professionalism and modernity.

New navigation: The information structure is clearer, the priorities are clearly defined, and the search function is highlighted.

New Search: Content is easier to find, filtering is simpler, and searches are faster.

New layout: Through component design, layout becomes more flexible and changeable, and the page becomes more colourful.

Result:
The website revamp project was very successful and received positive feedback from the internet users. The design of the website interface has been enriched to better appeal to the eye of users, catering to their browsing and navigating habits. The AEM Cloud platform also streamlines the content management process, enabling the website admin to update the course content and managing content more efficiently.