Here's my Capstone Project to finish up my Dribbble Product Design Course.

About the Project

Lots of young people have through skin concerns and have no idea what to do about it. What if there was a website that could serve to educate them, serve their skincare needs from a commerce aspect, and feel like a fun, welcoming experience? Look no further, GoodSkin has your back.

Personas

Wireframes

Let's bring that product idea to life!

Something that I found really challenging was effectively wire-framing for this website. Because I was pushing myself with this project, I could tell that my skills were getting a bit better as I was making the website, so midway through the design, I had realized my wire-framing was completely off for product pages, the margins weren't large enough, it looked cramped...

Overall it was pretty rough, but I made some changes to the layout, removed a column of products off the product pages, centred it all, and in my opinion, it looks much cleaner without all the clutter, but still stays true to the main idea behind the product.

I will say that at the time of designing, and into the early stages, I struggled with a less is more approach for wire-framing, and using whitespace as a tool in design. Because of this, product pages, and checkout flows were incredibly difficult, so I sought other tools and resources on figma community. Below are some of the wireframes I used, and very quickly I noticed that they would work in a oinch, but some things stood out to me.

Here I noticed that the scale of each item was exactly what I was looking for, and what I struggled with the most on my own, but I noticed the margins were uneven, spacing was a bit off, and they pages weren't scalable. Not to mention they weren't the right size frames to work with my other pages and prototypes.

So I altered the size of frames, applied my own margins and grids, and edited the wireframes until they worked with the look of the site I already had.

Inspirations & Moodboard

The main visual inspiration behind this site was fun shapes and colour, to deviate completely from what common skincare websites look like already -- Functional and boring. Sephora can afford to be plain, because the people shopping there have more disposable income and know what they're doing. Think of anything a teenager uses and ask yourself, does it cater to convenience/functionality or fun? Fun every time.

I wanted to cater to that and serve the need for functionality in the way other skincare websites do, but draw in my target demographic (young women) with fun colours, shapes, and casual language.

Iterations

Once the initial visual design was conceptualized, it went through many slightly different iterations and largely different iterations, but I found that soft colours worked the best, what hues worked well together, and the layouts came together with time and hard work.

Final Visual Design

And here's the finished product!