Exit

UX Design specs document

Print
Design project name: UX/UI Design System
Team name: UX Design team

App Product Definition

Definition #1

The UX Library is a design system for WorksafeBC. This UX/UI library contains a collection of css/html components, angular components, templates, references and working examples.

Definition #2

The UX Library is a website containing design specifications for designing web applications in WorkSafeBC.

Keep in mind

This is a design specs document and does not overwrite other technical documents or application design documents created by the development team.

User base

The users of this app are

  • Designers who need components and resources to design applications
  • Developers who need to use components to develop an application
  • External companies using the library as a reference
  • External designers using the library as a reference

Main roles

The design project requires coordination with various roles. These are the current roles:

Role name Project role description Main contact(s)
Product owner Determines the project roadmap and key features to deliver Joe Doe
Subject matter expert Determines the project roadmap and key features to deliver David
Business analysts Ensures the business requirements are in place NOT ASSIGNED
UX Design Determines flows and designs features from the user pespective Dorothy, George, Sandy, David
UI Design Designs the interface and determines the visual shape of the application Dorothy, George, Sandy, David
Front end developer Implements the user interface and connects with back end Harsha, Derek
Back end developer Figma prototype connecting all the screens Derek
Content / Copywriting Creates the copy and content for this application Kristine, Trevor, Ryan
QA Implements QA tests to ensure the quality of the application Kristine, Ryan, David, Harsha, 

Usability requirements

User's ability to:

  • Preview UI components
  • Copy component code
  • View usage rules for a component
  • Links to external resources or references

Accessibility requirements

The application design needs to consider:

  • Accessible worldwide via public URL
  • Accessible via mobile, tablet, laptop and desktop devices.
  • CSS Library can work without Javascript
  • Links to external resources or references
  • Library needs to be hosted under a public URL

Technical requirements

Design needs to consider the following technical advantages or restrictions:

  • Library uses bootstrap as a base
  • Library is Accessible via mobile, tablet, laptop and desktop devices.
  • The main library should be a single html document
  • Links to external resources or references

Design deliverables

The design documents and resources that will he handed off to the dev team are

  • Design specs document
  • Flows document
  • Screens
  • Prototype

Design deliverables and URL's

Design specs live in one or multiple URL's

Design spec Description URL
Design spec document General design specs and considerations http://...
Flows Flow diagram and variations http://...
Screens Individual mocks http://...
Prototype Figma prototype connecting all the screens http://...

Project URL's

Design specs live in one or multiple URL's

Name Environment URL
UX/UI Design system Development https://ux-static.online.dv.worksafebc.com/
UX/UI Design system Production https://ux-static.online.worksafebc.com/