ANNOTATE
A new web app for efficiently creating UI Specifications.
OBJECTIVES
Design a web app that allows the CQL design team to quickly and efficiently create UI specs utilizing their current Sketch and InVision workflow.
CLIENT
CQL Corporation
TOOLS USED
Sketch, Keynote, Miro, Tempo, Slack, Zoom
Team
Brandon Knap, Design Lead
MacKenzie DeWitt, UX Lead
Eric Petroelje, Technical Lead
MacKenzie DeWitt, UX Lead
Eric Petroelje, Technical Lead
Jordan Knol, Project Manager
Deliverables
Personas, Feature Requirements, Sitemap, Wireframes, Creative Comps, UI Specs
Identifying Users
I identified user groups, conducted interviews, and consolidated painpoints and opportunities in persona documents to reference throughout the development of the web app.
improving workflow efficiency
To avoid duplicating artboards, making edits to comps and wireframes in multiple places, and sifting through Sketch layers to readjust annotation points, I utilized InVision’s share link functionality to optimize their workflow.
InVision’s share link functionality creates a JPG that can populate comps in Annotate to begin creating UI Specs. This improves a designer’s workflow by reducing time spent updating annotations within layers of their Sketch file and then reuploading to InVision.
Once a screen is loaded in from the InVision link, designers can begin placing annotation points on top of the image.
THE VISUAL SYSTEM
I sketched out and tested some ideas for creating an editor with defined fields that allows designers to enter and style content. I needed to strike a balance between creating consistency and allowing flexibility for unique annotations.
Most of the annotations that UX Designers make fall under “Rules” (providing details on how something appears visually), and “Functionality” (what happens when a user clicks or interacts with something on-screen). There is one “Custom” title field and text area if designers need to call out information specific to a project (like future state items or if a feature is custom). A WYSIWYG editor is paired with each text area for basic formatting to create contrast for important annotation information.
improving Communication with Developers
Designers can create share links to projects or specific pages within a project to distribute to developers. I incorporated interaction between annotation points and their corresponding annotations to improve the readability of the UI Specs.
As clients and developers open a share link, global page information will automatically open and will stay collapsed after the first dismissal.
They can select an annotation point and it will highlight and open the corresponding annotation information.
Both the editor and the wireframe on the screen can scroll independently from each other so users don’t have to recall annotation information off-screen.
