Purpose
This page establishes the standardized and efficient workflow for the website design mockup process. It ensures consistency in design quality, meets client requirements, and facilitates smooth handoffs to the development team.
Application
The procedure applies to all team members involved in the website design process, including designers, developers, project managers, and stakeholders. It is implemented during the initial stages of the website development projects and guides the creation, review, and approval of design mockups.
1. Gather Project Requirements
The Project Manager/Sales Manager will meet with clients to understand their goals, target audience, and branding guidelines. They will document the project requirements and expectations for the website design mockup. Participation in the kickoff meeting will then be required.
2. Design Ideation
Brainstorm design concepts based on the gathered requirements and sketch rough wireframes or layouts to visualize potential designs.
3. Mockup Creation
Use the mockup design software Figma to create high-fidelity mockups. When designing the mockups, incorporate branding elements, colour schemes, and imagery as per client guidelines.
Figma Credentials
Register your Figma account using your @buzzmarketing.ca email address. After this is complete, we will add you to our Figma Team.
4. Team Review & Feedback
Share the document with the team for review and feedback to gather input on the design elements, functionality, and overall aesthetics. Apply those revisions and share the updated mockups with the team. Once approval has been received, queue up the mockups for the Project Manager to send to the client/stakeholder.
5. Client's Revision & Iteration
Once client revisions have been received, implement and revise the mockups accordingly. Ensure that there is alignment with the client's expectations and project goals.
6. Approval
Confirm that the mockups meet all requirements and design objectives by obtaining final approval from the client or project stakeholders.
7. Handoff to Development
Prepare the mockups for the handoff to the development team. Ensure the developers have the necessary assets, specifications, and instructions.
8. Maintenance & Inside Pages
Maintain version control to track changes throughout the design process. For other inside pages, repeat the process listed above.
Additional Points to Consider
Communication Channels
Establish clear communication channels for sharing mockups and gathering feedback. In our case, it is Teamwork Projects and Teamwork Desk. Be sure to post all mockup versions and updates to the assigned tickets.
Timeline Management
Set realistic timelines for each stage of the mockup process and communicate deadlines to team members and stakeholders to ensure timely completion.
Quality Assurance
Implement quality assurance measures to ensure the mockups adhere to design standards, are error-free, and function as intended across various devices and screen sizes.
Accessibility Considerations
Integrate accessibility principles into the design process to ensure the website is usable and navigable for all users.
Client Education
Educate clients about the mockup review process and encourage them to provide constructive feedback that aligns with the project objectives and user needs.
Team Collaboration
Foster collaboration and open communication among team members to encourage creativity, innovation, and exchange of ideas throughout the mockup design process.
Continual Improvement
Regularly evaluate the effectiveness of the mockup process and seek feedback from team members to identify areas for improvement and optimization.