With eight campuses in different countries, ESSCA welcomes a huge amount of web traffic every day from its current students, faculty, and partners to millions of potentials stakeholders worldwide. Therefore, it is essential for the school to take great care of its website, from branding, copywriting, design to the content management system. The website has to properly convey ESSCA’s image while providing a seamless experience to users from different locations.
Over the years, the website had aged and naturally did not keep up with the latest the internet trends. One of the biggest changes that happened is how users access the internet since many now prefer browsing using their mobiles: ESSCA’s website was not fully mobile responsive, which was a disadvantage and did not convey a proper brand image.
The second challenge that ESSCA was facing was a disseminated content management system. At that moment, ESSCA had a lot of related websites, each of which covers a different topic. These websites were centralized under the same back-end system, but some features were different across the website, which took ESSCA lots of time and effort to manage such a huge amount of content.
According to the challenge that ESSCA was facing, the main objectives were determined for this project, including:
- Revamping the whole design, following the latest design trends, ensuring the mobile responsiveness as most of the audience is now primarily using mobile
- Unifying all related websites under the same back-end system with the same features
- Simplifying the back office
- Improving front-end performance
- Simplifying the content organization
To help ESSCA revamping its website, ITC provided a full package of services including Consulting, UI/UX, Front-end development, Back-end WordPress development, DevOps, Architecture and Quality Assurance.
Revamping the whole web design
To ensure the most optimized UI/UX, 100% of ESSCA website was redesigned by our UX and UI design team. The initial color scheme - red and light brown - was kept to maintain ESSCA’s brand identity. Meanwhile, the overall layout was fully refreshed with the most up-to-date web design principles. The most prominent change was that all space was utilized and the user flow became more comprehensive. Flat design was applied to all elements, from the menu to CTAs, bringing a more modern feeling to the website compared to its old version. At the top of the webpage, a clear main menu identifies the most important areas of ESSCA’s website. The movement between the tabs is seamless thanks to carefully designed front-end effects. A top banner with images of smiling students is the spotlight of the homepage, helping to attract and inspire the visitors at the very first sight. The 3 main CTAs - Register to ESSCA, Discover, Our programs - were placed in a strategic position, directing the users from the homepage to the most important contents.
The main body of content was presented in new layouts inspired by the university pinboard. Users can navigate to different pinboards representing different categories without leaving the homepage. Each pin is a preview and a click on it will direct the users to the full content.
Furthermore, beautiful front-end effects were integrated to enhance the user experience, such as toggle effects, image zoom-ins, effects when loading the next pages, etc. Also, the website is now fully mobile responsive, bringing the same experience on any devices.
ESSCA on mobile
Index of the current level on the left column
Previously, ESSCA had the main website and then some other websites that were related to one single topic. This separation made it difficult for the admin to manage the huge amount of content and also confusing for users when looking for information. In order to solve this problem, it was made sure that everything could be managed from one back office.
Besides the content management system, we used React - the most preferred library for front-end development. React.js is widely used these days because its component-based architecture allows developers to modify dynamic elements in the most optimal way. Also, React components are highly reusable, making it easier to maintain the code in the long term. For this project, we adopted the headless approach, using the CMS API to send the data from the back-end to the React.js front-end.
Aurelien - a back-end developer shares his experience during the project:
The integration between the CMS API and React was occasionally troublesome and required close collaboration between the front-end and back-end developers to find the best solution. Anytime it was needed and not covered by Wordpress API, we created some customs endpoints to get some specific data in a specific format for React. Another technology that we applied for ESSCA’s website (and also all of our projects) is Docker - an open platform for dev ops to easily build, ship, and run distributed applications. Docker was used in our projects to avoid the conflict between different environment - local, staging and production, ensuring the standardization and productivity of the digital assets through a process of Continuous Integration (CI).
Thanks to the seamless integration between the CMS, React.js inside Docker, all related contents are integrated into the same website. Although there are lots of contents, the layout is very clean and easy to follow. Also, this unification makes it much easier for the ESSCA team to manage all the contents.
Building a portal for parents
Another feature that we developed for ESSCA is a portal for parents to access information about their children, for example, the programs, school regulations, academic records and so on. Only parents can have access to this portal, with their username and password. This portal is hosted on a third-party platform, but still follows the same visual identity of the main ESSCA website, and is also manageable under the same back-end. By providing a customized page for parents, ESSCA makes it more convenient for parents of current students to access necessary information without any trouble. Also, it is a good way to attract parents of potential students who are doing some research for their children's future programs.
ESSCA for Parents - Homepage
Thanks to the use of modern web technologies, ESSCA’s website has been fully revamped, resulting in an optimized front-end performance, trendy and professional design, and a more centralized and manageable back-end system. The website content is presented in a more comprehensive way with carefully-designed menus, CTAs, and columns, which provides a seamless experience on both desktop and mobile devices. In this new version of the website, the parents can have access to necessary information on a separate portal, not being overwhelmed by the huge amount of content on the main website. With enhanced experience on the official online channel, ESSCA is expected to raise the satisfaction level of current students and attract more students in the future.