Webflow Developer Workflow

Understand MMM Meeting Formats

Review the structure of the MMM Meetings to better understand how and when to contribute: 

📒
Meetings @ MMM
 

🕒
Weekly Team Syncs
 

Attend Coordination Calls

Website Build Weekly - Providing status updates on site/build and elaborating on progress. All progress will be added to clickup by Jon so that the relevant stakeholders can also receive those updates. You may also receive

Daily Design Standup - Review your to-do list, progress, and any assistance you may need.

Design Ops Call - Receive and provide updates. Significant updates may warrants a discussion or brainstorming session. If you need feedback on something you’re working on, this is a good time to schedule a call. If you have free time, check to see if any tasks or assistance are needed.

1:1 Jon - Provide status updates on site development progress, and ensure key information is relayed to Jonathan for inclusion in ClickUp. This ensures effective communication with stakeholders and keeps everyone informed about changes discussed during the call.

Know your points of contact

Know who you will be interacting with on a day-to-day basis, what they are responsible for, and how to contact them in relation to specific project needs. 

Primary point of contact: 

Web Designer

Tech Team

💡

More information about the members of MMM and their roles can be found here:

💁
Who’s Who? (Roles @ MMM)
 

Design Sitemap

Collaborate with relevant stakeholders and the Web Designer to explore how the content and goals of the page(s) can be reflected effectively on the website. Explore the most effective way to arrange the page(s), which page(s) the content will be placed, and how the pages may link together.

It can be helpful to create diagrams to represent the sitemap. Make sure it is clear how many pages will be needed, their goals, their content and how they will connect. Once the sitemap is complete, the Web Designer who will use it for wireframing. 

Setup Project in Notion

With the information from the sitemap, create a database in Notion with the goals, call-to-action, content, and primary audience of each page. Include a primary point of contact for the content of each page. Establish deadlines and the date the website will go live. 

Present Sitemap

This process is currently in development.

Schedule a call to present the sitemap to the person who briefed you on the project. This will be the person responsible for the overall project strategy. If the sitemap needs to be presented to anyone else, the person who briefed you can let you know who to contact or add them to the call. Share your screen and initiate a discussion about how they feel about the flow of information. 

Review Design

Once the sitemap is designed, the Web Designer will use it to create a design in Figma. Throughout the process, you will be involved in the review process. This will include three steps:

General Feedback: Throughout the design process, the Web Designer may reach out for input on their current iteration.

Lo-fi: At this stage, you will be looking at the layout, the structure of the page, how it could be translated into HTML, how it might be built in webflow. Are there any repeatable components that can be used for other pages to expedite the build?

High-fi: At this stage, you will inspect the design elements and go beyond the layout. This will include factors such as colors and typography, and how these could be transformed into a system within Webflow. Additionally, it will be helpful to take notes on anything you will need to remember, what steps to take, and things to look out for during the build (eg. problem sections, plans, important sections, potential bugs). Start thinking about how the static design can be translated into an interactive webpage.

The Web Designer will present designs by providing a Figma link. Provide feedback and ask any clarifying questions you have on what has been presented. They will iterate based on your feedback and will repeat this process until the design is approved.

Coordinate for Site Setting

Reach out to the Technical Team who is responsible for domain management. They will establish the hosting arrangements.

Prototype the Site

Once the design has been agreed upon, start building some of the more complicated sections or elements in Webflow, understanding how they work, and ensuring they will function. This will require running tests until the prototype functions as expected (eg. hover cards, dropdown menus, etc.).

Rather than progressing page by page, take a holistic view of the entire project from an interaction point of view. Send the prototype to other designers or the project lead for feedback and iterate until satisfied with t he prototype.

Experiment with numerous layout iterations to identify the optimal structure before adding any stylistic elements. This process can be likened to pre-wireframing.

As for whom to submit the work to, it's typically the person who briefed you. However, if there's a different point of contact, they will notify you.

Establish Underlying Structure of the Site

Once the prototype has been approved, if it is a new site, you will need to establish the basic site structure, ensuring consistency across all pages. This will be a general outline for the detailed site build. Go through page-by-page building their structure and layout without too much styling.

This involves creating the page wrapper, organizing sections within the wrapper, and considering elements that are consistent throughout the site, such as the navigation bar and footer.

Create Style Guide and Templates

Use the rough structure and styling from the last step to set up a style guide and establish reusable classes. 

This can include templatizing:

Different fonts, heading sizes, and spacing

Single elements (eg. headings and navigation bars)

Combinations of elements (eg. a specific arrangement for an image and button)

Section styling

This style guide will serve as a reference for maintaining consistency and will streamline future development tasks by templatizing anything that can be applied across multiple pages.

💡

If it is an existing project, this will already exist and should be referenced for the rest of the build.

Begin the Detailed Site Build

Once the structural layout is in place, set up any necessary interactions (eg. animations, transitions, background scroll, hover) to enhance the website's interactivity and user experience. 

Proceed to add styling to elements across the entire site. This includes defining visual attributes such as colors, typography, and spacing to create a cohesive visual experience.

💡

There may be complex tasks with many different interactions. Webflow has a Youtube channel with very concise tutorials that can be helpful when encountering roadblocks.

Test the Site Internally

Next, verify that all layouts, classes, styles, and interactions from the desktop version are appropriately applied, functional, and responsive across multiple browsers and devices. The format for mobile devices will likely need alteration to work on the smaller screen. 

Ask internal team members and, for a wider perspective, designers outside of Gitcoin if they would be willing to test the website on various devices, ensuring optimal performance and usability across platforms. 

User Test the Site 

This process is currently in development.

Conduct user research (UR) on the site build. Go to UR websites to gather people outside of the organization to go through the website. Additionally, user test the site from within Gitcoin.

Evaluate user interaction with the site:

Is it intuitive?

Are users reaching the desired endpoint?

Are they behaving as expected?

Identify any dysfunctional elements or areas where users tend to drop off, and investigate potential reasons for their departure. Make necessary adjustments based on the feedback.

Gather Approval

Conduct a launch call, where findings are shared, the site's functionalities are demonstrated, and any updates are discussed. Obtain official approval before proceeding.

Deliver the Site

Once the site has been approved on the launch call, publish the website to the live server.

Maintain and Analyze the Site

Continue to conduct further testing, fix bugs, and make necessary iterations even after the site has gone live. Typically, iterations are rolled out in stages, such as Version 1 (V1), Version 2 (V2), and so on.

To aid in this process, review of Google Analytics data. This can help you identify problem areas by:

Examining website traffic to identify any pages that are resulting in user drop-offs.

Evaluating user conversion rates.

Assessing if user behavior is as expected or desired.

Determining if the set goals are being achieved.

Webflow Developer Workflow

Understand MMM Meeting Formats

Review the structure of the MMM Meetings to better understand how and when to contribute: 

📒
Meetings @ MMM
 

🕒
Weekly Team Syncs
 

Attend Coordination Calls

Website Build Weekly - Providing status updates on site/build and elaborating on progress. All progress will be added to clickup by Jon so that the relevant stakeholders can also receive those updates. You may also receive

Daily Design Standup - Review your to-do list, progress, and any assistance you may need.

Design Ops Call - Receive and provide updates. Significant updates may warrants a discussion or brainstorming session. If you need feedback on something you’re working on, this is a good time to schedule a call. If you have free time, check to see if any tasks or assistance are needed.

1:1 Jon - Provide status updates on site development progress, and ensure key information is relayed to Jonathan for inclusion in ClickUp. This ensures effective communication with stakeholders and keeps everyone informed about changes discussed during the call.

Know your points of contact

Know who you will be interacting with on a day-to-day basis, what they are responsible for, and how to contact them in relation to specific project needs. 

Primary point of contact: 

Web Designer

Tech Team

💡

More information about the members of MMM and their roles can be found here:

💁
Who’s Who? (Roles @ MMM)
 

Design Sitemap

Collaborate with relevant stakeholders and the Web Designer to explore how the content and goals of the page(s) can be reflected effectively on the website. Explore the most effective way to arrange the page(s), which page(s) the content will be placed, and how the pages may link together.

It can be helpful to create diagrams to represent the sitemap. Make sure it is clear how many pages will be needed, their goals, their content and how they will connect. Once the sitemap is complete, the Web Designer who will use it for wireframing. 

Setup Project in Notion

With the information from the sitemap, create a database in Notion with the goals, call-to-action, content, and primary audience of each page. Include a primary point of contact for the content of each page. Establish deadlines and the date the website will go live. 

Present Sitemap

This process is currently in development.

Schedule a call to present the sitemap to the person who briefed you on the project. This will be the person responsible for the overall project strategy. If the sitemap needs to be presented to anyone else, the person who briefed you can let you know who to contact or add them to the call. Share your screen and initiate a discussion about how they feel about the flow of information. 

Review Design

Once the sitemap is designed, the Web Designer will use it to create a design in Figma. Throughout the process, you will be involved in the review process. This will include three steps:

General Feedback: Throughout the design process, the Web Designer may reach out for input on their current iteration.

Lo-fi: At this stage, you will be looking at the layout, the structure of the page, how it could be translated into HTML, how it might be built in webflow. Are there any repeatable components that can be used for other pages to expedite the build?

High-fi: At this stage, you will inspect the design elements and go beyond the layout. This will include factors such as colors and typography, and how these could be transformed into a system within Webflow. Additionally, it will be helpful to take notes on anything you will need to remember, what steps to take, and things to look out for during the build (eg. problem sections, plans, important sections, potential bugs). Start thinking about how the static design can be translated into an interactive webpage.

The Web Designer will present designs by providing a Figma link. Provide feedback and ask any clarifying questions you have on what has been presented. They will iterate based on your feedback and will repeat this process until the design is approved.

Coordinate for Site Setting

Reach out to the Technical Team who is responsible for domain management. They will establish the hosting arrangements.

Prototype the Site

Once the design has been agreed upon, start building some of the more complicated sections or elements in Webflow, understanding how they work, and ensuring they will function. This will require running tests until the prototype functions as expected (eg. hover cards, dropdown menus, etc.).

Rather than progressing page by page, take a holistic view of the entire project from an interaction point of view. Send the prototype to other designers or the project lead for feedback and iterate until satisfied with t he prototype.

Experiment with numerous layout iterations to identify the optimal structure before adding any stylistic elements. This process can be likened to pre-wireframing.

As for whom to submit the work to, it's typically the person who briefed you. However, if there's a different point of contact, they will notify you.

Establish Underlying Structure of the Site

Once the prototype has been approved, if it is a new site, you will need to establish the basic site structure, ensuring consistency across all pages. This will be a general outline for the detailed site build. Go through page-by-page building their structure and layout without too much styling.

This involves creating the page wrapper, organizing sections within the wrapper, and considering elements that are consistent throughout the site, such as the navigation bar and footer.

Create Style Guide and Templates

Use the rough structure and styling from the last step to set up a style guide and establish reusable classes. 

This can include templatizing:

Different fonts, heading sizes, and spacing

Single elements (eg. headings and navigation bars)

Combinations of elements (eg. a specific arrangement for an image and button)

Section styling

This style guide will serve as a reference for maintaining consistency and will streamline future development tasks by templatizing anything that can be applied across multiple pages.

💡

If it is an existing project, this will already exist and should be referenced for the rest of the build.

Begin the Detailed Site Build

Once the structural layout is in place, set up any necessary interactions (eg. animations, transitions, background scroll, hover) to enhance the website's interactivity and user experience. 

Proceed to add styling to elements across the entire site. This includes defining visual attributes such as colors, typography, and spacing to create a cohesive visual experience.

💡

There may be complex tasks with many different interactions. Webflow has a Youtube channel with very concise tutorials that can be helpful when encountering roadblocks.

Test the Site Internally

Next, verify that all layouts, classes, styles, and interactions from the desktop version are appropriately applied, functional, and responsive across multiple browsers and devices. The format for mobile devices will likely need alteration to work on the smaller screen. 

Ask internal team members and, for a wider perspective, designers outside of Gitcoin if they would be willing to test the website on various devices, ensuring optimal performance and usability across platforms. 

User Test the Site 

This process is currently in development.

Conduct user research (UR) on the site build. Go to UR websites to gather people outside of the organization to go through the website. Additionally, user test the site from within Gitcoin.

Evaluate user interaction with the site:

Is it intuitive?

Are users reaching the desired endpoint?

Are they behaving as expected?

Identify any dysfunctional elements or areas where users tend to drop off, and investigate potential reasons for their departure. Make necessary adjustments based on the feedback.

Gather Approval

Conduct a launch call, where findings are shared, the site's functionalities are demonstrated, and any updates are discussed. Obtain official approval before proceeding.

Deliver the Site

Once the site has been approved on the launch call, publish the website to the live server.

Maintain and Analyze the Site

Continue to conduct further testing, fix bugs, and make necessary iterations even after the site has gone live. Typically, iterations are rolled out in stages, such as Version 1 (V1), Version 2 (V2), and so on.

To aid in this process, review of Google Analytics data. This can help you identify problem areas by:

Examining website traffic to identify any pages that are resulting in user drop-offs.

Evaluating user conversion rates.

Assessing if user behavior is as expected or desired.

Determining if the set goals are being achieved.