Final designs

Design Process / Iterations

These were our first mockups on little cutouts. Very basic and primitive lol, but a starting point no less. We explored different UI elements and ways of using the phones features here

From there we sort of considered what extra screen were needed, and the order the screens might be accessed. We decided to move the menu to the bottom so the user wouldn't have to cover the screen/map with their hand, etc.

I quickly designed a digital version of our app for the interim presentation. At this point, nothing was set in stone, it was however nice to be able to play around with fitting UI and things to a grid, and think about options for colors etc. to use

This was how the end product pretty much came out. the grid had been used on all pages, and elements simplified for easier navigation for the user. We also considered the hierarchy in the order and placement of all the elements in the page and tried to be consistent with the text colors, sizes, keeping similar buttons in the same place, etc.

Added pages 19 04

Fonts

I looked at display font options for our app - the font had to be simple and legible for an emergency situation. In the end we went with Roboto as it is very clean and has a good feel to it in the various weights, it also maintains legibility fairly well at different sizes. It's commonly used in alot of apps so it is familiar with viewers.

Week 6 - Refining, Extra pages, Adjusting UI.

I kept quite strict to the grid and guide layout to ensure the pages I reworked were consistant

Things to fix on UI

UI Sidebar

When clicked