The following image is a technical drawing which highlights significant elements of the designs and describes how each of the assets were designed to make the user experience as intuitive as possible while at the same time meeting the needs of the client. The technical drawing displays how the design elements have been distributed over the available screen space along with annotations which explain the particular elements significance in the app. The technical drawing also includes the client’s style guide document enabling the reader to clearly identify where we have used their desired typography and colour scheme. The technical document is a relatively important design document as it enables project programmers to identify what the designers consider to be the central focus of the app and is usually accompanied by a pseudo code document which is a simplified coding document in which the designer expresses the desired functionality of the app too the programmer.
After the completion of the initial prototype we identified that displaying all 63 of the clause hotspots on the screen at one time visually overwhelmed the user and wasn’t very attractive therefore the implementation of the “clause category filter” enables users to highlight hotspots associated with particular categories therefore making the app much more user-friendly and accessible.
The second technical drawing addresses the implementation of the filter system by displaying the various clause categories in a the form of expandable side bar.