My Role
I worked as the visual designer, leading the UX design, testing solutions with other team members. I worked with 1 developer and 1 product manager to release these feature updates.
Introduction
As part of the Pulsate rebrand, we decided to divide parts of the Pulsate platform into individual products. The beacon and geofence targeting functionalities were merged together to become the "Locate" product.
There were a number of updates we wanted to roll out in phases. Firstly, the navigation needed to be rethought. With the rebrand, we needed to apply the new Locate branding into this product section, moving away from the previous visual styling. Then we wanted to improve the usability of this section - the aim was to enhance the organisation and management capabilities of this section, particularly in the list sections as they were quite limited in functionality.
Problems With The Previous Design
- Branding was not up to date with newer Pulsate branding (see marketing site re-design).
- The list of geofences in the left sidebar had no organisation to them. It could be very difficult for a user to find a specific geofence they previously created. This list ordered the geofences by their creation date, which isn’t always the order a user wants to view their geofences, especially if multiple users are creating geofences.
- There were no filtering options or search functionality. There could be hundreds of geofences listed and in order to find a specific one, the user must scroll and manually search. This is a huge friction point for the user. Nowadays, users expect to have filtering options and search capabilities when interacting with list UIs.
- There was no way to organise related geofences into a folder or group. Again, this is a common expectation for users when dealing with list UIs.
- When a new geofence is created, it was assigned a random colour. However, this colour had no meaning. Multiple geofences with the same colour implied a relationship between them, when this wasn’t actually the case. The colours were random and pointless.
- Some of our users found the search box to be a little hidden. As a main feature on this screen, it should be independent and stand out for ease of use.
New Navigation Hierarchy
Following this rebrand of Pulsate, the navigation was restructured:
- Engage: Campaign Builder, User Segments
- Converse: Chatbot Builder, Menu Manager
- Locate: Geofencing, Beacons and Location Statistics
- Messaging: (part of Engage) One-to-one messaging between users and brands.
New Locate Branding
Previously, Pulsate and each of its components were styled as one product. The visual approach was quite dark, using a lot of dark greys and the main call to action colour was a blue (#00c4ff).
With the division of Pulsate into its individual products came the rebranding of each section. As discussed in the marketing site redesign, Locate adopted shades of green as its main call to action colour. We chose green to represent the Locate product as it symbolizes what Locate stands for: the outdoors, growth, the environment, money, finance, ambition, etc.
With the overall branding update across each section, I wanted to move away from the dark greys and evolve the Pulsate UI to be a brighter, cleaner interface, opting for more white and light greys instead. This was an attempt to freshen up the overall Pulsate UI to be more modern and friendlier.
Additional Functionality - Drawing Polygonal Geofences
Previously, users could create radial shaped geofences on the map that could trigger users when they entered or exited these radial shaped real-world locations. To accommodate more specific locations, such as buildings, we developed the polygonal geofence feature. Users could create any shape they wanted and this would work in the same way radial geofences worked, triggering users when they enter or exit these zones.
Updated Sidebar - Bulk Actions and Organising into Groups
Final Designs
What I've Learned So Far From This Project
After designing an update, it's very valuable and recommended to do further usability testing. To gather different members of your team from different departments to observe how they interact with the new feature.
- Do they understand how to successfully and efficiently use the new feature?
- Is there a learning curve involved and is it easy to remember the next time they use the feature?
- Do they behave differently to the path you designed?
Based on our own internal usability testing, it became clear that there was confusion with the intended "Actions" button and the "Groups" button. With my design, I expected users to select multiple items from the list and then click the "Actions" button to perform a bulk action, such as grouping the selected items together. What I found instead was that multiple team members were selecting the items from the list and then clicking the "Groups" button, expecting to be able to perform the Grouping action from here. As well as highlighting this true behavior of users with this new design, it emphasized the important roles of button labels VS icons.
After realising this UX issue, I wanted to come up with a solution. See below:
UX Issue - Proposed Design Solution
Interested in Working Together?
Or you can find me here: