The Aesthetic Society | Website Redesign

Challenge

The American Society for Aesthetic Plastic Surgery is recognized as the world's leading organization devoted entirely to aesthetic plastic surgery and cosmetic medicine of the face and body. Although its reputation is strong among clients and surgeons alike, that reputation was not represented by their online presence. They had seven disparate sites and micro-sites that were difficult to manage and their online identity didn’t match the reputable organization they are.

Approach

Consolidate these siloed websites and leverage a recent overhaul of their brand identity to establish a patient-first organizational identity for web. Create a templated, modular, and responsive content management system that would be easily authored and updated to maintain as a consistent resource for cosmetic surgery.

My role(s)

I led the UX and visual design of this initiative with a team of designers. This meant keeping us on track for timelines, ensuring milestones are delivered, collaborating and presenting to our clients, and working directly with our off-shore development team.

Taking stock of the current state

To prioritize what we need to make the most valuable impact, we had to understand the current state. This meant doing a complete content and UX audit across The Aesthetic Society’s sites to understand redundancies in information and pages while visually documenting our findings in the form of seven sitemaps and two audit matrixes (UX and content).

The Aesthetic Society had internal sites for surgeons, patient informational sites, and sites for surgeons to view the latest trends and tools in cosmetic surgery. In many instances, these sites had overlapping information so it made it difficult for patients and surgeons to know what to trust. We needed something that was dynamic to accommodate different user groups and content.

Collaboration as a cornerstone

We had success in ensuring our clients were involved and educated at every step. In providing rationale for what we were currently doing and how it would act as a foundation for our next step, we quickly gained their advocacy for our process. We walked them through high-level artifacts like future state sitemaps and capabilities to ensure their approval early and often. This way they always felt heard and included. This also made our efforts and time spent more efficient since every step was agreed upon by us as a team.

Breaking it down

After synthesizing the current state content and creating an ideal future state hierarchy, we were able to understand what templates would benefit users most and house relevant content that would be prevalent to those users. We provided content recommendations and recommended use cases for 12 templates along with possible features and functionalities the template would have. We then showed how these templates would be integral in user flows that exhibit key actions.

Getting into details

Now that we had approved capabilities, flows, and templates, we were able to confidently create wireframes that were a result of the culmination of those previous steps. Although these were created based on approved content, we wanted to make sure we were rigorous about these particular approvals since they were involved an increased amount of detail and were necessary for next steps in creating a component library and visual language.

Feedback at every step

As mentioned, we ensured that we were collaborating closely with The Aesthetic Society major stakeholders and doctors in everything necessary. This was especially prevalent with our annotated wireframes. We captured feedback through multiple methods that accommodated our workflow and the clients’ preferences including commenting directly on wireframes and receiving feedback from doctors through emails. As with everything else this was an iterative process where we had co-creation sessions with stakeholders to ensure feedback was understood and integrated properly as well as adding feedback and questions to a tracker displaying what would be addressed immediately and what would be held for future implementations.

First steps to a visual language

When we had client-approved wireframe templates we were ready to create components and modules based on our capabilities and needs within them. We had our visual design team work on exploration in tandem with our UX timeline so that we had multiple possible directions prepared. This expedited our processes and interlaced UX and UI further so our associate designers on the team could work better together while learning about one another’s crafts.

Iterate, iterate, iterate

As we did with every other step, we had everyone aligned in each decision we made with rationale to back it up. This played a crucial role in design since it is where we encountered some of the most feedback and had the most conversations. We had a weekly playback cadence with our clients and a twice a week cadence with our developers who were implementing the content management system. This constant loop kept the team cohesive and communicative, which was critical in talking though complex patterns and interactions like searching for a surgeon utilizing Google Maps API.

The results were…beautiful

Sticking to our processes and team norms enabled us to create a system that was easy to configure and augment. Most importantly it was created using the combined minds of everyone including our company stakeholders and actual surgeons. Today, The Aesthetic Society is represented as it truly should be; a beautiful visual resource for prospective patients looking for information or take the next step, and a hub for surgeons to post their work and influence the community. The outcome was a leap in site usage because of its professional nature and a clear increase in surgeons around the world being booked for follow ups and consultations.