One of Ireland’s largest energy providers challenged me to develop a solution to a design problem they’ve been facing.
Their business customers have access to a backend system which allows them manage their accounts and visualize their energy usage. Business customers may have numerous properties and the client is developing a system whereby these customers can group their accounts and see usage trends collectively.
Premises: These are the individual locations (and datapoints). Now that the company hosts both electricity and gas accounts, one physicial location (building etc) may have two of what they call ‘premises’ (one for gas and one for electricity).
Accounts: These are legacy groupings of Premises, set up through the finance department. All premises listed under an account have the same billing cycle. This is currently how Premises are grouped.
Account Groupings: Larger customers may have grouped their Accounts to sort through them easier.
Segments: The client wanted their customers to be able to arrange ‘Premises’ in an order that would best suit their needs (rather than being restricted to organizing premises’ by Accounts. They called these new groupings ‘Segments’.
I was tasked with creating a screen which would allow users Create/Edit a Segment. It needed to be usable for clients with few Premises and also for clients ‘who may have 1,000 Premises and want to include 100 in this new Segment’.
(The solution was to be a standalone screen, not incorporated into the ‘view’ screen).
I quickly realised that the primary issue was visualizing all the data to pull from to add to this new Segment (The Premises nest into the Accounts, which nest into the Account Groupings. These 3 groupings could be displayed very clearly; however, current Segments do not fit into that paradigm and so increase the complexity of the design if you want users to be able to swift through existing Segments to create a new one).
I ran through the rational for segmenting to get a better understanding of the users’ goal, but realized that the use case was so broad, and could be totally arbitrary.
I began looking at similar data-visualisation issues and began to realize that music apps/players come across a similar issue; Songs, nest into Albums, which nest into Artists, BUT can also be included in Playlists (in the same way that Premises can be included in Segments). With this in mind I set out to examine how music players allow their users’ to swift through songs when they are trying to create a playlist.
I developed a split screen view, on the right would host the New Segment panel, and on the left the user can browse through their premises. Using a drag and drop approach users would be able to pull items from the left to add them to the right.
To delete already added items from a Segment they could drag them to an ‘X’ at the bottom of the panel. Because the information is data heavy and the brand is quite inviting, I initially designed a very visual experience.
To ease the users’ experience I decided upon a tab approach (by Account, by Segment & by individual premises) where they could browse, or search, for their desired items.
If a user wanted to include a full Account or Segment, they could simply drag it in to the ‘New Segment’ panel on the right and all premises included in that Account/Segment would be added.
Alternatively, they could click on the image/title to open up a list off all individual premises within that Account/Segment (they could then select and drag over the individual premises they sought to include in the new Segment).
Users could initiate a similar method when seeking to remove items; Selecting and dragging unwanted premises in the New Segments panel would activate a large ‘X’ at the bottom of the panel where users could drag and drop the premises to remove them.
Following a Cognitive Walkthrough with the development team we found that the solution was useful for both large and small customer accounts, and that due to using numerous conventions already familiar to the users that there wouldn’t be a major learning curve to understand the design.
The team felt certain visuals (such as the ones indicating whether the premises was gas or electric) were helpful. But over further contemplation we came to the conclusion that the Account/Segment images provided little utility to the user and so were altered to include the Account Name. Here is a low-fi prototype I generated to highlight the interaction: