Visual hierarchy was doing too much at once.
The page included mission text, volunteer CTAs, project cards, sponsors, and location details, but many sections used similar weight and spacing, so the reading path felt less controlled.
Context / brief
The assessment asked me to audit an existing homepage, then redesign it with clearer hierarchy, structure, and visual execution.
For the BizzNEST Design Associate assessment, I chose Option 2: evaluate the current Open Source San José homepage and create a high-fidelity redesign. The deliverables included a written audit, a redesigned homepage direction, and a short rationale explaining the design choices.
The original site already had the right foundation: a strong mission, civic-tech purpose, volunteer information, project work, sponsors, and meeting details. My goal was to preserve that identity while making the page feel more polished, easier to scan, and more intentional.
Audit findings
The original homepage had the right information, but the hierarchy made it harder to understand what mattered first.
The CTA path could be simplified.
The original hero had multiple actions close together. I wanted the redesign to make the main get-involved path feel more deliberate while still keeping donation and community links available.
The content needed more breathing room.
The original site had valuable paragraphs about the organization’s mission and work, but tighter spacing and smaller text made those sections feel dense.
The visual system could feel more software-driven.
Because Open Source San José is a software and civic-tech organization, I wanted the redesign to keep the existing dark, blue, and red brand cues while making the typography and layout feel more technical.
Design priorities
I used four priorities to preserve what worked while making the page easier to scan.
Keep the original identity
Carry forward the dark background, bright blue accents, red CTA color, and community photography from the original site.
Make it feel technical
Use a code-inspired type direction and sharper spacing so the page immediately gives software-organization cues.
Preserve the content
Keep the original mission, project, sponsor, and meeting information, but reorganize it into clearer chunks.
Guide the next step
Make volunteering, community details, and donation paths easier to understand without overloading the hero.
User flow
I reorganized the homepage around the order a new visitor would naturally need.
Understand the mission
Lead with a direct statement about building technology for a better San José.
Scan what the group does
Break Who We Are, Mission, Vision, and What We Do into a tighter row of digestible content blocks.
Explore projects
Give project work more visual presence so the organization’s software output feels concrete.
Build trust
Keep sponsors and community proof visible, but give them a calmer section layout.
Find the next action
Move visitors toward Eventbrite, Discord, directions, volunteering, or donation after the core story is clear.
Before / after
The final design keeps the same civic-tech content but makes the page feel more deliberate.
Responsive design
The mobile version keeps the same hierarchy while stacking the content into a clearer reading path.
Build details
I built the redesign as a responsive front end after creating the high-fidelity direction in Figma.
The project was implemented with HTML, CSS, and JavaScript and deployed through GitHub Pages. I built the page around responsive layout, readable hierarchy, accessible navigation, and a visual system that fits the organization’s tech-focused identity.
The final build includes an animated code-rain treatment, mobile menu behavior, dropdown navigation, reduced-motion support, and redesigned sections for projects, sponsors, community context, location, and footer content.
Outcome / reflection
The final version keeps Open Source San José recognizable while making the homepage feel more polished and easier to scan.
- Preserved the organization’s original mission, project, sponsor, and meeting content instead of starting from a blank redesign.
- Reworked the content structure so a new visitor can move from mission to community proof to action more naturally.
- Used the original colors, a code-inspired type direction, and a darker interface style to make the page feel more connected to software and civic tech.
- Test the volunteer path with people who are new to civic tech and people who already code or design.
- Document the accessibility decisions with screenshots of keyboard navigation, menu states, and reduced-motion behavior.