What's included

• Research & Discovery

  - User Personas: Representations of target users, including demographics, goals, pain points, and behaviours. - Empathy Maps: Visualisations of user feelings, thoughts, and actions to build empathy. - Journey Maps: Diagrams showing the user experience across various touch-points. - Competitor Analysis: Insights into the strengths and weaknesses of similar products or services. - Stakeholder Interviews: Summaries of interviews or workshops conducted to align business goals with user needs.

• Ideation & Concept Development

  - User Stories: Short descriptions of user needs and desired outcomes. - Information Architecture (IA): Organisational structure of the application or website, including a site map or navigation hierarchy. - Low-Fidelity Wireframes: Basic sketches or layouts to define structure and functionality without detailed design. - Mood Boards: Collections of visual inspiration and style references to guide the design direction.

• Prototyping

  - High-Fidelity Wireframes: Detailed wireframes showing specific elements like typography, spacing, and UI components. - Interactive Prototypes: Clickable versions of the design to demonstrate navigation, interactions, and workflows. - Micro-interaction Animations: Videos or prototypes showing transitions, button states, or other small animations.

• Design System

  - Style Guide: Documentation of visual elements like colours, typography, spacing, and imagery guidelines. - Component Library: Reusable UI components (e.g., buttons, forms, modals) with guidelines for their usage. - Iconography: Custom-designed or selected icons, with usage instructions. - Design Tokens: Scalable and consistent design variables, such as colour codes and font sizes, for implementation.

• Usability Testing

  - Test Scenarios and Tasks: List of tasks for users to perform during testing sessions. - Usability Testing Report: Summary of findings, user feedback, and recommendations for improvements. - Heatmaps or Clickmaps: Visualisations showing how users interact with the design.

• Final UI Designs

  - High-Fidelity Mockups: Pixel-perfect screens showing exactly how the final product will look. - Responsive Designs: Mockups for multiple device sizes (mobile, tablet, desktop). - Accessibility Standards Compliance: Confirmation that the design meets WCAG or other accessibility guidelines.

• Handoff to Development

  - Annotated Designs: Mockups with notes explaining interactions, behaviours, and design rationale. - Design Specs: Dimensions, font sizes, and colour codes for developers. - Prototyping Links: URLs to interactive prototypes for reference. - Asset Exports: Optimised icons, images, and other visual assets ready for development. - Version Control: Organised and versioned files to ensure clarity and consistency during development.