ARUBA BEACONS IOS APP

Aruba Beacons helps you add indoor location services to any indoor space.

Beacons_HeroBeacons_Hero

Aruba Beacons customers use the Beacons iOS app to install and manage Bluetooth Low Energy Beacon hardware, which allow them to enrich brand satisfaction through location and wayfinding services, and proximity-aware push notifications.

01. BEGINNING AT THE BEGINNING

Creating an effortless experience to be used over and over again.

The main purpose of the Aruba Beacons app is to setup and install a Bluetooth Low Energy (BLE) Beacon. This process would be done over and over again by numerous employees, and as such, needed to be quick and easy. For example, Levi's Stadium is a 1.85 million square-foot building that needed thousands of Aruba Beacons to be placed. My goal was to create an installation flow that was intuitive and had minimal resistance so that Beacons could be installed within a matter of seconds.

The second goal was to allow a user to edit or remove an existing beacon. I wanted this flow to be equally intuitive; if setting up a Beacon was simple, so, too, was editing one. The rest of the options and settings would be built around these two goals. 

At the outset of this project, I began where I always begin: with a pencil and a piece of paper. 

Exploration & Sketches

Beacons_SketchingBeacons_Sketching

02. GOING THROUGH THE PROCESS

The Aruba Beacons App went through many revisions, and continues to evolve today.

v1.0v1.0

The first version (shown above) was over-designed. An app of this nature did not require such extent or imagery. My own personal nature desired a visually beautiful encounter whereas, in truth, the function demanded attention over the form. It was my first "real-life" app; I wanted to make an impression. However, after meeting with my senior designer and the rest of the team, this version was trimmed of its fat and refined into a streamlined experience, and was better off for it. 

That's not to say much of the design was thrown out; many of the aesthetic choices and much of the flow was retained. Rather than landing on a splash screen, the user (once logged in to their Meridian account) would be immediately placed upon the map, à la Apple Maps. The map view was the cornerstone to the app, while the beacons placement function was the bread and butter. The rest of the app's functionality was neatly stored in its proper place.

As we continue to explore the history of the Aruba Beacons app, I will be focusing on these two pieces — the map view and the beacons placement flow. 

Map View — Version 0.1

Map View — Version 1.0

Map View —  Version 2.3

Map View — Version 3.0
(This iteration was only proposed and is not the same as the released version.)

The map view is what the user would see the most during their time within the app. In it's final form, the map view shows where beacons are currently placed, what type of beacon the hardware has been programmed to be, and their own location represented by a blue-dot. Atop the map are options to view different maps in the same location (as well as in different buildings and locations), place new beacons, filter what types of beacons are being shown on the map, and quickly locate and centre the map view upon yourself. 

In the 2.3 version, the user can also switch between the map view (where beacons are installed and managed), a Campaigns view (where the customer can view push notifications to be sent to a mobile phone user if said user is in proximity of specific beacons), and the settings view. These options were tucked away under the hamburger icon in the 3.0 version. 

Beacon Placement View — Version 1.0

Beacon Placement View — Version 2.0

Beacon Placement View — Version 2.3

Beacon Placement View — Version 3.0
(This iteration was only proposed and is not the same as the released version.)

The beacons placement flow in versions 2.3 and beyond is one of my favourites. When the user is ready to add a beacon to the map, they open the beacon list, tap-and-hold a beacon (to pick it up), and drag it from the list onto the map. This flow was quite different in versions 2.0 and earlier, as the user would need to dive two or three screens down before the beacon would be placed on the map (in their current location).

Beacons are represented by colour. In version 2.3, a blue beacon meant it had already been placed on the map the user was currently looking at, grey meant the beacon had already been placed on a different map, green meant the beacon was ready to be placed, and black meant the beacon was locked and could not be moved. A locked beacon meant it was owned by another account and therefore would never be accessable to a user. In version 3.0, beacons were either placed (grey) or unplaced (green). If a beacon was locked, it was simply not shown to the user. 

03. THE FINISHING TOUCHES

A beacons app never looked and felt so good.

While this isn't the current version of the app, this is the last version I worked on. The visual design is in line and unified with other Meridian / Aruba products, creating a cohesive family of applications for a user to properly manage their business's location services while the experience is thoroughly streamlined to meet the users ever-growing needs. 

Beacons_BigBeautyBeacons_BigBeauty

COLOURS

Colour Palette

Beacons_ColoursBeacons_Colours

TYPOGRAPHY

Font Selection

Beacons_TypographyBeacons_Typography

ICONS

Icon Family

Beacons_IconsBeacons_Icons

INTRODUCING (A VERSION THAT NEVER WAS)

The Aruba Beacons iOS App.