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.
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.
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.