Redirecting to default login... Annotated Comps – Mobility Center of Excellence Team Website

This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated. View the most recent case studies on the Case Studies page. Please see the Zeplin Tool Case Study to the see the Design Team’s latest Annotated Comp process.

Annotated Comps

Annotated comps provide the developer with explanations of an application’s functions. Screenshots and annotations of an application produce visual explanations of a function. This case study explores the benefits of performing this practice to gain full knowledge of an application.

1. Annotated Comps Using MCoE Template

The examples show the process of using our Annotated Comp template created in Adobe Illustrator to help you create detailed screen flows with deeper explanation of interactions and functions. The steps below shows the simple and efficient process.

Step 1

Download our annotated comp template in Adobe Illustrator format (we have also included a PowerPoint format template in the zip folder).

Annotated Comp download

Step 2

Place your artwork inside the phone frames. You can easily place your screens in Illustrator by selecting File>Place…


Place Image In Annotated Comp example

Step 3

Be sure to carefully think through your flows and organize them in a logical order. You will notice that as you populate your document, you will go through several iterations as your Annotated Comps may reveal gaps or redundancies or red flags in your app’s structure and content. As illustrated in the sample below, each part of your screen that involves an interaction should include a visual call out with details on what the feature does for the app. The more details you can provide through the notes under each phone screen, the better your flows will be in terms of clarifying transitions and links between screens.

EBW Annotated Comps Phone example


EBW Watch annotated comps

2. Annotated Comps Through Prototyping

The examples show the process of using the Proto.io application to help layout the annotated computations.
Proto.io creates fully interactive prototypes that perform exactly like the application. Annotated computations provide a deeper explanation to functions. The process of going though an application on Proto.io and arranging written annotated computations provides a learning experience. This offers an in-depth knowledge of an application. The steps below shows the simple and efficient process.

Step 1

Familiarize yourself with the prototype application.

Proto.io Screen Shot

Step 2

Take screen shots of the applications various screens.

Annotated Comps Screenshots

Step 3

Explain the functions and transitions within and between each screen.

Annotated Comps Screenshots

Conclusion

Be sure to spend time creating annotated computations for an application. The simple process provides a high level of familiarity to the functions and principles of an application.