MANMEET SAGRI

← Back to Projects

IAT 235 · Information Design

Embark Website
Redesign

3 Team Members
CSS My Lead
Client Project
4 wks Timeline

November – December 2024

Team: Hind Hammad, Yilin Gao

My Role: CSS Styling, Wireframing & Visual Design

Tools: HTML, CSS, Figma

What is it?

A client-facing website redesign for Embark Sustainability Society, completed as part of IAT 235. The goal was to transform their Sustainable Project Funding Opportunities spreadsheet into a clear, navigable, and accessible web experience.

This was a team project with a real client. We worked through a full design process including wireframing, client feedback sessions with Embark volunteers, Figma prototyping, and front-end development. I led the CSS implementation and contributed to wireframing and HTML content throughout.

The Process

Phase 1

Wireframing

Early hand-drawn wireframe sketches exploring layout ideas for the Embark redesign
Digital Figma wireframe that was flagged for being too detailed and close to a prototype

Each team member began by sketching wireframes independently to explore different layout ideas for presenting the funding information. We then moved into Figma to create a digital version.

Our professor flagged that our Figma wireframe was too close to a finished prototype. It included interactable elements, real images, and detailed styling instead of staying rough and structural. A proper wireframe uses placeholder boxes, crosses for images, and focuses on layout only. We understood the feedback, but due to timeline constraints we moved forward rather than revising. It was an important lesson about the distinction between wireframing and prototyping.

Wireframes communicate structure. Prototypes communicate look and feel. Conflating the two skips a valuable stage of iteration.

Phase 2

HTML Content & Client Feedback

In-progress HTML build of the Embark website showing content structure
HTML code showing the structure of the Embark funding page

My teammate and I worked collaboratively on the HTML, building out the content structure and populating the funding information from Embark's spreadsheet. We organized the grants into sections by funding amount, each with consistent labels for description, requirements, deadlines, and a learn more link.

Throughout this phase we received active feedback from Embark volunteers. Their input helped us refine the content hierarchy, improve label clarity, and make sure the information felt useful and easy to navigate for their actual users.

Phase 3

Figma Prototype & Visual Direction

Final Figma prototype applying Embark's brand colors, logo, and visual identity
Figma design showing layout and color application using Embark brand assets

With the content structure settled, I built the Figma prototype applying Embark's provided brand assets: their color palette, logo, and typography guidelines. This prototype served as the visual reference for CSS development, giving the team a clear guide before writing any styling code.

Phase 4

CSS Implementation

CSS styled Embark website showing the two-column grant card layout
Final styled Embark website showing responsive layout across the funding sections

I led the CSS for the project. Key decisions and systems I built:

  • CSS Grid for the grant card layout, splitting each funding section into a two-column structure at wider viewports
  • Flexbox for the sticky header navigation and the horizontal scrolling funding category nav
  • Three responsive breakpoints at 50rem, 62rem, and 90rem to scale typography, spacing, and layout
  • Linear gradient backgrounds using Embark's green palette to create the homepage hero visual
  • A CSS scroll animation on the category nav hint text using keyframes and translateX
  • Consistent color application across all grant sections using Embark's brand values
  • Hover and focus states on all interactive elements for accessibility

Problems & Reflection

Problem

Our wireframe skipped straight to prototype-level detail.

The Figma wireframe we submitted was flagged by our professor for being too polished. It included real images, interactive elements, and styled components. These belong in a prototype, not a wireframe. We understood the distinction after the feedback but moved forward due to time. Going forward, I now treat wireframing as a separate, deliberately rough stage.

Problem

Translating a dense spreadsheet into scannable sections required real decisions.

The original content had no visual hierarchy. I had to decide what information to foreground, how to group related details, and what visual cues would help users scan quickly. I used card-based grouping, consistent heading labels, and inline deadline formatting to create structure the spreadsheet was missing.

Feedback

The site was praised for being simple, accessible, and easy to navigate.

We received positive feedback for keeping the redesign clean and focused. The professor noted the site made scholarship information significantly easier to find and understand compared to the original spreadsheet. The client feedback sessions throughout the process helped us stay aligned with what Embark's users actually needed.

What I Learned

Each design stage has a purpose. Skipping one costs you later.

The wireframe feedback was the biggest lesson of this project. Wireframes exist to test structure without getting attached to visuals. When we jumped ahead, we lost that iteration opportunity. I also learned how much more confident CSS feels when you have a solid prototype to work from. The design decisions are already made, and implementation becomes translation.

View the Live Site

The finished website is hosted on GitHub Pages and fully accessible at the link below:

Visit 5 Corners Daycare