My web design process (real client project)

Summary

In this video, the speaker outlines their comprehensive process for transforming a company’s brand and website, focusing on Subotica, a food robotics startup. Starting with a brand audit, the process includes restructuring content, creating a cohesive visual identity, and developing a user-friendly website. Key steps involve refining the brand's messaging, optimizing the website’s layout, and enhancing visual elements to ensure clear communication of the product’s value to both investors and customers. The end result is a functional and aesthetically pleasing website that aligns with the company’s goals of securing funding and attracting new business.

Takeaways

• 😀 Start with a thorough brand audit to understand what’s working and what needs improvement before diving into any design work.
• 😀 The brand audit should cover three areas: brand identity, product offering, and marketing communication.
• 😀 Restructure website content to make it easier to digest, ensuring a logical flow and clarity in messaging.
• 😀 Combine important pages, like the homepage and product page, into one when you’re dealing with a startup trying to clearly communicate its value.
• 😀 Content mapping and collaboration with a copywriter can streamline the process by organizing and structuring the website’s content effectively.
• 😀 Visual design should evolve alongside the brand to ensure the website reflects a sophisticated yet approachable tone.
• 😀 Often, when a client requests a new website, what they actually need is a complete brand overhaul, not just a cosmetic redesign.
• 😀 Make sure the typography and color palette work well together, enhancing readability and reinforcing the brand's personality.
• 😀 Incorporate high-quality photography and create a consistent visual style that enhances the brand’s message and key product features.
• 😀 Use interactive elements and micro-interactions to bring the website to life and engage users, especially in tools like Framer that allow for detailed interaction design.
• 😀 The website design process should be iterative, with room for quick adjustments as new assets and feedback come in, ensuring the site remains up to date.

Q & A

What is the first step in the process of transforming a company's brand and website?

The first step is conducting a comprehensive brand audit. This involves reviewing the current brand, understanding what works and what doesn't, and identifying areas that need improvement.

How did the client, Subotica, initially approach their brand and website?

Subotica initially had a basic brand with just a logo, color scheme, and font, and a WordPress-based website. They lacked a compelling digital presence and needed help to communicate their business effectively.

What was the primary and secondary goals of Subotica's project?

Subotica's primary goal was to secure additional funding, and their secondary goal was to attract new restaurant customers.

Why is the process of website redesign connected to other aspects of the business?

The website redesign is part of a holistic process that includes brand evolution, product redesign, and marketing strategy. All these elements need to work in unison to ensure a cohesive brand and digital presence across different channels.

What three main areas were audited in Subotica's business?

The three main areas audited were brand, product, and marketing. Each area was analyzed to understand how Subotica communicated its business and where improvements could be made.

How was the website's content structured and restructured during the redesign?

The content was reorganized into a clear structure that made it easier to communicate Subotica's value proposition, product details, and business goals. Sections were grouped logically, with duplicate or repetitive content consolidated for clarity.

What was a key structural change made to Subotica's website?

A major structural change was combining the homepage and the product page into one page. Initially, they were separate, but combining them allowed for a clearer, more focused explanation of the product right from the homepage.

Why is it often necessary to overhaul a brand before designing a new website?

Many companies mistakenly believe they only need a website redesign, but what they often need is a full brand overhaul. A strong brand foundation is crucial to ensure the website and other marketing materials accurately represent the company and resonate with its audience.

How did the team approach the visual redesign of Subotica’s brand?

The visual redesign involved retaining the existing logo and color scheme (navy and aqua) but tweaking their values for better harmony. The font was chosen to reflect both sophistication and approachability, and additional colors and elements were added for variety and consistency.

What was the role of Framer in the website design and development process?

Framer was used to build the high-fidelity website, allowing the team to focus on micro-interactions, hover states, and scroll behaviors. It made it easier to iterate and implement new assets or changes quickly, without needing to re-enter the design phase in Figma.

What visual style was chosen for the photography on Subotica’s website?

The visual style included a mix of product photography, food shots, and close-ups of fruits and vegetables. The images were carefully curated and styled with backgrounds and gradients to create a consistent, polished look. The goal was to highlight the product’s capabilities while making the content visually appealing.