Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Product Design • Webflow Website
Empowering skin health through design. A bespoke website for The Arewa Clinic's specialized dermatology services.
Description
The Arewa Clinic, led by dermatologist Dr. Dami Arewa, offers specialized skincare solutions, focusing on treatments like chemical peels, dermal fillers, and anti-wrinkle procedures. The website highlights the clinic's personalized care, client testimonials, and a blog dedicated to skincare for women of color
Dr Dami Arewa needed a website where users can learn more about their skin, understand the full scope of her services and an outlet for her to share knowledge and insights on good practices around maintaining skin health
Key Challenges
- Translating Dr. Arewa's personal story and professional journey into a compelling visual narrative
- Designing a website that appeals to a diverse clientele while emphasizing expertise in treating darker skin tones
- Creating a balance between presenting medical information and maintaining an approachable, aesthetic-focused design
Scope of Work
Conducted comprehensive research to understand the skincare industry, target audience, and competitors. This informed the design and functionality to align with market trends and user preferences.
01
Created intuitive and visually appealing user interfaces and experiences tailored to the skincare brand's identity. Focused on seamless navigation and engaging design elements to enhance user interaction.
02
Developed custom graphics, including logo, icons, and visual elements that reflect the brand’s aesthetic. Ensured all design components are cohesive and enhance the overall brand image.
03
Project Overview
Work began with an initial client meeting to gain a clear understanding of the full scope and requirements for the website. During this discussion, the client responded to a series of pre-prepared questions, which helped clarify her needs and define the essential features for the site. She also shared examples of competitor websites, highlighting elements she liked, disliked, and specific features she wanted to incorporate into her own site.
In designing The Arewa Clinic's website, I conducted a competitor analysis of five skin clinic websites, focusing on minimal designs, pastel color schemes, practitioner credentials, and the use of testimonials with before-and-after imagery. This helped identify opportunities to differentiate The Arewa Clinic by highlighting Dr. Arewa’s expertise in treating diverse skin types. Additionally, I researched color psychology with a focus on aesthetics that complement darker skin tones. I developed a warm, earthy color palette that conveys luxury, natural beauty, and expertise, creating a welcoming and professional atmosphere tailored to Black clients. After multiple iterations we settled for the below color palette.
Early Sketches and Ideas
The design process for The Arewa Clinic's website began with hand-drawn sketches that focused on user-centric features, including prominent call-to-action (CTA) buttons, a sticky navigation bar with a visible 'Book Appointment' option, large H1 headlines to communicate the clinic's value, and strategically placed testimonials with client images. These early concepts also incorporated an educational blog to position Dr. Arewa as an authority, as well as a footer with social media links for community building. This initial layout aimed to balance professionalism with accessibility, driving user engagement and building trust.
Low-fidelity Wireframes for Key Pages
Building on the initial sketches, I created low-fidelity wireframes for the six main pages—Home, About, Treatments, Conditions, Blog, and Gallery. These wireframes established a consistent structure for a cohesive user experience, mapped the hierarchy of key messages and calls-to-action, and explored various content layouts, particularly for the Treatments and Conditions pages. They also considered the strategic placement of testimonials and trust indicators, ensuring that Dr. Arewa’s expertise and the clinic’s focus on Black skincare were effectively communicated across the site.
Information Architecture
To create a logical and intuitive structure for The Arewa Clinic website, I developed a comprehensive information architecture (IA) that organized content into clear categories—Home, About, Treatments, Conditions, Blog, Gallery, and Contact.
The IA prioritized Treatments and Conditions as primary navigation items, with Blog and Gallery as secondary sections. I implemented a consistent navigation system with dropdowns for subcategories, a footer for quick access, and breadcrumbs for orientation.
The design included cross-linking between related treatments and conditions, contextual blog links, and scalable content structures, with modular treatment pages and taxonomies for blog discovery. User-centric features like FAQs and quick links to popular services were also incorporated for enhanced usability.
Typography
For The Arewa Clinic website, typography was essential in shaping a professional yet approachable visual identity. Poppins was chosen as the primary font due to its clean, modern design that ensures readability across devices, while its rounded edges add warmth, reflecting Dr. Arewa’s personable approach to skincare.
Poppins
Versatility in weights allowed for creating clear hierarchies without needing a secondary typeface, with bold headings, medium subheadings, and regular body text. This strategy ensured consistency, enhanced by accessible font sizes, line heights, and contrast ratios for optimal readability, especially in blog and treatment sections.
Component-Based Design System
To ensure consistency and efficiency in the design and development of The Arewa Clinic website, I created a comprehensive component-based design system in Figma. This system included core components such as buttons (primary, secondary, and tertiary), input fields, form elements, navigation items (header, footer, mobile menu), and cards for treatments, blog posts, and testimonials. The typography system covered heading styles (H1 to H6), body text styles (regular, bold, italic), and link styles with hover states, ensuring a cohesive and scalable design across the site.
Prototype Development
After finalizing the designs, I developed high-fidelity prototypes in Figma to refine the user experience and validate key design decisions for The Arewa Clinic website. These interactive prototypes included key user flows—such as homepage navigation to treatment selection, and blog posts to consultation booking—while incorporating realistic content, functional navigation, and responsive designs for all devices. I conducted user testing with eight participants, gathering insights that led to refinements like enhancing visual cues and increasing the prominence of the 'Book Now' button for mobile users. A second round of testing validated these improvements, ensuring the prototype was ready for development with a user-centered design that effectively communicated the clinic's value.
