Westmead Fertility Centre Project banner image

Project Objective

To conduct a complete overhaul of Westmead’s internal portal and external website through the development of a more advanced, secure and seamless structure that integrates with the hospital’s internal systems, while providing the best user experience for doctors, patients and website visitors.

Westmead Fertility Centre has a long-standing relationship with Matter Design and therefore approached our team to assist with the development of 2 key projects – 

  1. An enhanced redevelopment of their internal staff portal, which allows doctors and patients to manage internal relations both securely and efficiently. This includes the submission of forms and the processing of information that links to the hospital’s internal system, File Maker Pro.
  2. A modernised, responsive public-facing website that displays information about Westmead Fertility Centre and allows users to interact, explore and take actions on the website, such as booking an appointment or registering for an information seminar.
Screenshot of Westmead Fertility Centre's portal UI

Discovery

Westmead Fertility Centre’s requirements for the projects were:

  • To separate the once connected portal and public site
  • To build a new internal portal back-end on Laravel, a system that provides the utmost security for sensitive data
  • To build a new internal portal front-end using VueJS, an adaptable framework for advanced user interfaces
  • To maintain a simplified, yet improved, user experience in order to achieve a smooth system changeover for staff members
  • To integrate existing functionalities with File Maker Pro
  • To migrate all existing users from WordPress into Laravel
  • Fully responsive development
  • To comply with strict security standards and pass a security penetration test
  • Structured search functionality for both the website and the portal application
Screenshot of Westmead Fertility Centre's portal UI

Strategy

Matter’s aim was to develop improved interfaces for both the portal and the public website. Westmead’s older website offered desired functionalities but needed a facelift to incorporate a modern user interface and new branding (fonts, colours and iconography). The website and the staff portal needed to be separated so that the staff portal could be built using a more secure system.

Matter was to take all existing functionality of the staff portal and integrate them into the new system, coding each action and response into the backend of the interface.

We were essentially creating an improved clone, using more complex coding structures including VueJS and PHP.

One main consideration for the project was to manage the data migrations as delicately as possible to ensure that all functionality was transferred and manipulated to fit the workings of the new systems. Considerations such as the time-sensitive storage of data, hidden fields in XML’s that speak to File Maker Pro and other API calls were of high significance.

Screenshot of Westmead Fertility Centre's portal UI

Screenshot of Westmead Fertility Centre's website UI

Creativity

The portal was designed by Matter’s lead designer Alberto, who worked to bring in the new branding elements. There was much to consider when designing a website portal that is used by hundreds of staff members and thousands of patients.

User experience played an important role in the design process, down to the smallest of intricacies such as how users navigate through fields on forms and how the forms render on different browsers and devices. The UX and UI had to cater to everyone’s needs.

Screenshot of Westmead Fertility Centre's website UI

User Interface

Screenshot of Westmead Fertility Centre's portal UI

Technology

Staff & Patient Portal

Matter chose to use Laravel to build the back-end systems of Westmead’s internal portal because it is highly customizable, highly secure and gives our developers complete control, with no pesky plugins causing issues. The organised code structure is also better for future development, with updates quicker to implement. The back-end framework was built by our senior developer TJ who worked closely with the File Maker Pro technologists to ensure all information was firing correctly through our custom built API’s that use a GET/POST structure to send information simultaneously between Laravel and File Maker Pro. Our system was designed around the ability to easily integrate with Westmead’s current internal systems.

The front-end interface of the portal was built by our front-end developer Jeremy. We chose to use the VueJS framework because it is very popular, modern, lightweight and fastest one of the frontend framework. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects.

 

Information Website

We chose WordPress to build the information website as:

  1. WordPress CMS is designed for publishing articles, which suits Westmead Fertility Centre’s needs perfectly as they need to post news and events articles regularly
  2. WordPress is widely used and friendly to users. WordPress takes 60% of all the CMS market (source: https://kinsta.com/wordpress-market-share/), which means Westmead Fertility Centre can easily find an editor to manage the site content
  3. WordPress is well developed over the past several years and becomes very flexible. Since clients’ needs may change over time, it is better to have an extensible platform so it would not cost them a fortune to add new features
  4. SEO friendly. WordPress has a lot of tools and plugins to optimise the content and help our client to reach a better rank in search results on Google and other search engines.

 

Screenshot of Westmead Fertility Centre's portal UI

Westmead Fertility Centre

Screenshot of Westmead Fertility Centre's website UI