Workflow
Last updated
Last updated
There are multiple types of workshops. You can ask the Workshop Facilitator about the specific process or review the types of workshops in their documentation.
During workshops, you will be supporting the facilitator in making strategic product design decisions and guiding the client towards designing a product that their users should fall in love with. Some clients tend to be insecure and may need more or less handholding, in which case you can always give them advice and help steer the product in a direction, which will benefit the users.
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.
Show up to workshops with valuable insights that are relevant to the client's values. Provide feedback and assistance.
Read more here:
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.
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.
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.
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.
Once you fixed them, you can prepare design files, export all prototype screens, add them to Miro in preparation for the Iteration Workshop.
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.
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.
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.
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 screens to desktop or desktop screens to mobile.
