BM-TD-P-25-003
1. Purpose #
1.1 This procedure establishes a formal and standardized process for the design phase of all approved projects and products. Its purpose is to ensure that all UI/UX design, branding, and user flow documentation is meticulously planned, developed, reviewed, and approved before the start of the development phase, ensuring a cohesive and user-centric final product.
2. Scope of Application #
2.1 This procedure applies to all technology-driven project and product planning activities that follow executive approval from the Project/Product Initiation Procedure (BM-TD-P-25-001). It covers all planning-related tasks and responsibilities prior to the formal commencement of the development (sprint execution) phase.
3. Definition #
3.1 Design Phase: The period of a project’s lifecycle dedicated to creating the visual and interactive elements of the product or system, including wireframes, mockups, and prototypes.
3.2 UI/UX Design: User Interface and User Experience design, focusing on the aesthetic and functional aspects of a product that users interact with.
3.3 Wireframes: A low-fidelity, static representation of a product’s interface, focusing on layout, content, and navigation rather than visual aesthetics.
3.4 Mockups: A high-fidelity visual representation of a product’s final design, including colors, typography, and imagery.
3.5 Prototype: An interactive model of the product that simulates its functionality, allowing for user testing and validation of the user flow.
3.6 Design System: A collection of reusable components, design standards, and guidelines that ensure consistency across all product designs.
3.7 Design Sign-off Form: A formal document used to obtain and record final approval from all relevant stakeholders on the completed design assets. 3.8 State management: how an app keeps track of and updates its data or information so everything shows the right things at the right time.
4. Responsibility #
4.1 Creative & Design Department
4.1.1 Leads the entire design process, from wireframing to final mockup creation.
4.1.2 Translates the requirements from the Planning Document into a user-centric design.
4.1.3 Develops and maintains the Design System for consistent branding and user experience. 4.1.4 Ensures all design assets meet strict quality and clarity standards. This includes providing a variety of design options, implementing design principles and ensuring visual consistency and aesthetic alignment with brand identity or client needs. 4.1.5 Prepares all final design assets and documentation for handover to the Technology Department.
4.2 Technology Department
4.2.1 Has ultimate ownership of the project’s technical aspects.
4.2.2 Provides critical technical input and feasibility assessments during the design phase.
4.2.3 Reviews all design artifacts against key technical standards, including scalability, performance, accessibility, responsiveness, and state management.
4.2.4 Collaborates closely with the Creative & Design Department to resolve any design-related technical challenges.
4.3 Business Development Department
4.3.1 Provides feedback on designs to ensure alignment with original business requirements and client needs.
4.3.2 Participates in design review meetings to validate that the visual and functional design meets business objectives.
4.4 Project Leadership
4.4.1 Lead Designer (Creative & Design): Oversees the design process timeline, scope, and budget for the creative phase. Ensures design artifacts, including wireframes and mockups, meet quality and clarity standards. Manages communication with the Business Development Department regarding design.
4.4.2 Technical Lead (Technology): Oversees the project’s technical feasibility and alignment with development standards. Coordinates with the Creative & Design team to provide technical input. Manages communication between the design team and the development team. Facilitates the formal design review and sign-off process, including escalation if necessary.
4.5 Technology Department Head (IT Operational Manager)
4.5.1 Provides final approval and sign-off on the completed design assets and documentation, ensuring alignment with overall project goals and standards.
5. Work flow #
5.1 Design Kickoff
5.1.1 The Creative & Design Department receives the approved Planning Document (from BM-TD-P-25-002).
5.1.2 The Head of Creative & Design assigns a Lead Designer, and the Head of the Technology Department assigns a Technical Lead. These two roles will serve as the Project Leadership for this phase. 5.1.3 The Technical Lead and Lead Designer schedule and facilitate a kickoff meeting with all involved departments to review the project plan and set design objectives.
5.2 Wireframing & User Flow
5.2.1 The Lead Designer creates low-fidelity wireframes based on the project’s user stories and requirements.
5.2.2 User flows and navigation are mapped out and presented to the Technology and Business Development departments for review.
5.2.3 The Technology Department shall conduct a technical review of the wireframes, assessing their technical feasibility within the project’s constraints and producing a formal technical feasibility report. 5.2.4 Feedback and the technical report are documented in a shared repository (thought created telegram group that included both technology and creative teams).
5.3 Mockup & Prototype Creation
5.3.1 Based on approved wireframes, the design team creates high-fidelity mockups, incorporating brand guidelines, color palettes, and typography.
5.3.2 A clickable prototype is developed to demonstrate the user experience and functionality.
5.4 Technical Design Standards Check
5.4.1 Before the formal review, the Technology Department and Creative & Design Department must collaboratively ensure the design assets meet the following standards:
1. Scalability: All components are defined in the Design System for future reuse. 2. Performance: Image formats with high quality and complex animations are minimized. 3.Responsiveness: Designs are specified for all major screen breakpoints (mobile, tablet, desktop). 4. State Management: All UI components have clear visual specifications for all states (e.g., default, hover, active, disabled).Good state management in UI/UX design ensures predictable and consistent user interface behavior. Poor state management leads to confusing and frustrating experiences.
5.5 Design Review & Iteration
5.5.1 The Technical Lead organizes a formal review meeting where mockups and the prototype are presented to all relevant stakeholders. The initial review cycle is expected to take an average of one business days of the initial design submission to the Technology Department.
Feedback is gathered and documented shall be finalized by 3 – 5 business days and submit final design to technology department
5.5.2 The Technical Lead ensures that feedback is addressed and documented before proceeding.
5.6 Final Design Sign-off
5.6.1 Once all revisions are complete, the final design assets (mockups, design system, prototypes) are compiled into a handover package.
5.6.2 The Technical Lead circulates a Design Sign-off Form to the Heads of the Creative & Design, Technology, and Business Development departments for their signatures. All official communication regarding design approval will be conducted through designated channels (e.g., Slack, email) and a common Telegram group for the TD and CD teams for rapid updates.
5.6.3 The Technical Lead is responsible for setting clear, time-bound deadlines (e.g., 2-3 business days) for feedback and sign-off to ensure project timelines are met. This includes communications with the Business Development Department regarding client approvals, with a clear timeline for their response.
5.7 Escalation for Non-Sign-off
5.7.1 If a department head withholds sign-off, the Project Lead must document the reason on the form.
5.7.2 The issue is then escalated to the Technology Department Head and General Manager for resolution within one working days. 5.8 Handover to Technology Department 5.8.1 The signed-off design assets and documentation are formally handed over to the Technology Department. 5.8.2 The Project Lead schedules a handover meeting with the development team to walk through the final assets, address any questions, and confirm. 5.8.3 All final assets are stored in a designated, shared project repository. 5.9 Transition to Development Phase 5.9.1 With the successful handover, the project officially transitions to the Development and Monitoring phase of the project lifecycle.
6. Generating records #
6.1 << BM-TD-P-25-002-01A Project/Product plan document>> 6.2 << Meeting minute>>
7. Reference documents #
7.1 <<BM-TD-P-25-002-01A Project/product plan: A form to formally obtain and record stakeholder approval on project plan.>>
8. Relevant documents #
8.1 << BM-TD-P-25-001 Project and Product Initiation Procedure>> 8.2 <<BM-TD-P-25-002 Project / Product Planning Procedure>>