DESIGN DOCUMENTS & DELIVERABLES

04/10/2023 MICROSOFT CONFIDENTIAL 2

deliverable and reviews across the Project

1

2

3

4

Project goals, user goals, information architecture & story board

Interaction model & visual design proposal

Final visual design & measured UI

4 Regular drops of working code & broad dogfooding

Deliverables needing approval or review

04/10/2023 MICROSOFT CONFIDENTIAL 3

How long will it take me to design my application?• How long is a string? This all depends on the

complexity of your application and the ambition.

deliverableSmall

(1 - 15 screens)

Medium (15 - 50 screens)

Large (> 50 screens)

Product goals 1 – 3 days 1 – 3 days 4 – 7 days

Story boards 1 – 3 days 3 – 7 days 5 -10 days

Information architecture 1 – 3 days 5 – 10 days 8 – 14 days

Visual design proposal 1 – 3 days 1 – 3 days 3 – 5 days

Final visual design and measured UI

1 – 3 days 5 – 10 days 10 – 14 days

04/10/2023 MICROSOFT CONFIDENTIAL 4

Can I find efficiencies?

Yes, as illustrated below.• Some tasks that can occur simultaneously.• Some tasks never overlap.• Caution, there are few decisions made in design that

don’t interact with other pieces.

Product goals

Story boards

Information architecture

Visual design proposal

Final visual design and measured UI

04/10/2023 MICROSOFT CONFIDENTIAL 5

Project goals, information architecture & story board1

• Information architectures illustrate how each screen in a system relates to each other. It also proposes the placement of elements on each screen. It is not the final visual design. It shows the applications hierarchy, and that hierarchy should align with your users goals. This should not be a Power Point. It’s a large map of your UI.

• Story boards show illustrate key user flows. You should show your high priority scenarios. These can be sketched or outlined, but they should illustrate steps to a task.

04/10/2023 MICROSOFT CONFIDENTIAL 6

information architecture: this should show hierarchy, and align to your stated user goals.1

04/10/2023 MICROSOFT CONFIDENTIAL 7

Interaction model & visual design proposal2

• Interaction models account for every possible click or touch that a user can make in the UI, and the response of the system. This should not be a Power Point. It’s a large map and more detailed map of your UI.

• Visual design proposals illustrate how you want your application to look and feel. It is the style of your application. Control placement, size, and color should be near final, but not yet measured to the pixel.

04/10/2023 MICROSOFT CONFIDENTIAL 8

Interaction modelthis should account for every possible click and path.

2

04/10/2023 MICROSOFT CONFIDENTIAL 9

Final visual design & redlines3

• Final Visual design is a refinement of your visual proposal. It accounts for feedback and system functionality, constraints, design goals. It is an illustration that documents every major screen and how you want them to look.

• Redlines measure the size, placement, and color value of every control and visual element. If you can see it, then it has a value. Document it.

04/10/2023 MICROSOFT CONFIDENTIAL 10

Final visual design & measured UI3