Skin Anatomy and Common Pathology Intereactive Web Resource
Client: University of Dundee
Purpose: Create an interactive and extensive resource featuring a collection of infographics, animations, and 3D models about common skin problems and treatments.
Target Audience: General Public
Process
Challenges
-Lack of accessible, science-based information for the general public.
-Scarcity of clear visuals explaining skin biology and treatments.
-Fragmented and scattered information across multiple sources.
-Overly text-heavy resources that reduce engagement.
-Low user retention due to unengaging formats.
-Prevalence of skincare myths and misinformation
Objectives
-Use engaging visuals to explain skin structures and treatment mechanisms.
-Increase user engagement with of text, graphics, and interactive elements.
-Simplify complex concepts for easy understanding.
-Educate users on how treatments work biologically.
-Provide fact-checked content to debunk skincare myths.
-Centralize reliable information in a single platform.
Resources Currently Available
Research papers and official medical resources for the general public contain little to no accessible visual resources
Visual resources make complex skin science easier to understand, boost engagement, and help users better retain information. They clarify how skin issues and treatments work, building trust and cutting through misinformation.
I developed a detailed style guide, approved by my creative director, with a warm yellow and red color scheme to create a friendly, inviting feel for all audiences. To add playfulness, Useing varied fonts for headings, subheadings, and body text. Aiming to ease the stress around skin concerns, I focused on a calming, approachable design. The wireframe supported this with an open, minimal layout that highlighted the detailed illustrations, plus an interactive page where users could click on a large skin illustration to explore layers and functions, enhancing engagement and learning.
Wire Frame
Illustrations
Illustration Process
To create the illustrations, I first conducted a detailed review of research papers on each ingredient. I then summarized the biological processes and effects into clear, accessible language for both the infographic and website scripts. Based on these summaries, I developed illustrations that visually explain the processes, making complex science easy to understand at a glance.
Animation
Animation Proccess
To create the animations on acne, hyperpigmentation, and aging, I began with in-depth research of scientific journals, taking detailed notes on each topic. From there, I developed a detailed animation script that broke down the processes step by step, which I then used to create storyboards outlining all planned movements and visual sequences.
