revamping our mobile experience

Taking at look at what is current

This is the current home screen that a user lands on once choosing one of their sites.

This initially functioned well enough for the version one product requirements, This is no longer true as we move into version two of product development.

Two new requirements of version two are to fit in controls and cctv. The issue with this was that with the current pattern, these sections would need to be added into the bottom navigation area, which is currently at full capacity.

Therefore, moving forward, we will need to change this screen in order to reduce clutter in the bottom navigation and optimise screen space above the navigation area.

Identifying other areas of concern

The header image we use here utilises a lot of visual space to convey the current context of which property the user is dealing with.

A continual theme we deal with is redundancy, the issue here is we convey this property context twice with the use of the main name in the header card.

The image here can be reduced in size to save visual space and have a larger text on the main title to convey the same message.

Once again, here we can see here how we attempt to over communicate the current state of of the alarm profile to the user.

Yes, the active profile of a site is the most important piece of information to give to the user, but it can be done more effectively than just shoving it in their face multiple times.

We can get rid of the history type card as we have a page dedicated to historical events, so no need for repetition here again. We can also remove the state from the subtext under the main title and use the button’s tactile design and iconography as the main conveyor of state.

There are some inconsistencies in the spacing around the button and its subtext. These spaces should all be the same and should follow the 4pt multiple system.

Another thing that begins to seem off here is the circular buttons contained within the card. The white space in the corner edges appear too overwhelming surrounding the button, There could be more symmetry here using the radius theory on the button.

Symbol recognition is ingrained in our society and putting more visual hierarchy on the wording than the actual icon is most likely unnecessary, yes it helps the initial definition of the context of what that icon is but the learned behaviour of going to that page and seeing the content should be enough to associate what the icon means.

Making changes based on these considerations.

The skeuomorphic button design is not final.

Reducing the visual hierarchy of the property image to make space for more cards in the body. Put more emphasis on the property title to convey the context.

The site state is now only visually conveyed by the alarm action button. This is done with the use of colour and the visual indent of the button as it appears to be pressed in. In order to be colour blind accessible, we change the icon to be solid when in an active state.

Spacing around the button and subtext is now consistent and follows the 4pt system. The button border radius does not follow the exact equation as stated earlier as the button does not sit directly in line with the corner, thus we use the same 4pt system.

Putting full trust to bottom navigation icons to express their own meaning. With the addition of chip identifiers to show that there is new information on that page.

Addressing general experience

The contents of settings have been broken down into the general tab with the addition of the safety page being added there as well, This is to reduce clutter from the bottom navigation and allows space for cctv to be added in.

To get to more alarm actions or controls, the card is expanded with the use of the chevron icons. This opens up the card to extra actions that the user can access, it also exposes an edit button which used to be hidden away in settings. It is now easily accessible and the gives the user intuitive control.