baby engquist

ux · identity · web design
An alternate version of this process is on Medium.

brief

When my sister told me she was pregnant, I rared at the chance to create a really freaking adorbs responsive microsite to serve as their hub for all news baby.

considerations

brainstorming & sketching

My brainstorming focused only on necessary content. This announcement site would have a wide, varied audience: the aforementioned millennials of my sister and brother-in-law's generation likely to browse on smartphones, as well as the older family baby boomers who might have trouble navigating an overly dense site. In any case, no one was going to read a lot of text, which is why I aimed to differentiate each section visually and also design to focus on the content they cared about most. A 1-pager seemed to be the best solution.

wireframes

Since the layout was relatively straightforward (3-4 full-width sections), my wireframes played with color palettes & font pairings.
colors: As a huge fan of bright colors, I chose vibrant shades of gender-neutral colors like oranges & yellows.
fonts: Body text had to be a fairly universal font, but for headings, I shopped around Google Fonts for options between whimsical and useable.

My clients (aka my sister and brother-in-law) opted for Option 3 with some edits.

implementing

Because I wanted to give my "clients" copyediting functionality, I chose Anchor as a CMS due to its lightweight, clean platform, and paired it with Foundation as a framework.

During my build, the halfway point of my sister's pregnancy sparked a new announcement: it's a boy! I changed the brown highlight of Option 3 to the teal, lightened the eggshell color, and hunted down pieces of code I needed to make this site less static and more modern.

Foundation luckily has parallax and profile card building blocks, while Foundation's jQuery backbone allowed me to utilize scripts like Back to top, Smooth scrolling, and Countdown.

I user-tested with my friend and fellow designer Sarah, whose iPhone 5 continues to be a necessary but painful responsive test, and incorporated some feedback from my clients. Once everyone was happy, baby.engquist was live!

final touches

I'm a huge advocate of favicons in general, plus it gave me a chance to flex some logo design muscles. The egg egg was chosen for its simplicity and scalability (as you can see, a bigger version lives as the hero image here).

When it came time to send invites for the shower, I set up a subpage that featured a sheep (which is my nephew's zodiac) drawn in Sketch! The hardest part was getting the passcode to work (using a PHP redirect), but that's what StackOverflow is for.

Then the only thing left to do was wait — although not as long as we expected! He was due July 20, but the ridiculously adorable Andrew Jonathan Engquist joined our family on July 14 at 7am. I happily embraced my cool aunt status.
Top