Introduction
Part of Nelson Mandela’s great legacy was the creation of a state-of-the-art pediatric hospital dedicated to treating critically ill children in South Africa. I was tasked with redesigning the User Interface of the website, to bring it into a cleaner and more professional-looking visual space, while introducing some of the brand’s fun and quirky characters. The site map and a task flow were pivotal in outlining the overall structure of the website as well as defining how a user would interact with an important section of the site.
Typography & Swatches
Clean web-safe fonts were chosen to complement one another, whilst also being highly legible, professional and clean against the colour palette and (at times) busy visuals.
Interactions
The brand’s bright colour palette was strategically used on interactive elements to visually show the user what was interactive on the site, and fun animations were designed to add a bit of joy to the overall interaction of the site.
Wireframes
I created High-fidelity wireframes based on the sitemap, this gave the client a clear sense of the flow and usability of the website before going into the final designs.
Design
I used flat design elements, complemented by layers of elements that popped off the page with the use of shadows. These elements were inspired by Google Material Design ideology to give the overall website a clean but 3D feel. This coupled with smooth and subtle animations to enhance the overall experience of using the website.
Responsiveness
The website was designed to be fully responsive regardless of the screen resolution or device. I wanted to create a sense of synergy and familiarity throughout the website experience, as such compromising very little on changing design elements found on the desktop designs, down to the mobile designs.
