Changelog

It's been a while since the last major update, and over a year since we launched the new Help Scout brand. Now seemed like as good a time as any to post a proper case study and ship a few improvements:

• Optimized the site to display larger text & imagery on screens larger than 1600w.
• Wrapped homepage collage items with link blocks for easier navigation.
• Added case study for Help Scout Brand Evolution and deprecated the now legacy Help Scout Marketing Site project.

‍

While a site like this is never really finished, we've got a big release on our hands. All ten case studies are now populated with content thanks to a handful of image components and many hours of grunt-work.

This site is the most comprehensive portfolio I've had thus far in my career and, since I designed and built from the ground up, the site itself feels like the most current piece of work. Here's the latest:

• Updated the homepage h1. Made copy more succinct, added a fun hover interaction, and improved responsiveness.
• Finessed the Project List component interaction. It punctuates each case study page and makes it easy (and beautiful) to navigate to and from case study pages.
• Uploaded ten case studies worth of content. Taking a component-driven approach (pages are built almost exclusively out of them), I built unique pages by gathering content and then populating text sections, image grids, site comp sections, and more.

Took a tiny break, but have been tinkering in the background when I can. Capturing the meaningful changes below, with much more to come.

• Created and styled two new collection lists that will be used display Projects across the site. The first is a grid that can be seen over on the Work page. The next is a list variant that's in-progress and will be a condensed way to jump to other projects.
• Finessed page transitions to start on click/tap and resume on page load. Kept it simple, but the transition now happens globally and more reliably.
• Improved the Changelog layout and made it more image-friendly. Learned a bunch about the quirks of styling rich text editors in this video.
• Fixed some issues with Webflow's responsive image scaling.

Pretty hyped on a larger-than-usual release—a full page! New components and classes are really paying off and it's feeling like progress is beginning to snowball.

• Added the Info page. Includes a new bio, some photo components, and a few fun lists. Plenty of wordsmithing to come, but happy with the MVP.
• Migrated 60 blog posts from Squarespace. Ultimately converted an .xml to .csv via Wordpress (using guidance from this forum thread). Imported the data-only for now, but looking forward to styling & displaying some relics.
• Various footer improvements.

Switching back to build-mode after a few weeks of content gathering. More pages are on the way, but pushing some fun updates today. Here's what we've got:

• Gave the footer a spruce and some link hierarchy. Main site pages updated to a larger link style and the Explore list rounds things out.
• Added a Coming Soon tooltip to Nav & Footer links to make work-in-progress a bit more clear. Learned a lot by rebuilding and referencing this example from Sudhanshu Verma.

Gathering visuals for 10 case studies is no small feat. And while it's been fun to dust off old work, it's a time to edit what to carry along into the future. Resonating with this clip of Sam Beam as he chats through the cringey and pat-on-the-back moments of looking back. Plenty of both goin' on over here:

Getting back into the groove of small, daily updates.

• Overhauled Type and Color styles in the design system. Made a couple quick color changes to the live site, including the body, footer, and promo bar.
• Gave the promo bar override fields to smooth out the experience to and fro the Changelog.
• Loosely wireframed the full site and mapped out necessary components for the next major release.

Took a little bit of time this weekend to update site fonts, spin up some new components, and refactor some old ones.

• Updated the site to feature Sharp Grotesk Semibold 23 headlines, Söhne Buch text, and Söhne Mono details.
• Built new case study components for case study templates and refactored some old components to work with new type & code.
• Brought fluid type & space code into the fold and began using classes where convenient. h/t Andrew Lakata for his clever method to include a custom code symbol at the top of each page.

Spending most of my time in Figma these days, designing the case study experience. It'll be another section of the site powered by a Webflow CMS, so things should take shape quickly once the design's ready. Besides that, here're the small updates:

• Added page load animation to help hide a pesky flash of unstyled type.
• Open sourced the styleguide which is fairly barebones for the moment, but will be ramped-up (and overhauled?) soon.
• CSS grid improvements and fixes to the Acadia/New England Brew section.

Here it is folks, the Changelog post about the Changelog.

• Added V1 of the Changelog with 3 initial posts. This feature's built using CMS Collections, making updates easy and repeatable. Styling is also handled on a more global level.
• Updated Promo Bar to feature text link to the Changelog. Link is hidden when Changelog is the current page.

Tweeted to let folks know I'm building out in the open. Hearing back gave me motivation plus some accountability partners—the fabled win-win.

• Added first version of the Promo Bar with coming soon messaging.
• Added Google Analytics.

Jotting down updates and taking a more iterative approach felt like a cool way to break up this project into manageable chunks, be more transparent, and embrace a more constant evolution. Here's what went down first:

• Used Figma to HTML to make a copy of my existing portfolio in Figma. Kept its general spirit intact, gave it a spruce-up, and added current work.
• Built MVP homepage on Webflow using various CSS grid sections.