CapitalOto.com

Shortly before my first internship ended, a software architect under whom I worked told me,

Being a software engineer a little funny. It’s not like being a building architect or a carpenter, where you can drive by a house and tell your kid, “I built that!”

With websites it’s more like, “Well I didn’t build this, but I fixed a lot of bugs in it.”

I got to break the mold and rebuild an entire website for a client.

In January, I received a certain job alert from the wonderful CS Department Secretary Chris Coonrad: A local ear, nose, and throat practice was looking for (and willing to pay) “an undergraduate student, versed in website design, to help us update our current webpage”.

original site

The original site, last updated circa 2012.

A quick look at the existing website showed that it needed some serious work—the secondary navigation was nearly invisible; too many pages were dry walls of text; similar information that could’ve fit in one place was located in separate subpages. Most importantly, the two main functions that the site was supposed to perform, scheduling appointments and guiding the user to their Patient Portal, did not make themselves abundantly distinct on the homepage.

Check out the old site yourself on the Wayback Machine, if you dare.

audiology

Not pictured: the maze of medical literature accessible from the sidebar on the left.

Damn, I thought. What a great opportunity! Tons of extremely qualified students are definitely gonna apply for this…Oh well, I might as well try. So I sent over my newly HTML-migrated resume and promptly forgot about it.

Five months later, I’d rebuilt Capital Otolaryngology’s website from the ground up with Jekyll, designed them a completely new logo, and written up a pretty detailed README containing maintenance instructions for self-described “non-computer people”. Also, the practice administrator told me that I was one of only about three people who’d sent in their resume for the requisition. Go figure.

Process

Site

site map

The site requirements, as defined by one of the practice administrators.

Overall, the content was to remain mostly the same, just with a more modern format. Other than the sprawling copy in the Patient Learning section, the information architecture was pretty simple.

homepage mockup

The homepage mockup I was handed.

With the new site, CapitalOto wanted to make sure that it was easy to navigate to the practice’s Patient Portal, where patients and doctors exchange medical data like checkup results and suggestions for followup procedures. The existing site had no such link.

homepage medium-fi mockup

Because I hadn’t yet learned of the existence of web design tools like Sketch and Figma at the time, I set about creating interactive wireframes for the new site with a free tool called Moqups. The free version is rather limited, but it got the job done. You can still view the wireframes by clicking the image above.

ENT logos

In general, there seem to be only two possible directions when it comes to a logo for an ENT practice:

  1. the eponymous body parts, disembodied and reassembled
  2. a cross-section of the human head, optionally highlighting said parts

CapitalOto disemboided parts logo

CapitalOto was no exception to either rule. Pictured is one of their pre-2012 logos, printed on their stationery.

One logo idea put forth by the practice was a map of the Capital Region, with stars indicating the practice’s three locations. That concept might have given the wrong impression that Capital Region Otolaryngology only serves patients within that region—some patients reside in other areas like Vermont.

some logo ideas

more logo ideas

Some “harsh light portrait” ideas I sketched that are meant to emphasize the ear, nose, and throat. My client contact furrowed her eyebrows when I showed them to her. Not because they’re kinda creepy, but because it was hard for her to parse a human face in some of them.

an existing circle logo another existing circle logo

The concept we ended up going with was to highlight the ear, nose, and throat of a head’s silhouette using colored circles. Given the existing logo, it seemed like the next logical step. Yes, it’s been done before. But it’s a little more clean and unique than some of the examples I found online—due in no small part to some anatomy advice from one of the doctors.

Final deliverables

new site

A landing page that will actually make visitors want to continue.

mobile map

Feeling Responsive, the Jekyll template I used, is true to its name.

new logo

Perhaps the most challenging part of the whole undertaking.

What I learned

On the design side

On the dev side

Also

What I would’ve done differently

You can see CapitalOto.com for yourself here and the source code here.

Want to see more of my UX design work?

Email me and I’ll send you my portfolio.

Andrew Aquino

Andrew Aquino

Frontend developer + UX designer

rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora flickr