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.
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.
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.
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.
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.
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.
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.