CD Foundations: Interactions — Assignment #1
MSF Beauty
A Website Style Guide
Before we begin
What I hope to achieve this semester
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
Intent
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
Voice
MSF Beauty's voice stays consistent across the whole site. It should read as:
- Confident
- Feminine
- Modern
- Elegant
- Creative
- Friendly
- Sophisticated
The brand should feel luxurious without being intimidating — the goal is for a customer to feel invited in, not sold to. Confidence comes from clear, direct language rather than hype; sophistication comes from restraint rather than embellishment.
03
Tone
Voice stays constant; tone shifts by context. Here's how the same brand voice adjusts across the site:
| Home page | Elegant, exciting, welcoming — first impressions matter most here. |
|---|---|
| Product pages | Clear, informative, trustworthy — customers need facts to decide. |
| About page | Personal, warm, authentic — this is where the brand becomes human. |
| Shopping / cart | Simple, helpful, encouraging — friction here costs a sale. |
| Social / customer photos | Fun, inclusive, energetic — this is the community's voice, not just the brand's. |
04
Brand
MSF Beauty's identity is clean, modern, feminine, and luxurious — upscale but approachable, never cold. Consistency comes from a restrained neutral palette and a minimal layout that keeps product photography as the focal point on every page.
Cream#F7F2EC
Blush#E7BFBE
Brown#4A342A
Black#201812
High-quality beauty photography carries most of the emotional weight of the brand; type and color are kept quiet on purpose so the products and the people using them stay the focus.
05
Persona
A website like MSF Beauty's is never speaking to just one person. It's addressed to shoppers browsing on impulse, beauty creators scouting new products to feature, and values-driven buyers researching ingredients before they'll trust a new brand. A persona is a composite sketch of one of these real user types — their habits, motivations, and what they need from the site to say "yes."
Below are three personas built from that thinking, each representing a different reason someone lands on the MSF Beauty homepage.
06
Create 3 Personas
Maya
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.
On the site, she heads straight to Best Sellers, then checks Customer Photos and reviews before she'll commit to buying. If the experience feels smooth and honest, she'll come back the next time a new product drops — social proof, more than the brand's own copy, is what earns her loyalty.
Sofia
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 and consistent styling read as "shoot-ready" to her, which matters for whether she'll bother featuring the brand at all.
She spends her time in the product pages, Our Story, and any social content, and she's likely to return regularly to check for new launches. The Customer Photos section doubles as an invitation — she may post her own look there, which turns her into a repeat visitor and a source of free marketing for the brand.
Maria
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. Before she purchases anything, she researches the brand itself — she is the persona least moved by pretty photography alone.
For Maria, the Brand Values and Our Story sections aren't a nice-to-have, they're the deciding factor. Clear, specific information about vegan, cruelty-free, and sustainable practices — not vague marketing language — is what turns her from a researcher into a repeat customer.
07
Wireframe
08
Copy Deck
The homepage content broken down and labeled by module, the way a client would hand it to a designer for markup.
| Module | Label | Copy |
|---|---|---|
| 01 | Header — Logo | MSF Beauty |
| 02 | Header — Primary 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 | Category Labels | Face / Eyes / Lips / Cheeks / Tools |
| 07 | Best Sellers — Module Title | Best Sellers |
| 08 | Best Sellers — Card Fields | Product photo, product name, price, customer review, add-to-cart |
| 09 | Brand Values — Statement | Vegan — Cruelty-Free — Clean — Sustainable |
| 10 | Our Story — Module Title | Our Story |
| 11 | Our Story — Body | Short introduction to MSF Beauty's history and purpose — why the brand was created and what it believes about beauty. |
| 12 | Customer Photos — Module Title | Customer Photos |
| 13 | Email Sign-Up — Headline | Stay in the Glow |
| 14 | Email Sign-Up — Subhead | Sign up for beauty updates, new launches, and exclusive offers. |
| 15 | Footer — Links | Contact · Social Media · Shipping · Returns · Privacy Statement · Terms and Conditions |
09
Competition
My inspiration site, Reale Actives, is worth a second look here: it's actually an acne-focused skincare line founded by Alix Earle, not a makeup brand. Its site leans on before-and-after imagery, influencer-led storytelling, and clinical-ingredient education — strengths that come from solving a specific skin problem, which isn't MSF Beauty's job. 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 and founder-led; results-driven with before/after proof and ingredient education. | Borrow the trust-building instinct — MSF Beauty can use Our Story and Brand Values the way Reale Actives uses ingredient callouts, to earn skeptical buyers like Maria. |
| Rare Beauty | Warm and inclusive; mental-health and self-acceptance messaging paired with a huge foundation shade range. | Shows how a values message (in their case, inclusivity) can be woven through the whole site rather than isolated to one page — a model for how "clean and sustainable" should show up everywhere, not just in one module. |
| Glossier | Casual, community-driven, minimal; leans on real-customer photos and a "your skin but better" tone. | Validates the Customer Photos module — Glossier built its whole brand on user-generated content, which is exactly what will help convert Maya and Sofia. |
Against this set, MSF Beauty's edge is combining Rare Beauty's values-forward brand with Reale Actives' evidence-based trust-building — while keeping a more minimal, product-first layout than either, closer to Glossier's restraint.