Insomniac Sparrows

Insomniac Sparrows was a band formed by students from Algonquin College and the University of Ottawa. In spring 2025 they asked me for a website, and I turned that open request into a five-page site and a visual identity, finished as desktop and mobile prototypes in Figma. The band disbanded before the site was built. In July 2026 I used Figma MCP and Codex to turn the prototype into a working website, as an exercise in building with AI.

Context

The lead guitar player is my friend. The band wanted a website to introduce themselves and help them find more chances to perform locally.

Their first request was simple: “We need a website.”

That gave me a starting point, but not yet a design direction. The band was new. They had no existing website and no clear list of features. I did not want to open Figma and begin arranging pages before I understood what the website was meant to do.

Case 1 · A band website connects the places the music already lives

What three band websites keep in one place

I reviewed the official websites of Peach Pit, KT Tunstall and Maggie Baugh. I wanted to see what information these sites kept in one place and where they sent visitors next.

The pattern was simple. Music, videos, tickets and social posts may live on different platforms, but the official website connects them. It gives listeners, event organizers and potential booking contacts one dependable link to use.

The website did not need to replace the band’s social media. Its job was to bring the band’s story, performances, upcoming shows and contact details together.

Five pages and a homepage that works as a front door

Once the purpose was clearer, I organized the site around five pages. Home gives a quick view of the band and the latest content from the rest of the site. Videos shows the band’s performances, Gigs lists upcoming shows and ticket links, and About introduces the band and its members. Contact gives venues and organizers a clear way to ask about bookings.

I treated the homepage as a front door, with no long introduction. A visitor should be able to understand who the band is, see or hear their work, and choose where to go next without searching through the site.

I began with low-fidelity wireframes so I could focus on order, hierarchy and navigation before spending time on colour and visual details. Instead of repeating full pages, the homepage showed a small part of the band’s videos, gigs, story and photography. This made it useful to first-time visitors while keeping each section easy to reach.

1234

1. The homepage, with a short section for each of the other pages
2. An overlay video player opened from the video thumbnails
3. Upcoming gigs with date, location and a ticket button
4. The homepage gallery and its image viewer

Case 2 · Showing a rough prototype early changed three things

The first prototype gave the band something concrete to react to. Their feedback led to three changes:

1. I added a photo gallery to the homepage so visitors could see more of the band’s personality.
2. I made the video thumbnails larger because performance footage was one of the strongest ways to introduce their music.
3. I moved the social links into the header so they were easier to find from any page.

These were not large changes, but they made the design feel more like the band’s website and less like my first interpretation of the brief.

Case 3 · The logo came from a mark on a wall the band found

The band’s vocalist shared a photograph that included a small mark on a wall. The shape looked like a bird in flight, and it became the starting point for the logo.

I explored the shape with Illustrator and Photoshop, with AI tools supporting early visual experiments. I then refined it into a simple mark that could work in the website header and across promotional material.

For the website, I chose a blue-black base to fit the band’s rock sound and used bright yellow for emphasis. A consistent type system helped the pages feel connected even when they contained different kinds of content, from videos to gig listings.

What I liked most about this direction was that it came from something the band had noticed in its own surroundings.

How I built it

I designed the site in 2025 and stopped at the prototype. In July 2026, after the band had disbanded, I used Figma MCP and Codex to turn the Figma prototype into a working website and deploy it online. The band no longer needed a site, so I treated it as a practice project in AI development.

Codex wrote the code from the Figma file. I tested the site in a browser and adjusted the font sizes based on how the pages were actually displayed. I also added small hover and click effects to several buttons.

Outcome

The band was happy with the direction and felt that the site could support its promotion. By the middle of 2025, changes in the members’ work and study commitments made it difficult for the band to continue, and Insomniac Sparrows disbanded.

The website is live now, but the band never used it, so there is no traffic, engagement or booking data.

Photos from the rehearsal room

Getting to know the band and spending time at their regular rehearsals is something I will remember for a long time. I have always loved rock music, and I was welcomed into their rehearsals, where I took photos and later filmed and produced a rehearsal video. Instead of only watching live music from the audience, I could feel its energy inside the rehearsal room.

Reflection

The most important lesson was to begin with the right question.

When a client says, “We need a website,” the request may still hide the real problem. Competitive research helped me move from a loose idea to a clear purpose. Early feedback helped me improve the design before I became too attached to the first version.

This was also one of the local projects that helped me become more confident working as a designer in Canada. I had to listen, give structure to an unclear request, explain my choices, and turn feedback into visible changes.