Kat Irwin Design

UX design and Webflow development

Project Overview

Kat Irwin Design, Web Designer based in Berlin.
Kat has created “Web Design Solutions for Impact-Driven Entrepreneurs” for the past 6 years as a self-employed designer and when she turned to me to help her launch and redesign her website I felt extremely honoured!If you do not know, the road to this collaboration was long and started at the beginning of 2022 when I decided to start my freelance career. It all started with one very long coffee chat, later on, social media collaborations, creating a podcast together and most recently working together on this very project.

A mockup showing a homepage as work in progress design in Figma, created via screenshots

The homepage before the redesign or the work in progress.

Problem statement

We have a nice saying in Bulgarian about this very specific topic: Обущарят бос ходи or in translation: The shoemaker walks barefoot. Being your client is hard, finalising your portfolio and hitting publish is hard. Launching your website after so many years of gathered experience - also hard.We were joking while nitpicking on some of the web page layout and UX, but I was there for Kat not only to translate the Figma designs into Webflow but also to advise, suggest and say: this is good, we can focus on the next phase.

The Goal

To launch Kat’s website before she goes on holiday! 😁 This was priority 0 for us since we both knew, there were other pages to be added and of course, the layout would change naturally as her business grows.

Users & Audience

Kat’s users and audience vary from freelance designers to up-and-coming entrepreneurs and established entrepreneurs. Thanks to her previous collaboration with a brand designer and copywriters, the visuals, voice, and tone were created and ready to use. What was left was to create the foundational web pages having each user in mind when crafting the sections with signup forms for example.

Roles & Responsibilities

Since Kat has been working on her website progressively, she shared with me that she already had some sections and even pages built in Webflow by another developer. So some of the groundwork was already laid and all that was needed was adding the new sections and refining the existing ones to match the designs in Figma. After we had a detailed call about what is next and what the process will look like, we agreed on the number of pages, the order rolling out of the changes and of course the deadline. I was responsible for overlooking the designs in Figma and suggesting UX improvements, after which when agreed upon I would develop them in Webflow. So you can say that my role was: UX designer and web developer. 😁

A side-by-side mockup of a Webflow website homepage is dark and light green moss with a finished design for the designer's portfolio.

The homepage after the redesign.

Scope & Constraints

For this project, I was on top of my time management! 😎 Why? We agreed to work on an hourly basis, which for me only meant hardcore productivity and no distractions. I started with design review and drafting suggestions on the 28th of March 2024, my client was leaving on the 22nd of April and wanted to do her launch ideally before her departure. Did we make it on time? Drum roll, please! 🥁🥁 Check the outcome and results section!

Process

As I mentioned the first step was a design review and analysis of what we have. Designed screens (screenshots) in Figma, branding elements, visuals, Lottie animations, imagery, available copy, built sections, elements and containers in Webflow, the metrics used by the previous developer and style guide. After reviewing all this was time to create a backup version of the website and start exploring every page and observe the missing pieces.

After a thorough observation of the Webflow website structure and the Figma designs, we started working asynchronously on the UX and visual hierarchy of the homepage. Based on priority we started working on the next page which was p1 or Services. Midpoint of the project the new copy was available in Figma. Wrapping up with the creation of the other services pages, it was time to work on troubleshooting different forms, sections and design elements.

The last 3 days were left for minor changes, adjusting the responsiveness of the other 2 breakpoints and testing live on our devices.

Outcomes & Results

Well, I am happy to announce that we not only met the deadline but managed to build something together by joining efforts! 🥰 Here is Kat’s up-and-running website. And if you read all my case studies you would think, there is no way every collaboration is smooth as butter and so enjoyable. What can I tell you?! This one was! It might be because we already had established such a good friendship and worked on our podcast, or the fact that we communicate so transparently and easily. Not sure, but it's working! The last changes I made were on the 19th of April before the launch because of a sneaky SEO issue and redirecting links which took only a a few minutes to figure out and fix. ☺️

Preview the websiteBrowser and mobile mockup of a Webflow website.

The latest mockup of the website.

Want to collaborate?
Send me a message!

I will check my availability for collaborations and get back to you within 24 hours.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.