Peau
A website designed and coded from scratch
Role: leader designer and engineer
February 2024 - May 2024
01. how we started
Created over the course of a semester-long web programming class, Peau is an online resource for skincare advice and products. The concept was created by my teammates with the belief that too many current skincare websites are ad-based and don’t put the client first in the way we believe they should. Peau is a resource for users seeking to learn more about different skin types, and customize care based on their unique skin. Once the idea for the product was established, I joined the team as the most senior member to lead design and advise coding best practices.
02. the vision
We wanted to create a site based on the 3 different skin types recognized by dermatologists, and allow them to guide our information and product recommendations. There is a hole in the market between individually-personalized, extremely expensive skincare advice, and websites that give the same generic advice to everyone. Our idea was to fill that gap with a site that acknowledges that people have different skin and different needs, and that these needs are not static but evolve over time. We wanted to present information in a way that was interactive and intuitive to users, and help them discover what works best for their skin.
03. main feature
We built our website around a skin type quiz that one of my teammates coded; she researched the main causes and signs of the 3 different skin types and created an online quiz that could give you personalized results about your skin type. Once we had our central feature, my team brainstormed what we wanted the rest of the experience to look and feel like. We decided users should interface with our quiz as one of the first things on our website, and from there we could direct them to different pages containing the information relevant to their results. We also asked sample users what features they would like to see, and many responded positively to the idea of a skin journal where they could keep track of the changes and progress of their skin.
04. visual design
I created low fidelity wireframes of the different pages we knew we wanted, and then created some additional pages that would simplify the interfaces between the pages. Once the details were ironed out I transitioned to high fidelity designs to flesh out the identity of the website. Although our target audience was majoritively female, we wanted a design that was sophisticated and not overtly feminine so as not to alienate users that were looking for practical information and not a beauty blog.
I designed the pages with a warm color scheme and elegant photos for a clean feel, and laid out each page to create the most intuitive user experience possible. Our website includes links to purchase from so we wanted to ensure as high a conversion rate as possible. I coded small demos and mockups to show my team and once we were all satisfied with the design, we divided the coding work between us and got started.
05. coding work
As the lead designer I took on coding the 3 skin type pages as I wanted to ensure that reflected the initial design as closely as possible. I also took responsibility for the skin diary page, ensuring the design matched what my teammates had envisioned. I created and connected MongoDB databases with Atlas so that responses to the skin type quiz were recorded and stored and could be displayed on the skin diary page. I configured the php files of the diary to be able to process the responses of the quiz page and also of itself, so that on the same page you could add and update a wishlist feature. In total, my coding work involved a combination of HTML, CSS, and JavaScript, along with AJAX for dynamic content loading.
06. takeaways
Because my coding responsibilities involved sections of the website with the most interactivity and connectivity to other pages, I worked closely with my teammates to ensure that our code was as clean and compatible as possible, and served as a coordinator between the 4 of us. Being involved with a digital product from concept, through design, and then development was a valuable experience in how each step of the product life cycle is key and how to ensure each step flows cleanly into the next. I loved being responsible for an entire product, and hope to continue being able to work on projects cross functionally as designer, coder, and all other roles I can.