Our process is what makes us, us

Our end-to-end suite of agency services can be customized to fit your Enterprise needs, covering strategy, branding, design, Webflow development, and CMS training.

Let's get Organized

Strategy

WE LEARN AS MUCH AS WE CAN ABOUT YOU AND YOUR USERS
Play Video
01

Business Understanding

Want a website designed to woo customers?  Well, that starts with user research. We kick assumptions to the curb and find out what makes them tick and what just ticks them off. Based on the questions we need to be answered and the budget available, we'll recommend a combination of the below services.

02

Web Competitor Analysis

We'll evaluate your competitors' websites based on a set of defined standards to help understand the competition: what has worked, what has not worked and what are the actionable insights. Schedule a call to see an example of our bespoke Competitor Analysis.

03

User Outreach & Survey

We’ll invite users to complete a questionnaire (typically SurveyMonkey - which has an excellent analysis of data) to gather a broad range of responses to important questions.

04

Empathy Maps

An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. We'll get key members of your team involved to help prioritise user needs.

05

Persona Posters

We take everything we learn from the research and design persona posters to give a face and personality to your users. This is great for business when developing services and products and invaluable to us while designing.

06

User Stories

It’s now time to take the personas and evaluate what they need to accomplish. From your user's perspective, we ask "As a <user type>, I want to <goal> so that <benefit>". There can be many goals, so let's define them all and ensure the website delivers.

07

User Flows

User Stories describe what tasks a user needs to accomplish while User Flows describe how tasks are accomplished. We provide visual flows to ensure we're aligned and all journeys/processes are taken care of.

08

Sitemap Revamp

The revamped and consolidated sitemap will be structured based on insights from our latest marketing research, user flows, and user stories aiming to enhance user journeys, improve discoverability of key areas, reflect any new services or products, and overall, provide a more effective and seamless user experience.

09

Tone & Messaging Guide

A tone and messaging guide is a detailed document that defines the language, tone, and style a brand should use in its communication. It serves as a reference for anyone creating content for the brand, ensuring consistency across all channels. The guide includes the brand's voice, target audience persona, key messaging pillars, tone guidelines, language style, brand personality traits, and examples of how to apply the guidelines in different types of communication. By providing clear direction on how to communicate, the guide helps maintain consistency and ensures that all content aligns with the brand's identity and values.

10

Copywriting

We will help you develop a concise, relevant & impactful voice for your brand. We work closely with you to craft copy that reflects the values and purpose of your organization so that it resonates with your audience in a user-centric approach. Our Copywriter will meet with you to help define a tone of voice and co-write as needed for all pages included in the below redesign and development scope. They will also be working with you on snappy marketing copy for H1’s, H2’s, and Support text/CTA’s and additional page creation if identified in the strategy process.

Brand

Play Video
WE GET ALIGNED SO THAT WE HAVE A CLEAR PATH TO SUCCESS
01

Naming Workshop

Drawing from workshop exercises, we use the identified brand adjectives as our foundation. This informs the creation of potential names, each crafted using a diverse set of techniques. The most promising candidates are then evaluated within a decision matrix, where they’re scrutinized against predefined parameters. This rigorous process distills our list down to the most viable options. We then present the top 10 contenders asking you to select your top 3 to be developed into brand concepts. Please reach out to see an example of our naming workshop.

02

Comprehensive Brand Strategy

03

Logo & Brand Deck

Based on our brand strategy, we'll design a fresh logo treatment (3-4 concepts delivered and 1 refined). First, we’ll design the concepts, then we’ll help you decide on a creative direction and formalize that logo over 3 creative revision rounds. The Logo will be placed in the enhanced brand guide and we will then make sure we align on the visual vision before proceeding to the site design process.

High-level Breakdown of Process:

  • Brand Strategy & Brand Guide:
    • Review and utilize the new brand strategy.
    • Refer to the enhanced Brand Guide for design parameters.
  • Logo Design:
    • Develop 3-4 initial logo concepts.
    • Deliver 1 refined logo based on selected concept.
  • Creative Direction Decision:
    • Collaborate with the client to decide on a creative direction for the logo.
  • Revision Rounds:
    • Conduct three creative revision rounds to fine-tune the chosen logo.
  • Brand Guide Integration:
    • Place the finalized logo into the enhanced brand guide.
  • Visual Alignment:
    • Ensure alignment on the visual vision with the client.
  • Site Design Preparation:
    • Proceed to the site design process after finalizing the logo, other creative marketing/sales assets, and visual vision.

05

Marketing Collateral & Sales Enablement Material

We are available for additional branding materials and ongoing asset creation as the need arises (Biz cards, letterheads, presentations, pitch decks, video content, social creation and management, etc)

Site & UX/UI Design

Play Video
A BEAUTIFUL DESIGN THAT ACTUALLY SCALES IS ABOUT BALANCE
01

Review Web & Brand Strategy

In this phase, we meticulously review your web and brand strategy. Our design team reviews & analyzes our market research, web competitor analysis, personas, user empathy maps, user stories, user journeys, and sitemap revamp/information architecture. We ensure that every aspect of your new strategy is aligned with our design team and vision before we begin moving pixels.

02

Site Visual Brainstorm w/ Client

Collaboration is key to our process. During this phase, we brainstorm with you to visualize your site's design. We discuss layout, aesthetics, functionality, and user experience, ensuring that your vision aligns perfectly with our expertise.

03

Scaleable Design Systems (Figma + Webflow)

Define design principles for consistent and user-friendly interfaces, incorporating Figma variables and components to ensure seamless updates and transitions to Webflow.

This includes managing:

  • Typography
  • Color schemes
  • Spacing
  • UI elements (form fields, call-to-actions, tooltips, toasts, etc.)

We will leverage enterprise-level industry standards in design management systems to enable website operators to easily create offline mockup concepts with Figma and quickly bring them to life through a seamless transition to Webflow.

Additionally, we will ensure that end users benefit from best practices in accessibility and usability, focusing on variable-based design elements to meet these standards.

04

Wireframes & Prototypes

  • Create initial wireframes to visualize the website's layout, leveraging previous research and user flows to accurately highlight key elements and navigation using the new design system.
  • Develop interactive prototypes to simulate user interactions, user states, ensuring compatibility with CSS and JS styling options given by Webflow.
  • Collect feedback from stakeholders and end-users to refine the wireframes and prototypes, adjusting Figma variables and components as needed.
05

Asset Creation: (Ex. Illustrations, Motion, 3D Models, etc)

We will craft the bespoke illustrations, customize product shots, & design/develop animations. We believe in creating meaningful digital experiences.

High-level Process Breakdown:

1. Discuss Vision & Strategy for Illustrations, Product Mocks, Animations, and Central Creative Points of Interactivity

2. Draft Animation Vision & Plan Assets

3. Design Animations

4. Internal SVZ Team Creative Review

4. Revise w/ Client

5. Review & Implement Revisions

6. Approve & Hand-off to Development

06

Design, Review, Revise. Approve

This iterative process ensures that your design is perfect down to the last detail on each page. We present our initial design concepts per page, gather your feedback, and then revise until we reach your vision. Once approved, we move forward with confidence, knowing that every aspect has been carefully considered and perfected.

07

Design hand-off to SVZ development team

Once the design is finalized and approved, we seamlessly hand it off to our development team. Our designers work closely with our developers to ensure that every detail is implemented flawlessly, resulting in a website or application that not only looks stunning but also functions seamlessly.

Development

EVERYTHING COMES TOGETHER TO REALISE THE VISION
Play Video
01

Design Integration

  • Implement the design system, variables, and layout established in the UI/UX design phase within Webflow.
  • Ensure the site's responsiveness across various devices (mobile, tablet, desktop) and browsers utilizing advanced tools such as sizzy.co.
  • Use Webflow's design features to create interactive components, such as animations, sliders, and form fields.
  • Develop all unique individual pages, templates, and detail pages, including all elements and components.
02

Technical Development

  • Develop all libraries, components, and variables in Webflow to ensure reusability and consistency across the site.
  • Integrate third-party components or plugins as needed to extend functionality, such as (but not limited to) javascript libraries (custom components), galleries, or e-commerce elements.
  • Implement Webflow CMS to manage dynamic content and collections efficiently.
  • Audit the integration of the web application into the Webflow site, including form integrations and user authentication bridges and states.

03

Front-end Optimization

  • Optimize the site for performance, focusing on page load times and asset management.
  • Implement lazy loading for images and other large resources, and use code minification techniques to improve site speed while maintaining clean HTML/CSS semantics.
  • Ensure SEO best practices are followed to maximize site visibility and that alt tags are added to the visual content.
04

Accessibility and Usability

  • Ensure compliance with accessibility standards, such as ARIA roles, alt text, and keyboard navigation.
  • Conduct usability testing to ensure a user-friendly experience across all devices and screen sizes.
05

CMS Development and Migration

All Inclusive Custom Webflow CMS Development for all pages included in the redesign listed above, including All CMS and dynamic content as necessary for each page.

06

Data Import and Mapping

If there is a lot of content to move on certain pages (blog, etc), it won’t make sense to manually migrate by entering it through the CMS one by one, we’ll want to upload via a CSV, however, sometimes this content isn’t accessible via CSV. In order to solve this issue our development team will use custom scripts to pull the site content data accurately and securely over to your freshly built CMS on Webflow, or we will handle the manual data entry on a case to case basis then review all data to make sure it’s consistent and without error. We can give the client access to the CMS after development to help populate content/data as well in tandem with our team.

  • Data import, mapping (blog, resources etc.)
  • Data cleaning in compliance with Webflow's data import guidelines.
  • Custom Development Import & Mapping
  • Manual Entry (as needed)
  • Create 301 redirects (as needed)

07

Web QA & Testing


Device Testing

  • Utilize a range of all modern day devices via Webflow & Sizzy including smartphones, tablets, laptops, and desktop computers for testing.
  • Test on various operating systems (iOS, Android, Windows, macOS) to cover a diverse user base.
  • Ensure compatibility with all different modern day screen sizes and resolutions.

Browser Testing

  • Test on major browsers such as Chrome, Firefox, Safari, Edge, and Opera.
  • Include testing on both desktop and mobile versions of browsers.
  • Verify compatibility with older browser versions to accommodate users with diverse setups.

Component Testing

  • Test each individual component within the design Webflow system separately to ensure functionality and styling consistency across devices and browsers.
  • Check for responsiveness and adaptability of components to different screen sizes and orientations.

Collection Testing

  • Test collections of related components or modules to ensure they integrate seamlessly and function as expected across devices and browsers.
  • Verify consistency in design and behavior across the collection.

Page Testing

  • Test each page of the website or application on multiple devices and browsers.
  • Verify layout, styling, and functionality, including navigation, forms, interactive elements, etc.

Interaction Testing

  • Test interactive elements such as buttons, dropdowns, sliders, and menus across devices and browsers.
  • Ensure smooth functionality and responsiveness to user input.

Performance Testing

  • Evaluate page load times and overall performance across different devices and browsers.
  • Identify any performance bottlenecks and optimize as necessary to enhance user experience.

User Experience Testing

  • Assess overall user experience on different devices and browsers.
  • Solicit feedback from testers and stakeholders to identify areas for improvement.

Accessibility Testing

  • Ensure compliance with accessibility standards such as WCAG (Web Content Accessibility Guidelines) or implement a tool such as accessible to exceed compliance goals.
  • Test with assistive technologies

Regression Testing

  • Conduct regression testing to ensure that updates or changes do not introduce new issues or regressions in previously tested components, collections, or pages.

Reporting and Documentation

  • Document test results and green-light development hand-off, report any bugs or issues encountered during testing.
  • Provide detailed reports to stakeholders with recommendations for resolution or further action if needed for any found issues.

08

Hand-off & Training

Webflow CMS Hand-off & Training:

  1. Set-up a call with Webflow Enterprise Team, SVZ, and Client to begin CMS Training & Upskilling - Webflow will have a dedicated process and resource for CMS training that will run in tandem with the resources SVZ will create and hand-off.
  2. Hand-off assets folder, documentation write up and collection of training video materials and bespoke CMS walkthrough created by SVZ. This will include any other systems and platforms integrated by SVZ, not just Webflow.
  3. Demo the CMS w/ a Live Walk-through including any other tools that need training.
  4. Provide ongoing support for any questions regarding Webflow CMS and any other tools as needed.
Scott Van Zandt

30min 1:1 Meeting

Have a new project in mind? Schedule a 30 minute discovery call and we will at the very least give you some great advice.

Schedule a discovery call

Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.

Thanks, we've received your details and will get in touch ASAP!

Oops! Something went wrong while submitting the form.

Close

What is an RFP?

A request for proposal (RFP) is a great way for you to quickly get us up to speed on your project. It should include an introduction to your company and the reason for submitting your RFP. Tell us what it is you hope to accomplish with us and lay out any problems you or your users face with your current site. Lastly, please provide an overview of your project scope, timeline, and budget. We're happy to guide you through this on a call.