Brandy Melville Redesign/ App design
A minimalist e-commerce revamp for the modern Brandy Girl
“For the modern-day cool girl who scrolls with style.”
Role: UX/UI Designer | Timeline: 3 weeks | Tools: Figma, FigJam, Google Forms
Overview
Brandy Melville’s website is widely used by Gen Z shoppers, yet its current experience felt outdated, cluttered, and hard to navigate on mobile.
This solo concept project reimagines Brandy’s digital storefront with an elevated, mobile-first experience that’s clean, scrollable, and aligned with the brand’s nostalgic-meets-modern aesthetic.
Problem
Despite its trendsetting reputation, Brandy Melville’s website lacked basic e-commerce features:
- No filtering or search
- Infinite scroll that frustrated users
- Poor mobile optimization
- No wishlist or cart-saving ability
My goal was to reimagine the site for the way real users shop today—on their phones, quickly, and visually.
Design goals
Introduce a filterable collection menu
Add search and wishlist functionality
Optimize layout for mobile
Maintain Brandy’s editorial, minimalist feel
Create an easy, fast shopping flo
Solution
To modernize Brandy Melville’s outdated e-commerce experience, I redesigned the site with:
Clear navigation — added filters, categories, and a search bar
Mobile-first design — optimized layout for fast, one-handed browsing
Wishlist functionality — allowing users to save favorites and return later
Soft, editorial aesthetic — refined typography, muted palette, large product imagery
Streamlined product pages — size guide, “pair it with” features, and intuitive CTAs
The final result is a stylish, intuitive shopping flow that feels just as cool as the Brandy Girl.
User Persona
Emily is an 18 year old fashion-forward Gen Z female who values aesthetics, fast shopping, and intuitive navigation.
“I’ll scroll Brandy’s site while walking to class or in bed at night. I don’t always buy something, but I’ll save stuff I like or send it to my friends. If it’s cute and easy to find, I’m adding it to my cart.”
Goals:
-
Quickly browse new arrivals and “vibe-based” categories
-
Save cute items to wishlist or screenshot for inspo
-
See styling ideas without leaving the product page
-
Have a fast, aesthetic mobile experience
Frustrations:
-
No filters = hard to find stuff she actually wants
-
Too much scrolling = feels cluttered and disorganized
-
No wishlist or sizing info = hesitates to buy
-
Site feels outdated compared to her vibe
UX Implications:
-
Add “Shop by Vibe” tiles for faster entry points
-
Include wishlist, fit model info, and clean filters
-
Prioritize mobile-first layout with editorial visuals
-
Stick to Brandy’s aesthetic (neutral tones, lots of white space, organic scrolling)
Wireframes & User Flow
-
Sketched wireframuser flow and wireframes to map out:
-
Home → Collection → Product → Wishlist → Cart
-
Prioritized a clean top nav, collapsible filters, and large image cards
.png)
Mobile Home
-
Banner carousel (new drops, promos)
-
"Shop by vibe" scrollable tiles
-
Search bar in sticky header
Collection Page
-
Sort + filter (style, size, color)
-
Grid layout with quick-view hover
Product Page
-
Large image slider with zoom
-
Size guide pop-up
-
“Pair it with” recommendations
-
Wishlist button
Wishlist
-
Logged-in users can save items
-
Encourages return visits and sharing
Cart
-
Logged-in users can save items in cart
-
Save for later button encourages return visits and sharing
-
Continue shopping button brings users back to homepage
Design choices
Typography
Playfair Display for headers
Quicksand for body
Color palette
Palette Vibes: soft, minimalistic
Primary background: Cream White (#FFF9F5)
Accent elements: Soft Blush & Muted Rose
Text (light bg): Ink Black or Stone Gray
Hover states / dividers: Pale Taupe or B8B8B8
Layouts
Editorial-style image grids, sticky nav, responsive cards
Components
Usability Testing (5 participants)
-
Tasks: Find a hoodie, add it to wishlist, check out
-
Insights:
-
All found filters intuitive
-
Wishlist was “fun” and “motivating”
-
One suggestion: “Add fit model info” → Implemented!
Results & Takeaways:
✔ Improved navigation and browsing speed
✔ Design aligns with Brandy’s aspirational yet accessible identity
✔ Learned the importance of balancing brand aesthetic with UX standards
Next Steps:
-
Expand redesign to checkout and post-purchase flow
-
Explore dark mode or seasonal themes
-
Incorporate social integration (IG looks, UGC)
Results & Reflection
Case Study: HAVN
A Trust-Based Sublet App
Want to live with someone who doesn’t steal your oat milk?
HAVN is for every young person who's ever felt unsafe or unsure during a housing search.
“Because home should feel like home.”
Project Overview
HAVN is a mobile-first platform designed to help young renters safely find and sublet rooms with trustworthy roommates. This project was inspired by my own experience subletting in NYC—where scams, ghosting, and sketchy roommate situations were far too common. My goal was to create a smoother, safer experience for people like me.
Problem
The current subletting experience—especially in big cities like New York—is fragmented and stressful:
-
No way to verify if listings or people are legit
-
Lack of transparency about roommates
-
No protection when sending deposits
-
Listings are often cluttered, outdated, or unaesthetic
“I just want to find a place where I feel safe living and actually vibe with the people.”
Solution
To address the trust, transparency, and usability issues in the subletting process, I designed a mobile-first platform that prioritizes verified listings, roommate compatibility, and safety — all within a soft, Gen Z–friendly interface.
Design goals
Prioritize safety and trust (verified profiles, social links, deposit escrow)
Highlight roommate transparency
Maintain a soft, aesthetic interface that appeals to Gen Z and young millennials
Create simple, swipeable flows to make browsing easy on mobile
Key insights
Trust is more important than rent price
Users want to see who they’ll live with
Video tours and “vibe” tags are highly requested
Safety and communication are key to commitment
Target Users
Wireframes & Early Exploration
Home → Filter Listings → View Listing → View Roommate → Message or Request Tour → Apply → Confirm Match
Feature Highlights
-
Verified listings with photo ID and optional social links
-
Roommate profiles with interests, lifestyle tags, and mutuals
-
Listing vibe tags (e.g. “girlies only,” “clean freaks,” “quiet home”)
-
Filters by move-in date, room features, length of stay
-
Secure deposit system (escrow-like protection)
-
In-app video tour requests or FaceTime options
UI Design
Design choices
Typography
Droid serif display for headers
Layouts
Editorial-style image grids, sticky nav, responsive cards
DM sans for body
Color palette
Moodboard: Inspired by clean rental platforms like Airbnb with a warmer, more social twist.
Color Palette:
Case Study: ZeroDoor UI/UX: an AI powered real estate site
R
Real Estate. Smarter.
Your AI-powered real estate hub. Buy, rent, or sell smarter—without agents or fees.
Role: UX/UI Designer | Timeline: 1 weeks | Tools: Figma
Overview
— ABOUT ZERODOOR — ZeroDoor is a startup that is reimagining the real‐estate journey end‐to‐end. In one
digital hub, buyers, sellers, and renters can discover properties, compare investment metrics,
line up financing, negotiate, and e‐sign contracts—all without traditional agents or hidden fees.
At the center is Agent Zero, a conversational AI that filters listings, answers market questions,
and guides users step‐by‐step to closing.
Problem
Users need a clear, modern interface that:
-
Quickly communicates ZeroDoor’s value proposition
-
Allows easy exploration of listings with smart filters
-
Enables seamless toggling between browsing and chatting with the AI agent
Design Goals
-
Mobile-first, accessible (WCAG AA)
-
Neutral palette with a single, consistent accent color
-
Reusable components & strong hierarchy
-
Concise copy — let visuals and data speak
UX/ UI Design
Home Screen
Features:
-
Bold value proposition: "Buy, rent, or sell real estate with zero hassle"
-
Primary CTA buttons: Buy | Rent | Sell
-
Search bar with expandable filter chips: Price, Beds, Baths, Distance, Safety, School Quality, Nightlife
-
“For You” carousel of recommended listings
-
Floating “Ask Agent Zero” button for immediate AI help
Why it works:
Users can immediately understand what ZeroDoor offers and start exploring with smart filters and recommendations. The floating button ensures Agent Zero is always within reach.
.png)
Property Detail Screen
Features:
-
Valuation graph
-
Comparable properties
-
Neighborhood data: Safety, Schools, Nightlife
-
Prominent Start Contract CTA
Why it works:
Data-driven visuals help users make decisions quickly. The clear CTA supports ZeroDoor’s mission to enable faster, agent-free transactions.
.png)
Agent Zero Chat Screen
Features:
-
Persistent chat panel with conversational flow
-
Dynamic results section with listing cards alongside chat
-
Chip suggestions to refine the query (e.g., “Increase Budget”, “Expand Search Area”)
-
Quick actions on each listing: Save · Share · Schedule Tour · Start Contract
Why it works:
The chat screen feels like an extension of the browsing experience, not a separate one — reinforcing seamlessness. Users can see both their chat and updated results in one view.
.png)
Visual Design
-
Clean, white background with a calm, trust-building blue accent
-
High-contrast text and buttons for accessibility
-
Friendly but professional typography
-
Consistent UI patterns and components
-
Minimal distractions — focus stays on data & listings
Results & Reflection
Outcome:
I created an accessible, creative solution that aligned with ZeroDoor’s mission and vision. It showcases how an AI-driven platform can still feel intuitive and human-friendly.
Next steps:
I’d refine the flows with real user testing and iterate on micro-interactions and animations for the AI experience.
Case Study: Revive— AI-Powered Personalized Wellness App
R
Feel good. Stay balanced.
Revive helps you build better habits for your body & mind — all in one calming app.
Role: UX/UI Designer | Timeline: 2 weeks | Tools: Figma, ChatGPT Open AI (concept)
Overview
Revive is a holistic health and wellness app designed to help users build and maintain healthy habits with ease and confidence. The app combines fitness, sleep, nutrition, and mindfulness tracking into a single, calming experience — eliminating the need for multiple disjointed tools.
Through personalized goals, daily check-ins, and guided practices, Revive empowers users to take small, consistent steps toward better well-being. With its clean, approachable design and intuitive interface, Revive makes wellness feel less overwhelming and more achievable.
Problem
Most wellness apps today rely on static programs and generic advice, failing to adapt to individual users’ progress, lifestyle, and needs. This leads to frustration, drop-off, and poor long-term engagement.
Design goals
Create an intuitive, modern app that feels like a trusted guide to holistic wellness — personalized, approachable, and calming.
Solution
To combat common user frustrations, I designed a
seamless mobile app that allows users to:
-
Set & track personalized wellness goals
-
Log daily habits in one place (sleep, fitness, nutrition, mindfulness)
-
Enjoy a calming, modern interface that promotes consistency and peace of mind
-
Visualize progress and reflect on their wellness journey
Process
Research & Discovery
Competitive analysis of major wellness apps including MyFitnessPal, and Strava revealed cluttered dashboards, narrow focus, dated UIs, and overly complex onboarding.
User interviews with 5 health-conscious young professionals highlighted the need for simplicity, personalization, and a calming tone.
Defining the User
Emily, 26 — Marketing Professional
“Wellness isn’t just about workouts — I want to feel good in all areas of my life, and I need something that keeps me on track without overwhelming me.”
Goals: Stay consistent with wellness habits despite her busy schedule
Pain Points: Overwhelmed by conflicting advice and juggling too many apps
Ideation & User Flow
Sketches and flows focused on minimizing friction while integrating key trackers:
Onboarding → Select wellness goals → Personalized dashboard → Track & reflect
UX/UI Design
Visual Style:
Soft muted greens & blues for calmness
Clean sans-serif typography
Generous spacing and subtle gradients to avoid clutter
Core Screens:
-
Home Dashboard
-
Daily Check-In
-
Sleep & Mood Tracker
-
Meditation & Breathing Exercises
-
Progress Analytics
Onboarding screens
Homepage
.png)
Meditation
.png)
Sleep Tracker
.png){kind=tracking}
Progress
Testing & Iteration
-
Usability testing with 3 users showed:
-
Positive emotional response to the look & feel: “It actually makes me want to use it.”
-
Improved navigation labels for clarity
-
Added confirmation states for actions like logging a workout
Impact & Takeaways
-
Designing for emotional state is crucial in wellness apps — calming, intuitive interfaces matter as much as functionality.
-
Users value integration and simplicity over feature bloat.
Next Steps
-
Social features: connect with friends, join challenges
-
Wearable integrations (Apple Watch, Fitbit)
-
Deeper AI-driven personalization
R
Tap in to your best self
gemini.ai is your cosmic life coach — blending AI intuition, astrology, and mindfulness to guide you through life’s ebbs and flows. ✨
Product Concept: gemini.ai
Role: UX/UI Designer | Timeline: 2 weeks | Tools: Figma, ChatGPT Open AI (concept)
Overview
Gemini.ai is an AI-powered life coaching companion that helps users align their mindset, energy, and daily habits through short, reflective conversations.
Blending astrology, psychology, and personalized AI guidance, Gemini.ai encourages self-awareness and gentle productivity — offering a safe, intuitive space to check in, reflect, and realign. ♊️✨
Problem
In the digital age, people are constantly overstimulated yet emotionally disconnected — toggling between endless productivity tools and wellness apps that lack genuine human connection.
Users want to feel guided, not managed. They crave daily support that’s empathetic, intuitive, and personalized — something that understands their energy, not just their schedule.
Design goals
Humanize AI: Create conversations that feel warm, emotionally intelligent, and supportive — like chatting with a mindful friend.
Encourage Reflection: Help users pause, self-check, and gain clarity through micro-journaling and intentional prompts.
Visual Calm: Design a serene interface inspired by astrology and minimal UX principles — soft gradients, intuitive flow, and zero overwhelm.
Personalization: Integrate astrology (moon phases, zodiac insights) and emotional data to tailor each session’s tone and prompt.
Habit Formation: Make reflection frictionless and rewarding — users can track mood patterns and celebrate small emotional wins.
Solution
Gemini.ai transforms emotional wellness into a daily conversational ritual.
Through a blend of AI chat and reflective journaling, the app offers:
✨ Daily energy check-ins based on mood + moon phase
🌿 Guided reflections with affirmations and micro-actions
💫 Personalized tone matching, adapting to user emotion and communication style
🌸 Astrology-infused insights that connect users to timing, cycles, and balance
📊 Mood and intention tracking, visualizing growth over time
The result: an AI companion that doesn’t just talk to users — it understands them. Gemini.ai helps people build calm, confidence, and clarity in just a few mindful minutes a day.
⚡️ User Persona
Name: Sofia R.
Age: 25
Occupation: Creative freelancer
Archetype: The self-aware dreamer
Goals:Build emotional balance and self-discipline
Develop consistent reflection habitsFeel guided and grounded without pressure
Pain Points:Overwhelmed by self-help tools that feel generic
Struggles to balance creative flow with focus
Wants daily affirmation and light accountability
Quote:“I just want a space to breathe, reflect, and feel like I’m still growing — even on slow days.”
User Flow
1. Onboarding:
User enters birth date + selects themes (balance, focus, confidence, clarity).
2. Daily Check-In:
Prompt appears: “Hey Christina, how’s your energy today? 🌙
”User selects mood → AI sends reflection prompt based on mood + moon phase.
3. Reflection
Chat: Conversational thread begins: empathetic dialogue → mini journal entry → affirmation.
4. Insight View:
User sees mood graph + reflection streaks; app celebrates small wins (“3-Day Clarity Streak 🌿”).
5. Growth Tracking:Over time, Gemini.ai visualizes emotional patterns and helps users identify their best daily rhythms.
UX/UI Design
Visual Style:
Color System
Midnight Sky #0B0E2C–#1B1B2F (gradient base) Backgrounds, hero sections, app shell
Lavender Mist #CFC7F5 Accents, icons, soft highlights
Soft Peach → Magenta Gradient #FDEBE6 → #E05BEB Primary CTA gradient (“Begin / Continue Your Journey”)
Gemini Gold #F2DFA7 Sun sign, highlights, energy indicators
Sky Blue #8AB6FF Progress bars, moon elements, calm indicators
Cloud White #FAFAFA Primary text on dark backgrounds
Supporting Greens / Reds / Pinks #6EE7B7, #F87171, #FBB6CE Used for element or coaching style badges
✨ Palette Intent: The combination of dark cosmic blues and glowing gradients creates a serene, celestial atmosphere — reinforcing introspection, spirituality, and optimism.
Core Screens:
-
Welcome / Onboarding:
Introduces brand and purpose with cosmic visuals, tagline, and CTA — “Begin Your Journey.” -
Birth Chart Setup:
Collects date, time, and location; uses clean forms, progress bar, and gradient button for trust + flow. -
Cosmic Blueprint:
Displays personalized astrology results (Sun, Moon, Rising, Element) using color-coded cards and icons. -
Focus Area Selection:
Lets users choose priorities — Love, Career, Confidence, or Wellness — with glowing selectable cards. -
Coaching Style Selection:
Tailors AI tone (Grounded, Encouraging, Reflective, Direct) with astrological personality cues. -
Home Dashboard:
Central hub for insights, “Ask Oracle,” chart readings, and daily AI guidance cards. -
Chat Interface (Future Phase):
Conversational space with mood-based prompts, affirmations, and reflective journaling.
Typography System
Primary Typeface: Inter — clean, legible, and modern; ideal for body and forms.
Secondary Typeface: Poppins / Satoshi — geometric sans for headers and onboarding titles.
Scale:H1: 28–32 px / 700 weightH2: 22–24 px / 600Body: 16 px / 400Caption / Labels: 13–14 px / 500
Tone: Friendly and confident — minimal decorative fonts to emphasize trust and clarity.🧩 Component Design
Buttons
Primary CTA: Rounded-corner pill (8–12 px radius) with gradient fill from Soft Peach → Magenta.Text: White #FFFFFFHover: subtle glow / expand 1–2 pxSecondary CTA: Solid Lavender Mist or outlined in Lavender Mist with white text.
Background: Deep Midnight Sky variant #12142BBorder: Lavender Mist 15–20% opacityActive: Highlighted in gradient blue or Gemini Gold
Rounded corners, high padding for touch accessibility
Progress IndicatorsHorizontal progress bar with gradient left-to-right from Sky Blue → Lavender Violet, reinforcing motion and growth.
Minimal percentage label aligned right.
Cards / ContainersSoft shadow (0 px 4 px 16 px rgba(0,0,0,0.25))Subtle gradient overlays depending on content type (Sun = Gold, Moon = Blue, Rising = Pink)Consistent spacing (16–20 px) and large iconography to reduce cognitive load🌸
Brand Essence
Gemini.ai’s design system merges futuristic AI precision with astrological softness — cosmic gradients meet clean typography. The UI builds trust through consistency and emotion through color, making reflection feel both guided and personal.“Cosmic meets minimal — where mindfulness feels modern.”
Onboarding screens
Home screen
Goals
Sleep Tracker
Coach
Journal
Profile/ settings
User Testing Objective: Validate the usability, tone, and emotional resonance of Gemini.ai’s onboarding and chat experience. Method: Conducted 5 moderated remote tests using the interactive Figma prototype. Participants: 3 female, 2 male (ages 22–30) interested in mindfulness, astrology, or journaling. Tasks: Complete the onboarding flow (birth chart + preferences). Interpret their “Cosmic Blueprint.” Engage in a short reflection chat with the AI coach. Key Findings: 🌟 Tone Resonated: All testers described the experience as “comforting,” “motivational,” or “soothing.” 🪞 Strong Visual Recall: 80% remembered their sign cards (color-coding boosted memorability). 🔮 Smooth Flow: The 5-step onboarding felt “guided” rather than tedious — progress bar reduced friction. 🧘 Improvement Opportunity: Some wanted optional “quick start” mode or skip for non-astrology users. Next Steps: Add “Skip Birth Chart” option for non-astrological users. Integrate soft vibration / haptic cues on mobile for emotional feedback. Refine tone variants (Encouraging vs Reflective) using adaptive sentiment tagging.
Summary
Gemini.ai blends AI coaching with astrological insight to create a mindful, emotionally intelligent reflection tool.The experience moves users from curiosity → personalization → daily reflection — forming a consistent ritual of self-awareness.Impact:Transforms emotional check-ins into short, meaningful micro-rituals.Demonstrates how AI can be empathetic, aesthetic, and accessible.Bridges tech and spirituality in a visually calm, future-forward design system.🌕
Reflection
This project reminded me that design isn’t just about clarity — it’s about emotional calibration.Every color gradient, microinteraction, and tone of voice shaped how users felt supported by AI.I learned that:Empathy is a design system, not a feature.Visual language can mirror emotional states — Lavender for calm, Gold for clarity, Blue for intuition.Thoughtful UX can make emerging technology (AI, astrology, self-coaching) feel human and safe.“Gemini.ai taught me how to design for stillness — not just engagement.”
Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started