Technical Drawing

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.

technical drawing 1After 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.

technical drawing 2

 

Advertisements

How Design Was Influenced By Objectives

Objectives set out by the Client

Objective 1:

Application needs to display their high-resolution image of the Magna Carta Document.

Design:

Our application was ultimately build around the high-Resolution image the client provided. Prior to receiving the required image from the client we were able to produce an initial prototype from another image of the Magna Carta which enabled us to establish whether the vision of the client was indeed feasible or not. One of the major issues associated with using the raw high-resolution Magna Carta image is the file-size, one of the problems associated with having a considerably large image is lag which hinders the overall functionality of the app particularly when loading  and navigating the app. This objective also influenced us to implement navigational gestures such as zoom-in and zoom-out as users with larger fingers may of found it difficult to select specific clause hot-spot if the image was fixed especially as they are so close together.

3

Objective 2:

The application must provide Latin-to-English translation for at least a number of clauses.

Design:

A significant section of the screen space on the application was allocated to the clause translation text and utilized the QuaySans font expressed in the client’s style guide. This particular section uses an opaque background which prevents the translation text from blending into the High-Resolution image which would of hindered the visual clarity of the translation text. There is still a large section of the Magna-Carta document unobstructed enabling the user to still select clause hotspots. We were able to translate all 63 of the clauses from Latin into English by the deadline and it’s possible that the clauses could be translated into other languages in the future.

Screen Shot 2015-04-24 at 15.43.36Objective 3:

The application must appeal to a wide-audience (Young + Older).

Design:

The way in which we ensured that the application was visually appealing to all audiences and functioned intuitive was to keep to both the Apple and client style guides. By utilizing generic touch gestures and design elements it reduced the risk of cognitive-friction which may of been present if we attempted to implement complex means of navigation. By following the style guide set by the client it will ensure that our app appears connected to the parent application therefore ensuring a smooth visual transition between the two .

Colour Guide

Objective 4

The client asked for miscellaneous elements of the Magna Carta Document be highlighted and have hot-spots.

Design:

This was an objective set by the client quite late in the development of the project which resulted in use needing to produce additional logos for the filter menu as well add additional hotspots to the outside of the document. The client continued to ask for additional hot-spot elements to be added up to 2 days before the deadline.

Random hotspots

Interpreting Designs for XCode

Extracting Assets The designs for our application were done using software such as Adobe Illustrator and Photoshop. This enabled designs to be easily modified and added to with every iteration of the project however the challenge of  transferring  these designs into a functioning app in  XCode is significant in meeting the needs of the client. One of these tasks involved the long process of recording the  X & Y coordinates of every clause hotspot going into the application. The clause hotspots were put into categories and colour coded which aided the programmers when creating the strings  associated with these categories Magna Carta Boxes Once all of the coordinates were recorded the programmers could then input and paste these values into Xcode which ultimately sped up their workflow. Here’s an example of a possible string;

Taxation Pink (#e000b8)

Clause 12:

  1. X = 6165, Y = 2528, Width = 1354 Pixels, Height 77 Pixels
  2. X = 398, Y = 2667, Width = 6212 Pixels, Height 77 Pixels

Clause 14:

  1. X = 5359, Y = 2788, Width = 2182 Pixels, Height 77 Pixels
  2. X = 398, Y = 2893, Width = 7143 Pixels, Height 77 Pixels
  3. X = 407, Y = 3010, Width = 6285 Pixels, Height 77 Pixels

Clause 15:

  1. X = 6683, Y = 2989, Width = 891 Pixels, Height 77 Pixels
  2. X = 398, Y = 3127, Width = 5256 Pixels, Height 77 Pixels

Clause 25

  1. X = 1710, Y = 3821, Width = 3256 Pixels, Height 77 Pixels

The coordinates were also recorded for other design elements such as the title bar and text fields. These were then published as a word document and accompanied with an PSD showing the guidelines for each of the assets which enabled the programmers to cross check that the coordinates were correct.

  1. Capture

iPad Optimisation

Following the creation of an initial prototype and getting an understanding of the fundamental functionality of the app we were at a  suitable stage to begin producing mockup designs for the app. The designs took into account the requirments set out by the client such as, we must design the app for both iPhone and iPad as well as keep to their pre-defined style guide.

Designing for both iPad and iPhone resulted in us needing to format content differently based on the device the app is being viewed on.  For example as the iPad utilizes a 4:3 aspect ratio it enables more content to be distributed along the horizontal axis while the iPhone’s 16: 9 aspect ratio resulted in content needing to be stacked vertically.

1 2

The fonts used in all of the designs are the fonts used in client’s style guide document which is “Eidetic Neo regular” and “Quay Sans”. The “Eidetic” font is primarily used for page titles and links to other pages while the “Quay Sans” font is used for static body text.

The “Clause Categories” page is a prime example where the design of the page dramatically changes whether you are viewing on iPad or iPhone. The iPhone design utilizes an expandable table view which is a common method used in mobile applications for filtering through lots of content. The iPad design utilizes a more graphical, interactive box method to navigate where each of the categories is accompanied by a relevant image. The page is designed so that only nine categories are visible on the page at once however the user can swipe the interface left or right to reveal another stack of categories, this design choice prevents the interface from being too overcrowded with information which would likely confuse the user.

Goal Oriented Design

Due to having a clear understanding on the desired functionality of the app we utilized what’s known as a “Goal Oriented” approach to the design. A “Goal Orientated Design” approach prioritises the needs of the user therefore creating a user-friendly experience which minimalizing the risks associated with ‘Cognitive friction’.  One way in which this is established in our design is by following commonly used design elements for iPad such as positioning the navigation bar 44 pixels from the top of the display.

3

 

Incorporating elements like this into our app enables users to intuitively interact with the app’s interface which ultimately results in a better user experience for the user.

Use Touch And Real-World Metaphors

Our app incorporates many of the generic touch gestures to navigate its interface this was again another way of making the app as intuitive as possible and minimalizing the  Cognitive friction associated with the navigation of the app. Perhaps the most complex gesture in this app is the “Zooming in” & “Zooming out” which make cause difficulties with older users.

Typography: Is it nice to read?

Due to the app displaying lots of text its important that the text is easy to read for users. As designers we were restricted to use of two font types Eidectic Neo regular and QuaySans which was a requirement set by the client. The fonts are relatively easy to read  and the large screen of an iPad enables us as designers to increase the size of the font enabling the app to be accessible to users with sight problems. The use of a translucent border around the contextualization text prevents the text from blending into the background which would otherwise hinder the visual clarity of the text.

Our app doesn’t consist of a large quantity of rich media assets such as videos or animations however we are using a considerably large image of the Magna Carts which fits perfectly on the iPad display however due to its large file size will likely cause render problems so its important that we optimize this document as much as possible striking a balance between lowering its file size as much as possible while at the same time not hindering its quality.