Website design for a company that provides holistic, high-quality linen management and laundering services to hospitals


Visit website

About the Project:
Shubhram, still in its first year, needed a new website to showcase the services that it provides. The website would:
1. Be a tool to help present Shubhram’s processes and offerings to a hospital admin
2. Be a tool to help present ‘Shubhram Hospital Linen’, The company’s very own proprietary linen
3. Need to appeal to investors or businesspersons looking to set up a plant in another geography
4. (And since the 4 founders are health care professionals and professors) Eventually be a platform where they would publish articles in the field of linen management.

Our starting point:
– The company’s existing brochure served as the starting point of reference for the website content as well as structure.
– Client provided us with a video that explained all the processes that take place inside inside the Shubhram plant
– Initial conversations with the client helped in taking a call on the key pieces of information to be highlighted on the website.
– Client shared current plans as well as future goals for the website.

Information Architecture
A lot of the content on Shubhram’s processes was taken from their existing print brochure and re-visualised for the website format, additionally the client wanted to provide a lot of dynamic content like client list, news, research and case studies.
– First, a sitemap with the website pages was finalised
– Then a content prototype was made. This document would outline the kinds of content that would come on each page
– Client was provided with a content requirement form so as to gather all content based on the approved content prototype
– We gave the client a photography guidelines document that would guide the photographer on the kinds of images that were required of the plant

Responsive web design
The website was designed on desktop first on a 20 column grid. The output was then translated to mobile and tablet. On mobile, some of the javascript powered animations were recreated using CSS keyframes.

WordPress was the content management system used for the Shubhram website. It was integrated with JetPack for sharing posts, Advanced Custom Fields and Custom Post Types UI for customizing the content creator’s dashboard and Gravity forms.

SVG Manipulation
100% of the website’s visual assets, apart from photographs, were fed into the website using SVG (Scalable Vector Graphics). We love SVG because it’s 2017 and we should never have to worry about pixelation. When placed with <svg> tag directly into the markup, they can easily be animated. You can see this in action when the shirt is going through a wash cycle in the Shubhram Clean Chain Page.

Screen Typography
The brand font was already identified by Codesign as Geogrotesque. Geogrotesque has been conceived to be used as a display typeface in publications or intermediate length texts. This worked for all the pages of the website that had content of predictable size. Since we would not have been able to control the dynamic content on the website, we decided to complement the case study and research body copy with Georgia for easy readability and less maintenance.

Visual Language
Since the subjects of the website dealt with disinfection, sterilization and cleanliness, it was clear that the Shubhram website needs to embody all these qualities. Our starting point for creating generated assets was aclean chain diagram conceptualised and executed by Codesign. We created supporting brand assets, illustrations and color palette based on it.

All illustrations were fed into the website as SVG. The components in each illustration were organised in layers during export so that each path could be potentially animated. We even used illustratons to create a sweep reveal effect over photographs so as to blend them seamlessly with the page.

User Experience
Since we had all the content before hand, we decided that Shubhram’s services (which are not scheduled to change anytime in the near future) could be given static pages. This way we got 100% control of the experience and walkthroughs we wanted to create on these pages.

I learnt lots! About presentation:
Since this website was peppered with a lot of SVG animation, there needed to be a way to allow the client and developer to efficiently preview these pages with the intended visual animation as they were being designed. The prototyping app: Principle for Mac came to the rescue for this one. With mobile and visual prototypes provided for each web-page, there was no chance of misinterpreting any of the page designs sent. Pages that did not use too much animation were presented in invision.

I learnt lots! About Developer Handover:
Jessica Duarte (founder of JessPlease, Toronto) was the developer identified for the project. Since we were working out of very challenging timezones, it was very important that we communicated as efficiently as possible. She and I shared a dropbox folder where I shared with her: page designs in desktop and mobile, assets, specifiations, stylesheets for Typography and images for QA. Apart from this, we maintained a very organised sheet of QA changes that we would discuss over call anytime there was any ambiguity.

I tried new things! SVG animation:
The client showed us the clean chain diagram, which he used very often to explain services to clients. But this diagram could not be used as is, since it would lose its clarity when scaled down to smaller devices. Since this was such an important piece of collateral, we decided to use the elements of the diagram and re-interpret it in an interactive manner.

Design Tools:
– Sketch
– Principle
– Invision

Development Tools:
– WordPress with base theme
– inuit.css as the CSS framework and grid
– Gulp for compiling sass, concatenating JS
– ScrollMagic and GSAP for animations.
– Isotope for filtering
– Lodash for resizing browser animations.
– Jetpack for sharing of posts

Visit website

Credits: Front-end developement & WordPress integration:- Jessica Duarte from JessPlease, Toronto
Tagged in User Experience Visual Language Web