St.Joseph’s General Hospital Website

GitHub

https://github.com/andreavillegasm/HospitalProjectTeam4

Role

Team Leader, Developer (Appointment Records and Patient Forum featured), Visual Designer

Technologies used

ASP.NET, MVC 5, HTML, CSS, Bootstrap

Description

St. Joseph’s General Hospital is a Catholic Healthcare organization that has provided care for the residents of Elliot Lake and the North Shore since 1958. For this Re-design project my team and I were tasked with evaluating St. Joseph’s current website and redesigning it completely; from its content structure and visual presentation to the addition of new features. Each team member was tasked with specifically coding 2 features (in my case the Appointment Record feature and the Patient Forum feature), as well as contributing and working together in the process of creating a detailed proposal for the re-design. As the team leader, I Coordinated and lead meetings to discuss the course of action, as well as to get approval for deliverables from teachers.

Original Website Landing Page

Researching and Understanding St. Joseph’s General Hospital

As this was a re-design project, the first step the team took was to focus on researching and understanding the hospital and its needs. As a team, we did a quick usability test of the website to determine specific areas that could be improved through the implementation of newly added features.

Restructuring the content

As a deeper step into the content structure, our team’s second step was to develop a content inventory file so we understood where all the content was going and how it was originally being structured. After having a strong understanding, the team restructured the navigation bar by performing card sorting exercises where users re-arranged the navigation bar based on what made the most sense to them. Through this exercise, we were able to determine a structure that was simpler and more guided by user intuition, while still maintaining the importance and essence of the content being presented.

Creating Responsive Wireframes

Once we had a clear idea of how the content was going to be represented, the team created wireframes for phone, iPad, and Desktop reflecting the new content and features. Through these wireframes, it was important to highlight the adaptability of the content to different devices, as we wanted to make sure content was effectively representing regardless of the devices being used.

DesktopWireframe(1020px-width)
TabletWireframe(760px-width)
MobileWireframe(480px-witdth)

Creating a Visual Design 

As the Visual Designer of the team, I translated the wireframes into a full high-fidelity mock-up where I incorporated the content structure decided by the team, with the primary colors of the original website. 

Developing the features

As a final step, the team used the ASP.NET MVC framework to code the two features assigned. I specifically worked on creating the Appointment Record feature and the Patient Forum feature.

Roles

As many types of users can use the Hospital Website (i.e. Doctors, Patients, Visitors, Hospital Staff), our team worked with authentication classes to restrict and grant permission to certain feature aspects based on who is logged in. This perhaps was the most challenging aspect of the development process.

Appointment Record

The appointment record feature allows doctors to create documentation for the appointments they may have; and for patients to view and keep track of these records. This feature can be found inside the details for a specific appointment, and it allows doctors to categorize their records as well as to attach PDFs to them.

Patient’s Forum

The patient forum is a feature that allows Patients to post their questions and concerns in a forum; and for doctors to reply to said concerns. To maintain the reliability of the feature only doctors are allowed to reply to the posts.

The Beginning of something great

Due to time contains, the current demo version of this project is the Minimal Viable Product of the features. Thus, It does not yet resemble the mock-ups and content structure but rather is the first step to the re-design development!