Skip links

Skin RX Face and Body Wellness

Skin RX is a face and body wellness clinic that aims to provide the best quality care and service at an affordable price. For our final project, we were grouped to create a responsive website for a real-time client. Aside from designing and developing the website, I also designed the banner ads and redesigned the logo.

UX Design


Design Systems

Logo & Branding


Web Design

Web Development

Business Website


Sept 2018 – Dec 2018


Adobe Dreamweaver

Adobe Illustrator

Adobe Photoshop




Kenneth Sta. Cruz

Kaitlyn Pedralvez

Kathrina Tacastacas


MINTER3 (Interactive Applications for Online Media 1) lays the foundation for developing websites using industry standards for development and ease of editing content. For our final project, we were grouped to create a responsive website for a real-time client using HTML and CSS. Our group leader, Kaitlyn, chose ‘Skin RX’ since it is their family business. Each member of the group made their own version of the website but we used the same colour, branding, and typography.

launch live website
  • To inform the user of the different services and products the business offers.
  • To establish the business branding clearly and efficiently.
  • To maximize the website’s capabilities towards increasing business productivity.

For my interpretation, I used different shades of pink to achieve a clean and relaxing look. I also designed all the banner ads found on the website. By combining the images I found on the Internet, I was able to create these product banners. For the promo banners, I designed them by reading their respective descriptions.


I redesigned SkinRX’s Logo. I omitted the swirly line and ‘Face and Body Wellness’ quote and only used ‘Skin RX’ for the final design. The typography I used is ‘Playlist Script’ and the colour I used is a darker red (#9a322d). For the favicon, I only used ‘RX’.


Here are some wireframes ideas for what my Home page layout might look like. We were required by the professor to submit three versions of wireframes for our website.


These are the final wireframes I submitted to the professor which were designed on Adobe Illustrator. However, upon finishing, I realized I was missing some content. I forgot to create a Promos page and also forgot to create individual subpages for the Services page. Since I was already on a time crunch, I went ahead and developed the website from scratch. If you visit the live website, it drastically looks different from the final version. That is because I mixed and matched some parts found in all wireframe versions.


The biggest challenge I faced was developing and coding the website. We were only just introduced to HTML and CSS back then. However, I’ve managed to learn through tutorials. W3Schools, CSS-Tricks, and Tumblr Themes actually helped me. The website is coded in HTML5 and CSS3 with some JavaScript plugins. The website is also fully responsive.

I also did a major revision on the Services subpages after the project since my first version of these subpages actually looks different from the main 6 pages of my website.


I wanted to recreate this layout from Aesthetic Science. However, I encounter some challenges during the revamp. The major one was trying to add the submenus on the featured header. I had to abandon that idea after realizing that I’m going to encounter responsive web design issues in that area. My next idea was to recreate the sidebar menu that’s usually found on blogs. I wanted to keep the sidebar menu found on my first iteration. However, I also had to abandon that idea because I’m having problems with the JavaScript plugins. The only successful recreation I did was the ‘previous and next’ button pages.


Be consistent with your branding: I was aiming for a full-page popup look like the one from ‘Aesthetic Science’ but I encountered problems with the code that I ended up creating separate pages for the different types of services and having a different style in those subpages.

explore work