Tylenol Design Hub Created by Eliana Feng @ Polaris Design
PROJECT OVERVIEW
Project Label Creative Direction, UX/UI Design, Visual Design
Clients Tylenol, via WebMD DNA Studio
Timeline September 2019 – October 2019
Roles & Responsibilities
Eliana Feng @ Polaris Design — Creative Direction, UX/UI Design, Visual Design, Illustration Direction.
Freddy Arenas @ FreddyArenas — Illustrations.
Perry Zhang @ WebMD DNA Studio— Branding/Illustration Guidance.
Jacqueline Aude @ WebMD DNA Studio — Project Management, Copy Writing.
PROJECT description
Tylenol, a client of WebMD DNA Studio, was looking to create a responsive branded website about oral surgery preparedness, in an effort to promote its own oral medications and brand. WebMD DNA Studio provided Polaris Design with the client (Tylenol) requirements, legal requirements, copy writing and custom-made branding for the branded website. Polaris Design led the design for this campaign.
Creative direction
We believe that design has to live within the content itself, and the purpose of design to help users consume and digest content easier and with joy.
The gist of the content is to inform users what to expect from different types of oral surgeries and how to prepare for them; after the oral surgeries, how users can use different methods to cope with the pain, and that’s when Tylenol products come into play as well.
We believe that the design should help alleviate the daunting feeling associated with the subject matter, as one of the main requirements from Tylenol as well — the design should stay away from being too “clinical”.
Created by Eliana Feng @ Polaris Design, the design of the Tylenol Oral Surgery Preparedness Guide website is to convey a feeling of organism and fluidity, inspired by the subject matter itself — oral, human anatomy etc.
Design Process
Step 1 — Branding Guideline To jumpstart the project, WebMD provided Polaris Design with a custom made brand guideline that has been approved by its client Tylenol.
Step 2 — Content & IA WebMD also provided all the content in the format of copy writing. Polaris Design subsequently provided feedback on the content from an information architecture standpoint. The study on the content helped us understand where we would need to use design/illustration/visual elements to further elevate certain content, in order to establish a clear information architecture.
Step 3 — Design Research At Polaris Design, this is an important step in the design process. It is important to not just research best design practices within the industry but also across different industries.
Step 4 — Design Explorations To reach the final design, Eliana Feng @ Polaris Design has explored different design directions, layouts and interaction models. The final design was created based on multiple explorations and multiple rounds of design research and feedback sections between Polaris Design, WebMD, and Tylenol.
Step 5 — Responsive Design After the design direction has been finalized, Eliana Feng @ Polaris Design also created the responsive design for the tablet and mobile breakpoints.
Step 6 — Dev Notes Polaris Design also worked with the development team at WebMD to help with the development process, including providing any interaction and animation notes.