IxD Solution: Designing a Create/Edit Interaction

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.

Keys Terms

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’.

The Challenge

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).

Nesting Sketch

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.



Original Design Sketch

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.

UXPin: Hi Fidelity Wireframe

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.

UXPin: Tabs to Browse/Search

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).

UXPin: List with Gas & Electric Icons

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:

Axure: Low-Fi Prototype

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s