We reviewed the existing Quick Start Guide and found some issues in terms of usability. The contents of the kit needed to be redesigned, in addition to the Illustration style and colour palette of the guide. The steps had to be simplified and typographical improvements were essential for better usability. Issues: Sub-optimal drawings Inconsistency in the position of the hand drawings and components of the kit Illustration style was cognitively demanding Font size was not quite legible for the elderly App screens needed to be replaced with new screen design The steps needed to be simplified

The goal was to reduce the number of steps, while making the process simpler. We began by sketching an ideal walk-through of using Sugar.Watch® and categorisation of the umbrella steps, that further included some sub-steps. ---------- 2.1 User Experience Design (UX) - Redrawing all the steps All the steps were then redrawn to get clarity on the total number of sub-steps in the process of using Sugar.Watch® kit. The sugar.BEAT® app setup steps were also redrawn. This process was helpful in getting total count of the steps involved in the quick start guide and laying out the QSG. ---------- 2.2 UX Design - Simplifying Photography Step by step process of using the Sugar.Watch® kit was shot. The position of the components was kept consistent to reduce cognitive load. Hands were shot until the wrist, for the purpose of illustrations. The shots with better clarity of task in a particular step were shortlisted as a reference for illustrations.

Wireframe Draft -1 The QSG was taken in an accordion fold route, which goes from left to right on expanding. The orientation of the steps was kept horizontal. The first draft of the QSG involved assembling all steps in the form of photographs with placeholder text. This draft helped decide which steps to be reduced from the guide. The sub-step of components required for a particular step, was dropped as a sub-step in this draft. The back of the QSG was not designed in this draft. ----------- Wireframe Draft -2 The second draft of the QSG involved a few changes. The orientation of the steps was changed from horizontal to vertical for better usability. The step headers were emphasized by adding a patch of colour and reversing the typography. The app setup was added on the back of the QSG. Troubleshooting instructions & manufacturing details were also added on the back. ----------- Colour Palette Primary Palette was used for section headers, sub copy and warning text. Secondary Palette was used for section headers in app setup instructions.Tertiary Palette was used only for illustrations. ----------- Typography Font Brandon Text is used throughout the Quick Start Guide. The weights used are Regular, Medium and Bold. The font size used for body copy is 9 point, helps legibility. The warning text only is in 8 point size/ bold. The Headings are 15 point in size. The important part of the content is emboldened. ----------- Illustrations I re-did all the illustrations for the Quick Start Guide in Adobe Illustrator by using scratch photography as my reference. The Tertiary palette is used to give dimensions to the components. Thin strokes/outlines were given to each dimension and part of a component to make them distinct as they will be scaled-down in the QSG. A thick stroke is given to a part of a step highlighting the task to be performed. Thin strokes for less important outlines in the illustration. Directional arrows are used wherever necessary. ----------- Visual Design Draft - 1 All the illustrations were added in this draft. The size of the QSG was changed, increasing the overall width, which increased width per fold. The folds reduced from 12 to 9 folds. “Downloading the App” is the primary step here, after the Contents of the kit. The number of the sub steps was given importance by emboldening numbers and giving a thin stroke at the bottom of all the illustrations. The updated app setup was placed on the front instead of the back. The Sugar.Watch® instructions are followed after. Primary palette is used for Sugar.Watch® kit instructions. Secondary palette are used to distinguish app instructions from Sugar.Watch® kit Instructions.The Sugar.Watch instructions are continued on the back of the QSG. The cover page of Sugar.Watch® Quick Start Guide, remains at the back of the guide, as per the accordion layout. ----------- Prototype Visual Design Draft - 2 Since the app instructions were essential in the process of following the Quick Start Guide. The App screens were moved to the front of the guide followed by the steps to use the kit. One more iteration was designed after the Draft - 2 with visual changes in the contents of the kit and sections of the steps.

The Quick Start Guide was tested internally at Frontend.com to make sure the steps are simplified and helping the user experience of the QSG.