Workflow

Review job overview

Before beginning, fully review the job overview of the position. It will have all the information you need about what is expected and what tools you will need.

pageWebsite Designer

Introduction Call

There is one introductory call to be attended. It is important that designers attend in order to get familiar with the client and their product, as well as what they are looking for from the project.

Contribute to Workshops

Show up to workshops with valuable insights that are relevant to the client's values. Provide feedback and assistance.

Read more here:

pageBranding SprintspageDesign Sprint

Prototyping

After the completion of the storyboard, your task is to create a compelling prototype without adding new content. Discuss with the facilitator or client in case adjustments need to be made.

pagePrototyping

Share Progress

Remember to share your current progress with the Creative Director and Webflow Builder. The Creative Director can provide feedback accordingly. The Webflow Builder will provide feedback about what is ideal in terms of how both the design and Webflow build will impact the User Interface.

Record a summary video for the researcher

After finishing the prototype design, the user researcher needs as much context about the details in the prototype as possible. Please record a short summary of the flow, where users need to click and potentially provide explanations on novel concepts or difficult parts of the design.

Prepare design file for presentation

After the user researcher finished their interviews, there might be a few UX changes required to make sure the prototype is ready for implementation. They will let you know if there are opportunities for quick UX fixes.

pageQuick Fixes

Once you fixed them, you can prepare design files, export all prototype screens, add them to Miro in preparation for the Iteration Workshop.

Instructions:

Repeat the following from an atomic component perspective:

• For Atoms (e.g. Buttons, Text, Icons, Input Fields), Molecules (e.g. Forms, Text areas, graphs), and Organisms (e.g. Header, Footer, Section 1):

  • Group components and add auto layouts if necessary.

  • Label the groups clearly - e.g. "button" or "input field"

• For Pages:

  • Label the pages clearly by what is happening in the user journey: e.g. landing, dashboard, transaction.

Make UX adjustments based on feedback

In some projects, you may need to make UX adjustments based on decisions from the workshop. The improvements don't differ much from the design process for designing secondary screens.

Create a component library

After completion of the prototype, create a component library. You can structure everything into a neat Design System with flexible auto-layout components. The library consists of all elements necessary for the front-end implementation of the product.

• Foundations: Colors, typography, grid, image styles, shadows etc.

• Components: Autolayout, Interactive Components, Variants, atomic elements, states.

Here is an example.

An example Components Library for BOSON Prototcol (this is one of the biggest libraries but it should give a sense of the needed structure)

Front end handover

Record a loom and provide the designs to the front-end developer before they are due to start work. At a bare mimimun, the following should be ready and provided:

• colors,

• spacing,

• and typography.

Front end clean-up

Make sure the front-end design is streamlined and functional. Either set up a call or make a recording to go over the front end with the Webflow Builder. This will allow them to begin building.

If there's a change in the design after handoff, ensure you update the Webflow Builder on that. The best way is to tag them simultaneously in Figma and the project's Discord channel.

Convert Mobile <-> Desktop

Convert mobile screens to desktop or desktop screens to mobile.