Mobile First - Web Design for Telecure
Telecure is a telemedicine company that treats common conditions over the phone.
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.
• 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.
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.
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 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.)
After wireframing, I designed the high-fidelity prototypes.
This is what it looks like on different devices as shown below.
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.