Refreshing Surface’s Digital Presence
Published
Project Information
When designing for any health-related project, such as a website refresh, it requires a delicate balance between professionalism and approachability. For Surface Dermatology Clinic, I developed a clean, modern website paired with dynamic motion graphics that not only refreshed their digital presence but also enhanced the patient experience, reflecting the clinic’s commitment to care and innovation. Brought to life with the fine folks at The Workhouse.
Role
- Content Architecture
- Presentations
- Low Fidelity Wireframes
- High Fidelity Website Prototype
- Motion Design
Timeline
- June–August 2024 (6 weeks)
Skills
- Figma
- Illustrator
- After Effects
- Blender
- FFMPEG
Overview of Surface Desktop and Mobile
An overview of the redesigned Surface website on desktop featuring the home page animation, Surface philosophy, services, Sojourn, and contact flow.
Refreshed mobile site overview for Surface featuring the intro animation, about us, skin encyclopædia, and shop.
Background
Surface Dermatology Clinic sought a website redesign to better align with their new branding which emphasized their modern approach to dermatology and their focus on patient care. The refresh also allowed shopify functionality to be added for their shop as well as to incorporate a space for their coffee shop—Sojourn. The goal was to create a cohesive online platform that felt professional yet welcoming, embodying the trustworthiness of their practice.
Surface Branding Background
The foundation of the website refresh is the branding exercise performed by the Workhouse team which explored the integration of product, place, people in the dermatology space.
Wireframes
Loading video...
As part of the branding, an extensive brand book was produced by Kenzie Clarke which included visual identity (Logos, Type, Colours. etc.), and brand expressions (Art Direction, Social Media, Motion Graphics, Voice, and so on).
Process
The project began with stakeholder interviews and competitive research to establish clear objectives and user personas. An extensive content architecture was created with references to hone in on the right solutions. From there, I created wireframes and interactive prototypes to show functionality and prioritize key user actions like booking appointments, viewing services, or shopping by brand. The design phase concluded with a developer handoff by sharing the designs, assets, functionality, as well as providing Q/A and feedback when needed at milestones.
Redesigned Home Page Overview
As part of the discovery phase of the website redesign, we collaborated with the client to create an extensive content architecture that detailed the pages, sections, and components with references to other websites to hone in on the perfect solution crafted for Surface.
Animations Highlight featured on the Home Page
Extending the functionality of the website and aligning with their future-focused dermatology philosophy, the doctors wanted all after-care cards to have an online equivalent that can be easily referenced, as well as link to products, services, and contact.
Alongside the after-care cards, a skin encyclopædia was created with signs and symptoms, possible triggers, treatments and prevention, and management.
Contact Page
On the book a consultation page, a multi-stage form flow was created to allow users to input their information in bite-sized pieces and guide them through the process.
Final Design & Impact
The redesigned website delivered a sleek, responsive experience with extended functionality, subtle motion graphics, and complements their new branding. The doctors and patient’s feedback highlighted the site’s modern look and seamless functionality between services, shop, skin encyclopædia, and sojourn.
Reserve Page Overview
Alongside the Surface branding, a sister brand was created for their connected coffee shop—Sojourn. I created a page for the shop that reflected the branding and made sure to add updatable menu functionality and space rental information below.
Social Media
Loading video...
For social media, we reflected their brand strategy by created posts in four categories: Evidence, Empathy, Transformations, and BTS.
Loading video...
We also produced a social media guide for producing content for Surface which includes branding, strategy, feed posts, Instagram Stories, tone of voice, and do’s and don’ts.
Surface Home Page Hero Video
As part Surface’s home page, I was able to produce a introductory video which highlights the brand dichotomy, 3D particle cloud created in Blender, and typography.
Takeaways
This project underscored the importance of blending aesthetics and functionality in health-related design. By centering user needs and collaborating closely with stakeholders, I created a digital experience that elevated the brand while providing tangible value to its users.