Ben McCoy

Poppins

Mobile Application for Childcare Networking

Design Language &

Visual Direction




Goal: Project warmth, trust, and simplicity — appealing to parents and caregivers.


Core Visual Style:

  • - Modern pastel palette: Soft gradients of mint, blush, and
  • sunshine yellow for calmness and
  • warmth.
  • (Example: #A8E6CF, #FFD3B6, #FFAAA5,
  • #DCEDC1, #5E6472.)
  • - Rounded geometry: Keep all buttons, cards, and avatars rounded
  • (16–24px radius) to signal friendliness.
  • - Depth through subtle shadows: Replace flat dividers with soft
  • elevation shadows.

  • Typography:
  • - Header: Poppins SemiBold (brand-consistent).
  • - Body: Nunito Regular for approachability and readability.
  • - Contrast ratio target: 4.5:1 minimum for accessibility.


Layout & Navigation




Header area:

  • - Replace the large grey bar with a floating top navigation that
  • slightly overlaps the content.
  • - Keep the Poppins umbrella logo centered, but introduce a
  • smaller hamburger icon with a softer drop shadow.
  • - Use animation transitions for screen changes — slide-in from
  • right for new pages, fade for modal confirmations.

Bottom navigation:

  • - Simplify with a translucent frosted-glass effect (backdrop-
  • filter: blur(12px)).
  • - Active icon uses the brand’s accent color (#00BFA5), while
  • inactive ones use soft neutral gray.


Availability Screen

Before:

Rigid grid, inconsistent spacing, low visual hierarchy.

After:

  • Use profile cards with horizontal layouts:
  • - Avatar on left (60–72px diameter).
  • - Name, rate, and rating grouped neatly in a single column.
  • - Location or “distance” represented by a colored map pin
  • icon rather than small map tiles.

  • Replace “map thumbnails” with a small badge (e.g. “1.2 mi away”) — then add a “View on Map” button at bottom of screen for spatial overview.

  • Introduce filter chips instead of icons (Distance • Rate • Reviews • Friends):
  • - Interactive, toggles with light gradient fill.
  • - Sticky horizontal scroll bar for filters.


Caregiver Requests Screen

Before:

  • Overlapping colors and inconsistent visual weight.


After:

  • Each request becomes a card with color-coded urgency:
  • - Red → “Now”
  • - Orange → “Soon”
  • - Mint → “Later”

  • Avatar aligned left with name + short message preview.

  • Replace the “+” icon with a rounded “Respond” button using accent color.

  • Add a small timestamp (“2 hrs ago”) for temporal clarity.

  • “Find a Caregiver” section:
  • - Use segmented toggle buttons (Now / Soon / Later) with
  • gentle shadows and hover states.
  • - Add small icons (⏱️ clock, 🌤️ sun, 🌙 night) for better
  • emotional resonance.

Confirmation Screen

Before:

  • Plain, low contrast, lacks hierarchy.


After:

- Use a centered confirmation illustration (flat vector style

— e.g., caregiver with child).

- Display “Confirmed!” in large, rounded typography with a

confetti or checkmark animation.

- Convert the date/time/rate boxes into pill-shaped info

badges.

  • - Add a “Share confirmation” CTA for calendar sync or text
  • sharing.

Profile Screen

Before:

  • Vertical chain of avatars feels dated.


After:

  • Replace “connection ladder” with a horizontal scrollable carousel:
  • - “1st Level” • “2nd Level” • “3rd Level” cards with small circular
  • avatars and dotted connecting lines.
  • - Map section redesigned as a mini map module with
  • interactive radius visualization.
  • - Use iconography with light outline style and consistent
  • stroke width (24px, 1.5px stroke).
  • - “Book Me” → replace with rounded primary button
  • (#FF6F61) and microtext: “Confirm & Message”.

Search Filter / Urgency Screen

Before:

  • Flat teal layers with low differentiation.


After:

  • - Use collapsible filter sections with soft shadows and clear
  • spacing.
  • - Replace checkboxes with pill-shaped toggles (selected →
  • color fill; unselected → outlined).
  • - Include a live preview map at bottom that updates as
  • filters are adjusted.
  • - Replace “Post” button with “Publish Request” (rounded,
  • animated hover).

  • Interaction & Motion Enhancements





  • - Microanimations for state changes (favorite, confirmed, etc.).
  • - Button tap feedback: subtle scale-up and color pulse.
  • - Screen transitions: fade-slide combo (400ms).
  • - Floating action buttons (FABs) for primary calls like “+ New
  • Request”.


Accessibility & UX Refinements




- Ensure all text contrast > 4.5:1.

- Add voice-over labels for all icons (“Favorites tab”, “Confirm

booking”).

- Larger touch targets (min 44px).

  • - Gentle haptic feedback on key actions (confirm, send, favorite).


Summary Tagline






“Poppins — Care that Connects.”

A friendly, trustworthy platform that feels human-first, blending warmth, clarity, and modern usability.

Best Friends

Responsive Application

for Pet Adoption

Design Vision




Goal: Make adopting pets feel warm, intuitive, and story-driven —

not transactional. Think: “Tinder meets storytelling” — a clean

UX powered by empathy and personality.


Visual Mood:

  • - Friendly minimalism: Soft neutral backgrounds with bursts of
  • cheerful color (orange, coral, mint).
  • - Organic shapes: Rounded cards and gentle elevation to convey
  • approachability.
  • - Vivid photography: Center each pet’s personality — close-up
  • portraits, minimal text.

  • Typography:
  • - Headers: Poppins Semibold
  • - Body: Nunito Regular
  • - All text high-contrast and large enough for mobile-first use.



Home Screen

Before:

  • Dense with filters and mixed UI patterns.


After:








  • - Hero area featuring a “Meet your next best friend” message and
  • carousel of adoptable pets.
  • - Replace the stacked filter chips with playful icon-based tiles (Dogs,
  • Cats, Rabbits, etc.), using subtle animations.
  • - Below: Quick categories (“Puppies,” “Seniors,” “Good with Kids”) as
  • rounded gradient buttons.
  • - CTA: Prominent “Start Searching” button centered with motion
  • feedback.

Interaction

Upgrade:


  • Soft horizontal scrolling and card parallax for engagement.



Adoptables / Pet Browser Screen

Before:

Polaroid-style cards stacked with harsh drop shadows.

After:








- Switch to horizontal swipe cards (Tinder-style interaction).

- Clean white cards with subtle drop shadows and rounded corners

(16px).

- Focus on large portrait photos, full-bleed, with minimal text overlay:

  • – Pet name
  • – Age, gender, location
  • – Small icon row for tags (friendly, vaccinated, good with kids)
  • - Replace large icons below with floating circular buttons:
  • ❌ skip • ℹ️ info • ❤️ save.

UI detail:


  • Add subtle micro-animations when liking, skipping, or viewing details (bounce, fade, swipe).



Bio / Pet Profile Screen

Before:

Basic card layout with blocky sections and static info.

After:








- Full-screen, edge-to-edge pet portrait at top with gradient overlay.

- Add soft scrolling header animation (pet name and details slide up as

you scroll).

- Replace orange boxes with expandable, collapsible info panels:

  • – “Personality & Behavior”
  • – “Medical History”
  • – “Likes & Dislikes”

- Add an “Adopt Me” button that anchors persistently at the bottom with

soft glowing feedback.

  • - Include a story element: short quote from volunteers (“Artie’s tail never
  • stops wagging”).

Bonus:


  • Photo carousel with heart icons for favoriting.


Search Filter Screen