Redesigning a marketing website

Role

My role during this project was Lead Product Designer. I was responsible for project management, UX/UI design and providing branding design direction to our Graphic Designer. Our Graphic Designer was responsible for the visual assets such as the product shots.

Problem

In order or importance, we wanted to achieve the following objectives:

1. Redesign our content and information architecture (IA) to reflect our company and product strategy.
2. Refresh our brand to make it more organic and human (moving away from our existing monotone, sharp, functional branding).
3. Move from Wordpress to Webflow to make it easier to manage, edit, and evolve over time.

Success

Success for this project was simply to deliver the new, high-fidelity designs within 6 weeks - a tight timeframe! From there we would be handing the final deliverables over to an external agency who would be building it.

This project was very much focused on setting a new baseline with new content and branding, on a new tech stack. It’s from this baseline that we would then look at optimisation.

Process

I split the project into four key stages. I took a very waterfall approach due to the nature of the project and the tight timeline.

1. Content and IA design

To speed this stage up I ran a workshop which included the key project stakeholders such as our CEO and Head of Product. We collated a whole bunch of existing content and messaging from recent pitch deck and marketing collateral.

The output of this stage was documents outlining the content, as well as a sitemap which showed the page structure.

2. Wireframing

This stage was all about getting feedback as early as possible. By wireframing, I could focus the feedback on the content and IA, without getting distracted by visuals.

I iterated on the wirefames based on feedback until stakeholders were generally happy with the direction.

3. High-fidelity designs

This was the big one - turning wireframes into complete, high-fidelity designs. This involved a lot of iteration and collaboration with our Graphic Designer.

We did a number of concepts of our home page, and based on feedback from stakeholders refined to a single concept. We then took this and extrapolated it to the entire website - gathering feedback as we went.

4. Finalise and handover

With the high-fidelity designs mostly across the line, I began to document the production design file. This included all the key screens at different breakpoints (I had a lot of fun tinkering with Figma variables here!)

Given we were building a CMS, this also involved designing what was essentially a mini design system, including styles and reusable CMS components.

Result

Designs were delivered on time!

Handover to the external agency went smoothly and the website shipped in early Jan.

You can check out the live website here: https://sidekicker.com/