Project
Redesign Mae Capozzi’s blog to accommodate different post types, tagging, and email collection.
Mae Capozzi Blog Redesign
Table of Contents
I. Discover.
Intake & Client Brief
Research
II. Define.
User Goals
Client Goals
Technical Constraints
III. Design.
Figma Component Tools
Design for Cursor AI
About the Client
Mae Capozzi is a frontend engineer who specializes in frontend platforms. She writes about improving linting and TypeScript configs, wrangling bundlers, trying to improve CSS architectures, and building out design systems.
I. Discover:
What was I aiming to understand?
I wanted to know what types of posts the blog would host, what the client’s aims were for users once they on the site, and for what business purposes the client
Client Intake Findings
Q: What purpose will this serve?
A: The blog should include long form posts about the client’s areas of expertise. It should also serve as an archive for past newsletters.
Q: What are your goals for this blog?
A: Grow her audience, keep them engaged, and educate them on her areas of expertise. It should drive newsletter sign-ups and future work/collaboration.
Q: Who is your intended user for the feature?
A: frontend developers, project managers, product managers, and anyone interested in UX/UI.
Competitor Research Findings
When I asked Mae to share some blogs she found successful, most of them had a personable tone while exhibiting a high level of subject matter expertise. Storytelling and accessible language are important to her. So while establishing herself as an expert in certain niches the objective, remaining approachable to tangential disciplines (project managers, designers, etc.) would be crucial to the presentation of information.
II. Define:
How should we solve the problem?
The design of Mae Capozzi’s blog should sparse, straightforward with recognizable design patterns and interactions. It should maintain the minimalistic elements of the original blog, but in a way that is more engaging for users.
Product Roadmap:
What features do users need to ensure the product functions? What can I add to make the product more enjoyable? The priority features were validated by stakeholder goals and market research.
Priority features:
Top navigation: home, about, posts, contact pages
Homepage: Hero section with introduction, featured posts
About page: client’s current and prior frontend development experience
Posts: blog and newsletter posts, tab filtering options, pagination
Contact: CTA that says contact with a tooltip that says “copy email”
Footer: Newsletter sign-up, contact information, relevant off-site navigation links.
Constraints:
Designing for Cursor AI: The client wanted to test using Cursor to see how it improved her component build speed.
No header images: Images often help break up text and add context to cards/headers. However, the client did not want to spend time sourcing these images.
III. Design:
What should it look like and how should users interact with it?
Throughout our discussions, our North Star was the concept of a “digital garden”—a site for Mae to plant and tend to ideas over time through experience and reevaluation. Although the designs are minimal, we wanted to allude to a garden in color scheme and component design.
The starting point
The previous version of Mae’s blog (pictured below) served more as a resume with attached blog posts than a true blog. Some of the UX/UI issues included unclear navigation beyond the top nav, detours throughout the user journey, no footer for off-site engagement, no contact information, endless scroll on post pages, and newsletter sign-up hidden within posts.
A brand new garden
The new blog design addressed all of the client and user goals we determined from our research. The top nav is no longer “floating”, there are CTAs throughout the site to unblock user journeys, conversational headers add the desired personable touch, posts are now linked in cards that provide additional context on the subject, tab navigation allows users to filter by post type, contact options, and a fleshed-out footer.
My favorite elements of the redesign are the “garden box”card components. They create visual interest and provide users with additional context. Additionally, designing the interaction states made the site more dynamic and accessible to use.
The new footer design encourages additional engagement (on and off site) as well as newsletter sign-up.
Secondary CTAs throughout the hierarchy removed the dead-ends in navigation.
A secondary tab navigation on the Posts page helps users browse blog posts, the newsletter archive, or all of the above.
Pagination breaks up the blog’s hundreds of posts, keeping the most recent contributions at the front page.
In addition to post-type tags, subject matter tags provide users with context on the post before diving in. While not currently active on the live site, the tagging system will also be navigable in the future.
Post suggestions keep users on the site engaging with Mae’s work.
Key Takeaways
This project was an excellent opportunity to apply the skills I learned in DesignLab’s Advanced Figma Course. This included setting up design tokens, designing reusable components and variables, and design documentation and hand-off.
Collaborating with an experienced engineer like Mae was a masterclass in communication and cross-functional collaboration. I got to see the pros and cons of using AI tools like Cursor for frontend development. No spoilers, but sometimes speedier output comes at the cost of lower quality work overall. However, through continued feedback, collaboration, and iteration, we got to a finished product we can be proud of.
To read Mae’s take on this project, subscribe to her newsletter for the upcoming post!