Digitech Lab – Responsive redesign

The project for Digitech Labs was initiated due to them not having a mobile version of their website. Also plenty of the content on the site was outdated including the contact information.

My first step was to review the requests for updates and then to perform a content audit. The content audit consisted of reviewing all the pages to review content, links, and images. Since the site would now be responsive, we needed various sizes of images. The larger higher resolution images would only load on larger devices, the smaller simplified images would be displayed on phones and smaller tablets.

Below is a picture of their previous site. It was in a fixed width layout. I took this picture with an old iPhone 4.

BEFORE: Legacy site that needed redesign

The message abou this being a dental lab needed to be very clear. So I maintained the teeth as part of the design. These now are on a .png image so that it can be move into a calculated position depending on the screen viewing the page. The model’s head is also on a various .png files. In order to achieve the desired look in a responsive design it required a longer background of the laboratory, the models head, and the teeth.

Since the model did not really add value to the visual communication I was allowed to remove it on the smaller layouts since i presented the case that it got in the way of the content. However it had to remain in standard desktop designs.

Screenshot of responsive redesign of digitechlab on tablet by Juan Gallardo
Screenshot of landing page on tablet

I tested the layout for the iPhone in the simulator from XCode. The iPhone was the most used device to view our site. over 95% of mobile visits were made on an iPhone, so i wanted to assure compatibility.

Screenshot of digitech lan website on iPhone by Juan Gallardo
Screenshot of site on iPhone
screenshot of the digitech lab website on desktop
Home Page on tablet. The business objective was prioritized to get the visitor to schedule their next pickup.

Those that are new to the site will quickly see the company message upon first arriving, rather than having their time wasted with an “about” page. And their are quick links provided to quickly help the visitor accomplish their intended function.