Behind the product

The Making of SunSync

A clean timeline of how the project evolved — from concept → design → build → polish.

View Tech Spec Features

Stage 01

Problem → Concept

The project started by identifying a real issue: irregular schedules cause poor sleep and weak focus. SunSync aims to match light to the circadian day — warm to wake/wind-down, cool to focus.

Circadian rhythm Target users Value proposition

Early concept notes / problem framing screenshot

Replace with early notes / moodboard / brief.

Stage 02

Planning

With a clear concept, the next step was planning the design and build process in Figma: user flows, wireframes and UI elements to ensure a consistent, polished prototype.

Figma User flow Consistency

Figma wireframes / UI planning screenshot

Replace with Figma screens / wireframes.

Stage 03

Prototype Build

Once everyone aligned on the design, the build phase translated Figma screens into a functional HTML/CSS/JS prototype. Keeping to the planned structure and styles ensured a polished result.

HTML CSS Polish

Development screenshot of code or page builds

Replace with VS Code screenshot / commit view.

Stage 04

Iteration & Fixes

Final iteration focused on responsiveness, accessibility, and minor bugs. Iteration is key for polishing the prototype and making it feel professional and reliable.

GitHub Pages Responsive Bug fixes

Final screenshot of the project

Replace with final site screenshots.

Want the full technical breakdown?

See specs + features that map to the implementation.

Tech Spec Features