Hero Overview
The hero is a single continuous side-scrolling environment rather than multiple disconnected sections. The user starts outside the room and scrolls through a window into a cozy creative space that represents the destination your nonprofit makes possible. The room is not your office or workshop—it is the kind of space someone can have because they now have access to a computer.
The room is illustrated in a hand-drawn raster style (240px base height) with a custom hand-drawn pixel font. It should feel warm, imperfect, and personal rather than like traditional pixel art or a video game.
The wall itself is effectively the website. Information is integrated into furniture and decorations instead of traditional webpage sections, but nothing important is hidden behind interactions.
General Design Principles
 One continuous panoramic room.
 Objects are grouped into "corners" rather than isolated sections.
 Each major topic occupies a portion of the wall instead of being confined to one giant object.
 Decorations connect areas together so the room feels cohesive.
 Objects intentionally vary in size.
 Density varies slightly throughout the room but remains relatively consistent overall.
 Windows help break up the wall and give the eye places to rest.
 Decorations should feel naturally placed, not like website filler.
 Interactive objects are optional extras and never required to access important information.
Pre-Hero (1 viewport) (Exclude for now, create from area 1 and below)
Outside the room.
Left:
 Large window looking into the room.
 Warm interior visible.
 Curtains.
 Soft lighting.
Right:
 Logo.
 Main headline.
 One or two sentence summary.
 Primary CTA.
Scrolling moves the camera through the window into the room.
Area 1 — Introduction (~0.8 viewport)
Purpose: Introduce the organization and establish the room.
Elements:
 Small framed mission poster.
 Desk with computer.
 Plant.
 Bookshelf.
 Framed photos.
 Notebook.
 Coffee mug.
 Floating shelf.
 Small decorative objects.
Content:
 Short summary of the nonprofit.
 What the organization does.
 Why it exists.
This area should immediately make the user feel like they've entered a warm, creative space.
Area 2 — How It Works (~1 viewport)
 Approximately 1 viewport width.
 The process is integrated into the room rather than confined to a single object.
 There is no single centerpiece. Attention should be distributed evenly across the process.
 The section is composed of multiple objects that together tell the story.
 The user should naturally follow the process from left to right.
 The room should feel like someone has been planning and documenting the nonprofit over time.
 The environment supports the information rather than containing all of it.
 Important explanatory text is regular website typography placed naturally beside or between objects, while the objects themselves provide visual context and supporting details.
Purpose
Rather than explaining obvious steps ("You donate a computer, we refurbish it"), this section should answer questions the visitor didn't know they had.
Each step should leave the visitor thinking:
 "I didn't know that."
 "That's more complicated than I expected."
 "I'm glad they do that."
 "That answers a concern I had."
Instead of "How It Works," the section should follow the visitor's computer through its journey.
Area 2 Step 1 — Your Computer Arrives
Purpose: Explain what happens immediately after donation.
Objects:
 Medium bulletin board or corkboard.
 Photograph of donated computers.
 Donation receipt or intake form.
 Sticky notes.
 Small arrows leading toward the next step.
Text should explain things such as:
 Every donation is inspected.
 Some become complete refurbished systems.
 Others become parts donors to help repair additional computers.
 Unusable materials are responsibly recycled.
This should be a relatively compact composition.
Area 2 Step 2 — Protecting Your Data
Purpose: Build trust.
Objects:
 Computer monitor showing a secure erase process.
 Clipboard with a QA checklist.
 Sticky notes.
 Small diagram if appropriate.
Possible supporting details:
 Drives are securely erased before refurbishment begins.
 Company asset tags are removed.
 Data privacy is treated as a priority.
Example visual details:
 Clipboard with an inspection checklist.
 Sticky note saying "Remove old inventory labels."
 Monitor displaying a completed secure erase.
Area 2 Step 3 — Preparing for a New Owner
Purpose: Explain refurbishment and quality assurance.
Objects:
 Medium whiteboard.
 Sticky notes.
 Small diagrams.
 Clipboard.
 One or two real photographs if desired.
 Small desk with an open laptop.
The whiteboard should only represent this step, not the entire process.
Possible information:
 Systems are cleaned.
 Components are tested.
 Necessary upgrades are installed.
 Software is prepared.
 Each computer is made ready for immediate use.
Example visual details:
 QA checklist.
 Hand-drawn diagrams.
 Inspection flowchart.
 Hardware sketches.
Steps 2 and 3 should visually feel like one connected workspace.
Area 2 Step 4 — A New Home
Purpose: Show the outcome and explain delivery
This should be the largest and most emotionally impactful step.
Objects:
 Large framed photograph.
 Thank-you cards.
 Drawings or letters.
 Small plant.
 Certificates or recognition from partner organizations.
The photograph should show computers actually being used, not merely handed over.
This also nicely connects into the statistics in the impact section.
Area 3 — Impact (~0.6 viewport)
Purpose: Show the organization's impact.
Mix elements such as 7 segment VFD display counters, monitors, and other creative statistics visualizations.
Statistics could include:
 Computers distributed.
 Computers refurbished.
 E-waste diverted.
 Active volunteers.
Area 4 — Partners (~0.6 viewport)
Connects with the previous section.
Purpose: Display organizations that work with the nonprofit.
Centerpiece:
 Bookshelf.
Contents:
 Books.
 Binders.
 Small framed partner logos.
 Awards.
 Certificates.
 Small plant.
 Decorative objects.
Designed to naturally grow over time.
The books are clickable and open more info about the organizations that worked with us.
Area 5 — About Us (~0.8 viewport)
Purpose: Introduce the organization.
Elements:
 Medium corkboard.
 Several photographs.
 Small shelf underneath.
 Maybe a small timeline connected with string.
Feels personal rather than corporate.
Area 6 — Get Involved (~0.8 viewport)
Purpose: Final CTA.
Elements:
 Door.
 Calendar.
 Volunteer clipboard.
 Packages.
 Laptop.
 Donation CTA.
 Volunteer CTA.
Feels like the natural conclusion of walking through the room.
Windows
Three windows total.
Window 1: Entrance window used to enter the room.
Window 2: Near the About section. Provides breathing room and natural light.
Window 3: Near the Get Involved section. Looks outward again, reinforcing hope and the future.
Decorations
Used to connect areas rather than decorate individual sections.
Examples:
 Hanging plants.
 Floating shelves.
 Lamps.
 Books.
 Clocks.
 Rugs.
 Picture frames.
 Vines.
 String lights.
 Small decorative figures.
 Small storage boxes.
 Houseplants.
Long decorative elements may span multiple content areas to visually tie everything together.
Optional Interactive Details
Purely for fun and personality.
Examples:
 Plushie displays a speech bubble.
 Book opens into a fullscreen dialog.
 Clock shows the user's local time.
 Desk lamp can be toggled.
 Plant gently sways.
 Calendar pages flip.
 Small ambient animations.
 Live counters update.
These should never contain essential information.
Overall Feeling
The room should feel like a real, lived-in creative space that someone has personalized over time. Every major topic has its own corner of the room, but no single object becomes oversized enough to lose the cozy charm. The user should finish the hero feeling like they've explored a believable environment rather than scrolled through a collection of website sections.