Website Design & Development, Healthcare

Lincoln Park Institute

digital digital Squares
1

The Project

There are a few of us here at Solid Digital who don’t do well with blood and gore. So, needless to say when we heard we were going to do an oral surgeon’s website, there was some initial apprehension. However, every now and then, you get a project that really surprises you. Lincoln Park Institute was most certainly one of these.

This small oral surgeon based in Chicago’s Lincoln Park had a whole lot more to offer than just a savvy location. Much like their philosophy with patients, LPI did everything in their power to make sure that their procedures turned out flawlessly. This hands-on partnership allowed us to turn this project into one of the most fulfilling and personal website experiences that we have created to date.

digital digital
2

Goals

Modernize
Old structure, old content, and old design aesthetics never lead anywhere positive. We needed to reimagine everything grounded in content, focusing on modern–day website consumption.

Brand
As a community staple, we had to get the real face of LPI across. We wanted local patrons to be familiar with the doctors and all of the positive ways that they impact the people in their community.

Resonate
We needed potential customers to see real life results. To accomplish this, we went above just taking custom photos. We created 5 custom videos that told the story of LPI from the vantage point of satisfied patients.

Integrate
We needed to take an entirely new approach to their content. This involved finding a way to bring together the site architecture, written copy, images, videos, and our SEO strategy into a well thought-out online experience.

digital digital
3

Discovery

To get this project started, we decide to take a trip out to Lincoln Park to see the facility and meet the staff first-hand. In the discovery meeting, we got a great feel for the atmosphere of the office and the types of customers that they service on a regular basis. We also brainstormed on a number of content enhancements, one of which led to the conception of documentary-style patient videos (more on this later). We also interviewed the LPI executive team, asking them a series of carefully crafted questions that allowed us to specify tangible goals, and key features to support such efforts. This meeting provided both a clear direction to proceed with, as well as an eye-opening glimpse into the practice.

Information Architecture

 Once we returned to our studio, we quickly digested as a team and prioritized on next actions. The most glaring problem involved reorganizing the entire site architecture to support the needs of new patients, existing patients, referring doctors and of course, LPI’s own business objectives. Previously, LPI promoted both oral surgery and cosmetic surgery as core practice areas. Upon further probing, LPI came to the conclusion that they needed to focus on just oral surgery procedures, if they were to remain a highly successful local practice. This meant removing all cosmetic procedures from the site architecture, allowing us to narrow scope to the most frequented procedures that capture the highest margins.

The other section that we needed to revisit was the Information For Patients area. LPI’s old website had used this section haphazardly and ineffectively. Because a patient in pain after a procedure does not need the same information as a patient getting ready to come in for their first visit, we decided to clearly separate each section into relevant categories – in order to best prepare each group’s job to be done. Applying this lens to our overall approach enabled us to  create a user experience that clearly points people to the information that they need most.

Wireframes

With the architecture reworked, it was time to approach this project in a more visual manner. When we started brainstorming ideas, it was apparent from the get go that we needed to showcase a lot of pictures. Not just of the staff or building, but also the operating rooms and the places you don’t necessarily see from the reception area. People needed to know how professional these guys were and that they were ready for anything. Our thought was to use these large images to help convey that point.

We also approached these wireframes with the idea of skimmable content in mind. We needed a way to show informative headers that would give the user an idea of what they were about to read. This leaves the user with options. If there happened to be a section they were not concerned with, the header would allow them to skim until they found the information relative to their visit to the site.

To start the process, our team gathered in our conference room and started sketching some ideas out on the whiteboard Knowing we needed a responsive solution, we sketched up every major template for mobile, tablet, and desktop experiences. When the sketches were complete, we refined our concepts into high fidelity wireframes – with enough detail to present structure and interaction. With the client on-board with our vision, we were ready to take the next step.

digital digital
4

Content Strategy

LPI had enough content assets to build upon a strong foundation. Our challenge was to sift through the clutter to single out what was most relevant to our target audience.

We started with a detailed content audit where we collected all of the written copy and images from the old LPI website. We knew early on that most of the images were not worth salvaging and would eventually be replaced after our pre-planned photo/video shoot. Though we did not have the assets in hand, we were confident in our partner’s ability to bring strong imagery to the table.

With the sitemap approved, it was time to tackle the written content. The old LPI website had a wealth of information, however it was difficult to read due in-part to a heavy reliance on out-dated SEO techniques. We ultimately gathered and refined all reusable content assets, applied it to the new website structure, and worked collaboratively with the client to edit, edit, edit.

We worked to trim down the content into usable, yet informative blocks that got straight to the point and catered to the on-the-go Lincoln Park crowd. We worked with the doctors and staff to make sure that all of the medical information was accurate, and that all of the important surgical procedure details were covered. We also wrote clear call-to-actions for each section header, allowing for faster navigation and skimming of key pages.

SEO was also a big part of this project. We conducted detailed keyword research, which we then factored into the page copy. To boost SEO value, it is important to produce concise titles and meta descriptions that describe of the page – while leveraging enticing call-to-actions. We also corrected all broken page (and domain) values by creating 301 redirect instructions to properly guide search engines (and users) to the newest, most relevant pages on the website.

digital digital
5

The Video Shoot

Our initial discovery meeting led to the desire for a highly visual story-telling experience – relying heavily on photography and documentary-style videos. We wanted to create a series of authentic narratives that would tell the LPI story from the perspective of the doctors and their patients. Film production isn’t a core competency of ours, so we contacted our partner, local film collective Atrio, to help us carry out our vision.

Though Atrio was in charge of the film production, we made sure to oversee the process and contribute our own ideas to the final output. Atrio collaborated with us in office to firm up strategy, tone, subjects, b-roll and location details. We also combined our efforts on storyboarding and creating a number of interview questions to make sure that we went into the shoot prepared to get as much quality footage as possible. To assure that our time was not wasted, we scheduled the day out hour-by-hour. Come the day of the shoot, our Content Strategist, oversaw all of the on-site production and assisted with interviewing LPI customers directly.

Meticulous Planning

We planned to interview a total of 6 LPI stakeholders throughout the day (2 doctors and 4 patients). A combination of our meticulous planning and LPI’s excellent patient relationships allowed for the day to start off on track. We did, however, encounter a minor snag later in the day when one of the patients got stuck at work and was forced to cancel. Luckily, a patient who just had the procedure in question performed, was scheduled for a post surgery check-up and was able to fill-in this unexpected vacancy.

Atrio never stopped taking pictures in between setting up and shooting the videos. They documented everything from the reception area to surgery prep areas in order to provide us with as many location shots as possible. We gathered the surgeons and staff for individual and group shots to help give everyone a face to their name. Local practices operate like family-owned businesses, so the group shots we captured (and strategically placed throughout the website) really helped demonstrate the family dynamic LPI staff have for one another.

A week after the shoot, Atrio showed us initial cuts of the footage. After a comprehensive review meeting and a few additional suggestions for improvement, the final cuts were delivered. Needless to say, we were blown away! Chris, our content strategist, had previously remarked that a few of the patient interviews had moments “that you just knew would make the whole experience worth it”. The videos and photos were just what this site needed to portray the practice’s professionalism, dedication, and passion for the craft of oral surgery.

6

Design

Simplicity was the guiding principle for this project, as we set out to achieve something that was highly organized based on need, easy to skim (and read), and visually telling. As we already had a clear design direction from the detailed wireframes, it was just a matter of applying the right amount of polish to bring everything to life.

The first step was applying the new pictures into the website. Rather than using a slider in the center of the page, we opted for a flexible image spot that would remain fixed to the far right margin. This would allow the page to scale, but not break the layout until you hit a mobile breakpoint. It would also allow for attractive imagery to be the focal point on each page.

The same approach was applied to the typography. Clean fonts paired with large headers and breathable content blocks were essential in communicating digestible bits of information to prospective patients and referring doctors.

digital digital