A Stack of Notes: Granola's Blog
Granola · Web Design · Interaction Design
Granola's blog, rebuilt as a pile of meeting notes you flip through.
View the redesignROLE
Solo Designer and Developer
TEAM
1 Designer (Me)
TIMELINE
2 days
WHAT I DID
Granola's website is a great example of a fun, interesting, and interactive product site, but the blog page was contrastingly simple and plain: a standard grid of post cards. I wanted to continue their theme of interesting design and interaction and bring it to the blog page. Since Granola turns meetings into notes, I rebuilt the blog browsing as a stack of those notes. Everything outside the blog browsing stayed out of scope.
CONTEXT
Directed research, one of 25 website redesigns completed over the semester
TOOLS
HTML, CSS, JavaScript
Left, Granola's original blog grid. Right, the redesigned stack of notes.
THE CHANGE
The grid became a stack of notebook pages. Each post is one lined page, complete with the red margin line, punched holes, and handwriting, with its cover photo taped to the front. The category and date sit at the top of the page, and the authors sign the bottom. Dragging the top page flips it to the back of the stack while the pages behind shift and settle, so browsing the blog feels like flipping through a pile of meeting notes. The arrows do the same job one page at a time.
The filters sort the pile. Choosing Blog, Announcements, or Press restacks the pages so the matching posts come to the top, instead of reloading a filtered list.
Clicking into a post keeps you on the same page, literally. The note grows into the full article, torn edge, taped photo, and handwriting intact, and the article scrolls inside it. Closing it puts the page back in its place in the stack, so reading a long post never means leaving the pile and finding your way back.
REFLECTION
The hardest part was keeping the articles readable inside the Granola notes theming once a page expands. A handwritten note is charming for a headline, but a full article in that treatment can tip into hard work, so the reading view had to hold onto the paper and handwriting while giving the text the line length and spacing a long read needs. If I kept going, I would carry the stack onto Granola's other collections, like the changelog, and end each article with a small pile of related notes to flip through next.