Mobile First - Web Design for Telecure


Telecure is a telemedicine company that treats common conditions over the phone.

Problem

Telecure's landing page is not working very well on mobile devices. Today, almost 1/4 of the Web's traffic comes from mobile. Without a proper responsive site, Telecure is risking losing a quarter of their users.

The Old Telecure Landing Page

By doing usability tests, talking with Telecure, and having user interviews, I identified many issues with the existing landing page - both desktop and mobile versions.

Mobile Version

Key Issues

• Website design/style is not consistent
• Site is not responsive
• Content needs to be updated

The challenge here is to accommodate an extremely wide variety of display widths to future-proof the website.

My Role

I researched, wireframed and re-designed the website. I tried to maintain their original design framework as requested by Telecure.

Telecure also decided to use "zombie people" (shown below) in their design, and I was asked to apply these characters. I also added a page for their new iOS app.

Personas

Telecure is primarily targeting three types of people.
• People who do not have insurance and have difficulty accessing any doctors;
• People who have insurance but are in a rush (i.e., traveling) and cannot wait to make an appointment with a doctor;
• P People with insurance who are willing to spend money to save time.

Start From Sketches

I started to sketch some of the key screens. The idea is to keep the website consistent through out each section.

Style Guide

Style guides help maintain design consistency. Once I had a rough idea of how the mobile site should look, I began to develop a rough style guide. I discussed the guide with the developer and we defined the brand colors. From there, I expanded the guide as shown below. (I also used this typography resource site.)

Mobile Design

After wireframing, I designed the high-fidelity prototypes.
This is what it looks like on different devices as shown below.

iPhone 5/5s

iPad samples

Desktop version

As you can see, while the width of the device increases, the content changes slightly. More "zombie people" are added to the background. "How it works" expands into one line, etc.