Versions Compared

Old Version 19

changes.mady.by.user Oliver Prudlik

Saved on

compared with

New Version Current

changes.mady.by.user Oliver Prudlik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The MVP should help us to better structure our work in UX/UI development.
It should be distinguished which work is helpful for all projects and which is only helpful for certain projects.
The features of the MVP are intentionally kept low as possible, because the end date of the MVP is 31.1203.20202021.


This is a description of the minimum viable product (MVP) of the Inspire Design Kit.
The MVP will only exist in one theme (Astronaut).
The Tokyo at night theme will initially be used for marketing purposes only and will be implemented after completion of the Astronaut.
The MVP will be finalized by 31.1203.20202021.

The MVP should help us to better structure the work on the design kit.

...

  • It must be possible to create applications prototypes with the Design Kit.
  • Special requirements for the Design System were deliberately omitted. They are not part of the MVP.
  • All UI elements must be extendible to implement these special requirements. How and when special requirements will be implemented is still to be decided.
  • A look at the design systems "IBM carbon design system", "SAP Fiori Design System" and "Google Material Design" helps us to recognize which features are components of an MVP and which features are extensions.

UI-Elements

​

Templates ID'sAtoms, Molecules and Organisms
Status
MVP RequirementsFeaturesDocumentationToDoComments

ID1 Colors

StatussubtletruecolourGreentitledone




https://confluence.germanedge.com/x/XYC-AQ
https://wasp2-dev.myapp.de:444/live-style-guide/theming

  • Documentation
  • Final angular check

ID1 Typeface

Status
colourYellow
titleIn Progress




https://confluence.germanedge.com/x/YoC-AQ
  • Documentation 
  • Final angular check

ID1 Icon
StatuscolourYellowtitle
In Progress



https://confluence.germanedge.com/x/_MYdAg
https://wasp2-dev.myapp.de:444/live-style-guide/icons
  1. Definition of Icon-Set for MVP
  2. Design of missing Icons
  3. Icon to Font
  4. Final angular check
  5. Documentation

ID2 Dashboard & basic components

Dashboard

StatuscolourYellowtitleIn Progress

  • Header
  • Contentarea

https://confluence.germanedge.com/x/7KMdAg
code is missing
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Header

StatussubtlecolourGreentitledone

true
  • Burger
  • Date & Datepicker
  • Product-Logo
  • Tool/App/Module Naming
  • Toolbar(Search-, Setting- & Notification Icon)

https://confluence.germanedge.com/x/JqQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: still struggling with date&datepicker in the header, we can filter but filter result is not shown there and as a user you can't see a filter has been used here. (did the test in dSFM)
→ we need the documentation of this end user tests. And yes, the filter result should be shown. But I think it is already.

Overlay

StatuscolourYellowtitle

In Progress
  • Content
    • detailed Design Grid description

https://confluence.germanedge.com/x/76MdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Floating Sidebar

StatuscolourYellowtitleIn Progress

  • Action Icon
  • Title
  • Link

https://confluence.germanedge.com/x/IKIdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Panel

StatuscolourYellow

titleIn Progress
  • Contentswitch
  • Content
  • Toolbar

https://confluence.germanedge.com/x/LaQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: Navigation is a must for Menu editor development, must be aligned towards that functional demand. But functional demands of Notifications are still too unclear to be handled, wouldn't be better to get this out of the MVP?

Sandbox

Status
colourRed
titleNot f. MVP

Not MVP - must be discussed StatuscolourRedtitleNot f. MVP

Toast Notification

Status
colourRed
titleNot f. MVP

  • Icon
  • Title
  • Subtext
  • Link
  • Toolbar
  • Colorcode
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check

Inline Notification
StatuscolourYellowtitleIn Progress
  • Title
  • Subject
  • Link
  • Toolbar
  • Picture
  • Colorcode


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes:
Since notifications are still functional unclear, do we exclude from MVP?
an error and message handling when system is down, user can't log in ...
ID3 Boardlets & content components

Default Boardlet

Status
subtletrue
colourGreen
titledone

  • boardlet
    • Content Bereich
      • detailed Design Grid description
    • Toolbar
      • Icons
    • Title
    • Datepicker on demand
  • tabs
    • Toolbar bottom with control extension


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: incorporate search and filter?

Dialog

StatussubtletruecolourGreentitledoneContent

  • Dialog
    • Form
      • Title
      • Content Bereich
      • Top Toolbar( only without Sidebar)
      • Bottom Toolbar( only without Sidebar)
        detailed Design Grid description 
    • Sidebar on demand
      • Title
      • Content Bereich
      • detailed Design Grid description
      • Top Toolbar 
      • Bottom Toolbar
    • Info Field


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Cards

Status
colourYellow
titleIn Progress

  • Setting Card
    • Title
    • Subtitle
    • Toolbar
    • Drilldown
    • Content
Info
    • Icons
  • Summary Card
*
  • Title
  • Subtitle
  • Content
  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check
Wannes: we could first focus on menu and dashboard editor for now (content card)?
    • Setting card which has no drilldown
  • general Features
    • single/ multi selectable

Overflow Menu

Status
colourYellow
titleIn Progress

  • Content
    • Group
    • Links
    • Button
  • Open Direction
  • Animation*
    • Parent ui-element/extension am button


    1. Design of missing Components
    2. Update Zeplin
    3. Detailed Design Grid description
  • Documentation
  • Final angular check

    • Tooltip

    Status
    colourYellow
    titleIn Progress

    • Rookiemode Tooltip*
      • Content
    • Tooltip
      • Content
      • Whitelist/Blacklist
    1. Basic Design
    2. Present final design in UI/UX Guilde
    3. Zeplin Documentation
    4. Documentation
    5. Final angular check
    Wannes: i think tooltip is MVP while rookiemode is notTags

    Status
    colourYellow
    titleIn Progress

    • Icon Button
    • Text Link
    • Icon
    • Colorcode
  • Basic Design
    • Present final design in UI/UX Guilde
    Zeplin
    1. Documentation
  • Documentation
    1. Final angular check


    		Modal
    StatuscolourtitleIn Progress
    Yellow
    • Title
    • Subtitle
    • Link
    • Button


    1. Design of missing Components
    2. Update Zeplin
    3. Detailed Design Grid description
    4. Documentation
    5. Final angular check

    ID4 Tables components
    1. Table header
    2. Table content
    3. Pagination
    4. controlbar & controlelements
    StatuscolourYellowtitleIn Progress
    • global search über alle spalten der Tabelle
    • spalten basierte suche/filter
      • Filterkriterien festlegen (gt, lt)
      • Filterkriterium sichtbar und deaktivierbar
    • Process bar
    • Toolbar top
    • Toolbar bottom
    • Paginierung
    • Buttons
    • pagination
    • global search over all columns
    • sorting per column
    • filtering per column
    • define filter property
    • select a row/ multiple rows
    • select all rows
    • show state of row/ rows

    1. Basic Design
    2. Present final design in UI/UX Guilde
    3. Zeplin Documentation
    4. Documentation
    5. Final angular check

    Wannes:

    • column picker/chooser (an icon often on top of the table)
    • tree-table
    • error indicator
    • actions/information per record
    • scrollbar right and under
    • paging and pagination
    • simple search (single input)
    • advanced search (multiple inputs)
    • filter on table content

    Informational: could be re-used:

    • progress bar in use X-series (don't restyle them, are in use already)
    • process bar in use X-series (don't restyle them, are in use already)
    ID5 Buttons & control components
    1. Buttons
    StatuscolourtitleIn Progress
    Yellow
    • Text
    • Icons
    • Switch
    • Text/Icon
    • Text/Text
    • Icon/Text/Icon
    • Button Style
    • Button Size
    • Button Type


    1. Design of missing Components
    2. Update Zeplin
    3. Detailed Design Grid description
    4. Documentation
    5. Final angular check
    ID6 Link components

    Link



    		Checkbox
    • Icon Button
    • Text Link


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check


    		Radio
    • Icon Button
    • Text Link


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check

    ID6 Link components

    Link

    StatuscolourYellowtitleIn Progress

    • Icon Button
    • Text Link
    • Icon

    		ID6
    Link
    Links Assets
    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check

    Tree



    Overflow Menu

    • Content
      • Group
      • Links
      • Button
    • Open Direction
    • Animation*
    • Parent ui-element/extension am button


    1. Design of missing Components
    2. Update Zeplin
    3. Detailed Design Grid description
    4. Documentation
    5. Final angular check


    Tree

    StatuscolourYellowtitleIn Progress

    • Expand icon
    • Sub- or Checkbox Icon
    • Text Link
    • More Icon Button


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check

    ID7 Input & Dropdown components
    1. Default input
    2. Specal input
    3. Default dropdown
    4. Special dropdown
    5. Dropdown Links
    6. Datepicker/Timepicker
    StatuscolourYellowtitleIn Progress



    1. Design of missing Components
    2. Update Zeplin
    3. Detailed Design Grid description
    4. Documentation
    5. Final angular check
    Radio

    Status
    colourYellow
    titleIn Progress



    		Tags
    • Icon Button
    • Text Link
    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check
    • Icon
    • Colorcode




    1. Basic Design
    2. Present final design in UI/UX Guilde
    3. Zeplin Documentation
    Checkbox

    Status
    colourYellow
    titleIn Progress

    • Icon Button
    • Text Link
    Detailed Design Grid description
    2. Documentation
    3. Final angular check


    		Input
    status
    colourYellow
    titleIn Progress
    • Label field
    • Input field
      • Placeholder 
    • Info Container
      • Icon
      • Info Field
    • Input Style
      • Validation
      • State
      • Size


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check


    		Dropdown
    StatuscolourYellowtitle
    In Progress
    • Label field
    • Input field
    • Icon Button
    • Content(Overflow Menu*)
      • Group
      • Button
    • Input Style
      • Validation
      • State
      • Size


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check


    		Multiselect
    StatuscolourYellowtitleIn Progress
    • Label field
    • Input field
    • Icon Button
    • Tag
    • Content(Overflow Menu*)
      • Group
      • Button
    • Input Style
      • Validation
      • State
      • Size


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check


    		Datepicker
    StatuscolourYellow
    titleIn Progress
    • Input Field
    • Icon 
    • Toolbar Bottom
    • Contentswitch
    • Content
      • Title
      • Form
      • Sidebar
    • Input Style
      • Validation
      • State (Dropdown/Link)
    • select a date
    • select a time
    • select a date/time range
    • select a commonly used date range
    • manual date input
    • manual time input

    1. Basic Design
    2. Present final design in UI/UX Guilde
    3. Zeplin Documentation
    4. Documentation
    5. Final angular check

    Graphics

    Karma

    ID8

    Tooltip

    • Rookiemode Tooltip*
      • Content
    • Tooltip
      • Content
      • Whitelist/Blacklist


    1. Basic Design
    2. Present final design in UI/UX Guilde
    3. Zeplin Documentation
    4. Documentation
    5. Final angular check
    		Wannes: i think tooltip is MVP while rookiemode is not

    Graphics

    		Karma
    StatussubtletruecolourGreentitledone
    • SVG Images
      • bad
      • neutral
      • bad


    • Documentation
    • Final angular check

    ChartsPie Chart

    Thomas King



    • Documentation
    • Final angular check


    		Bar Chart

    Thomas King



    • Documentation
    • Final angular check


    		Doughnut Chart

    Thomas King



    • Documentation
    • Final angular check


    		Line Chart

    Thomas King



    • Documentation
    • Final angular check


    General UX-Concepts

    Info

    List here all ux-concepts which are urgently needed for the MVP


    Templates ID'sAtoms, Molecules and OrganismsMVP RequirementsFeaturesDocumentationToDoComments

    Spacing







    Action Placement







    Navigation







    Notification







    Validation








    Not In MVP UI-elements

    Templates ID'sAtoms, Molecules and OrganismsMVP RequirementsFeaturesDocumentationToDoComments
    ID2 Dashboard & basic components

    Sandbox

    		Not MVP - must be discussed
    PicturesNews

    Status
    colourRed
    titleNot f. MVP

    Not MVP - must be discussed

    Status
    colourRed
    titleNot f. MVP

    ChartsGantt Chart

    Status
    colourRed
    titleNot f. MVP

    Not MVP - DevExtreme


    Status
    colourRed
    titleNot f. MVP



    Toast Notification

    Pie Chart
    • Icon
    status
    • Title
    colour
    • Subtext
    Yellow
    • Link
    title
    • Toolbar
    In ProgressThomas King
    • Colorcode


    1. Detailed Design Grid description
    2. Documentation
    3. Final angular check
    Bar Chart
    Wannes: Since notifications are still functional unclear, do we exclude from MVP?
    PicturesNewsNot MVP - must be discussed

    Status
    colour

    Yellow

    Red
    title

    In Progress

    Thomas King

    • Documentation
    • Final angular check
    Doughnut Chart

    Status
    colourYellow
    titleIn Progress

    Thomas King

    • Documentation
    • Final angular check
    Line Chart

    Status
    colourYellow
    titleIn Progress

    Thomas King

    • Documentation
    • Final angular check

    UX-Concepts

    Info

    List here all ux-concepts which are urgently needed for the MVP

    ...

    Not f. MVP


    Filter

    1) make it possible to store a filter for a user group/all other users

    2) make it possible to let other users change this filter

    3) filter criteria: provide an auto complete input box

    4) filter criteria: provides support for a flag

    5) filter criteria: use a filter to filter out data on a dropdown (to decrease the amount of possibilities in the dropdown)

    6) make it possible to use ><= in combination with a criteria

    7) make it possible to use OR instead of AND

    8) make it possible to provide extra filter criteria by extracting the criteria




    ChartsGantt ChartNot MVP - DevExtreme

    Status
    colourRed
    titleNot f. MVP


    Barrier-free








    Not In MVP - General UX-Concepts

    Templates ID'sAtoms, Molecules and OrganismsMVP RequirementsFeaturesDocumentationToDoComments

    ...