CD Foundations: Interactions — Assignment #1
A Website Style Guide — clean, confident, vegan beauty, told in color.
scroll ↓
Before We Begin
This semester, I hope to improve my web design and coding skills and become more confident creating websites. I learn best with structure and clear guidance, but I also like the freedom to experiment and be creative with my own ideas.
Professionally, I hope to develop skills that combine makeup, branding, photography, and web design into a strong visual identity for a beauty brand. By my graduation exhibition, I want a portfolio that shows both my creativity and my ability to build a complete brand experience — and to become comfortable enough with coding to build and maintain that portfolio myself.
01
To showcase MSF Beauty's makeup products and turn visitors into confident, repeat customers through a clean, trustworthy shopping experience.
Every other decision on the site — the photography, the navigation, the copy — is built to support that single intent. The site isn't trying to be a magazine or a community first; it is trying to sell well-made, clean beauty products while making the brand's values impossible to miss.
02
MSF Beauty's voice stays consistent across the whole site. It should read as:
The brand should feel luxurious without being intimidating. It should make customers feel confident, beautiful, and comfortable exploring the products.
03
Voice stays constant; tone shifts by context.
04
MSF Beauty will have a clean, modern, feminine, and luxurious identity. High-quality beauty photography will be an important part of the brand. The overall brand should communicate quality, confidence, beauty, and simplicity.
This page trades the brand's real neutral palette (cream, blush, brown, black — used on the live site) for a bold, colorful treatment, as an experiment in how far the identity can stretch.
05 – 06
Three composite sketches of who lands on the MSF Beauty homepage, and why.
Discovers brands through her feed, decides with her eyes.
Maya finds new makeup brands through TikTok and Instagram. She wants products that look beautiful and feel easy to understand, without a steep price tag. MSF Beauty's clean layout and strong product photography are what stop her scroll in the first place.
She heads straight to Best Sellers, then checks Customer Photos and reviews before buying. If the experience feels smooth and honest, she'll return when new products drop.
Evaluates a brand the way she'd shoot it.
Sofia is always hunting for new products to feature in her content, so she notices visual identity and photography quality before anything else. MSF Beauty's professional imagery reads as "shoot-ready" to her.
The Customer Photos section doubles as an invitation — she may post her own look there, turning her into a repeat visitor and free marketing.
Reads the label before she reads the headline.
Maria cares about what's actually in the products she buys and whether a brand's sustainability claims hold up. She is the persona least moved by pretty photography alone.
For Maria, Brand Values and Our Story aren't a nice-to-have — they're the deciding factor that turns her from a researcher into a repeat customer.
08
The homepage content broken down and labeled by module.
| Module | Label | Copy |
|---|---|---|
| 01 | Header — Logo | MSF Beauty |
| 02 | Header — Nav | Shop · Best Sellers · About · Search · Cart |
| 03 | Hero — Headline | Beauty Made for You. |
| 04 | Hero — Subhead | Clean, modern beauty essentials designed to make you feel confident in your own skin. |
| 05 | Hero — CTA | Shop Now |
| 06 | Categories | Face / Eyes / Lips / Cheeks / Tools |
| 09 | Brand Values | Vegan — Cruelty-Free — Clean — Sustainable |
| 13 | Email Sign-Up — Headline | Stay in the Glow |
| 14 | Email Sign-Up — Subhead | Sign up for beauty updates, new launches, and exclusive offers. |
09
My inspiration site, Reale Actives, is an acne-focused skincare line founded by Alix Earle, not a makeup brand — so alongside it, I'm comparing MSF Beauty to two real makeup competitors: Rare Beauty and Glossier.
| Site | Voice & Brand | What MSF Beauty Can Learn |
|---|---|---|
| Reale Actives | Confessional, founder-led, results-driven. | Use Our Story and Brand Values to earn skeptical buyers like Maria. |
| Rare Beauty | Warm, inclusive, values-forward. | Weave values through the whole site, not just one module. |
| Glossier | Casual, community-driven, minimal. | Validates the Customer Photos module — UGC converts Maya and Sofia. |