Babies After 35
the brief
Create a website to showcase the social media output and articles written by Dr. Clark. The site should offer easy access to her content with minimal friction and zero extraction. The logo needs an update, as do her brand colors and fonts.
the deliverable
A new website that allows immediate access to all of Dr. Clark’s recent social media posts and the hundreds of articles she has written. The new website has professional gravitas yet is also welcoming to laypeople.
How I met the brief
Information just a click away
Two sizes of cards were designed to be packed with information yet easy on the eye. I was aware that the sheer amount of information on the site could easily be overwhelming so I leaned into uniformity.
Access to the search bar is of primary importance to the client
Her area of specialty has very specific terminology which makes the search function essential.
Access to all social media output in one place
I used widgets on the site to pull in her TikTok, Instagram, and Youtube feeds.
The Foundations
Research
UX
With the first wireframe I played it totally safe because I wasn't sure of the doctor's style. I LOL'd when she blurted "No!" as soon as she saw it.
UX
Because she wanted to step away from using photographs on the site, she asked me to instead use the icons that I'd created for the Graphic wireframe.
UX
UX
The client didn't like this style but loved these icons, so we agreed to use them with the Bento Box style.
The doctor showed her professional integrity when she asked me to remove the long hair from the icon of the pregnant person. She kindly reminded me that all types of people are capable of getting pregnant, not just those who present as female.
Other cool things I did
Custom icons
Vector drawings made specifically for the five categories of topics.
Finsweet Attributes
CMS-Filter, CMS-Combine, and CMS-Load to overcome Webflow’s native component limitations.
Lotties
The fact that the site is a repository of medical information means that the animation needs to be sedate. I leaned into twinkling stars which, happily, the client loves. Yay.
Turbo charged the CMS
Added a collection that works with the larger collection to populate unique qualifiers. When the client enters a new media appearance, the card displays the appropriate tag, CTA language, and icon.
A Relume/Client First Style Guide
The foundation of any Webflow build, the Style Guide allows for quick and easy global adjustments by any Webflow practitioner.
UI Studies
Dozens of experiments were done with colors and fonts.
Shades of grey worked great for the wireframes, but they gave the impression that the design could actually be color-blocked. Giving it a shot, I quickly saw how overwhelming it would be.
Other colorways were tried before abandoning the idea entirely and beginning to use large blocks of a single color (white) and bold strokes
I presented the client four final options. She chose the blue and yellow color palette.
The design of the cards
In the process of finding the right colorway, I tried all kinds of schemes for the spacing between boxes, and the cards took many needed steps toward practicality.
I would have preferred the cards not have an arrow or extraneous words, but with testing, I understood that not everyone assumed the cards are clickable, so a CTA and an arrow were added. An underline gets drawn on hover.
Header Font Studies
The wireframes were done with Phosphate, which I felt was perfect. Unfortunately, it seems impossible to get a commercial license for it, so I looked for something similar and found Pink Rocket.
After living for a while with Pink Rocket, I felt it wasn’t right so I went back to the Figma file, tried several things, and even purchased a font called Fieasto (the third font down). Fieasto has pep, but in places it proved a bit difficult to read.
I gathered a top ten of options and invited my friends and peers to choose their top three. Abril Fatface won out easily. It's the right font for this project - it's commanding yet feminine.
Learnings
Because of her absolutely bonkers schedule, my client wasn't able to have regular weekly meetings. I strove to fill in the gaps by communicating regularly and, after meetings, sending a round-up of what we discussed and what I would be working on next.
Designing within the limits of what I am able to build will bring 100% fewer tears and will make a project go smoother and faster.
I’m a member of the Floxies, an international community of women who Webflow and design websites. I would not have been able to make this website come together without them. No kidding.
With all the struggle and learning that comes from building every section of a site from scratch (with the exception of the FAQ), and getting the most from the 315 items and 477 tags in the CMS, I am now able to help other people with their CMS questions. Awesome!
