lumo header image

LUMO - App Only Energy Tariff


From initial price comparison site to app only energy tariff, Lumo has evolved from a small customer facing website, to a fully native app. As Lead Designer on the Lumo team, I was involved in all aspects of the products journey. This study explores insights into my design process from initial research and testing, right through to the live product.

Live Piece, Nov 2016 – Dec 2018

ABOUT LUMO


When joining the Lumo team, the business focused on providing customers with a comparison platform, where they could switch to the best energy provider for them. The user journey involved a sign up process, a series of onboarding questions about their home and existing energy supplier, as well as the option to scan or upload their latest energy bill and usage amount. The comparison results allowed for a user to filter by either price, customer rating or greenest supplier. As the business grew, Lumo’s focus moved towards becoming an energy supplier, rather than a platform for comparing other suppliers. The focus was on providing an app only service, and therefore a lower cost to serve product.

Research & Testing


Our approach to UX was very much build, measure, learn. In the early stages we would learn about our user needs by sending out surveys. This allowed us to easily expand on our assumptions, and further understand what we believed our personas goals were. As we began testing we were able to validate these assumptions and identify the various pain points and difficulties found in certain journeys. Through a series of user testing workshops one of the main pain points was accuracy of usage data and how this was displayed to the user. The onboarding journey for creating an account using the app and later inputting meter readings, also required testing various ideas. When testing each concept with users it was important for us to consider ideas not only from a user experience perspective but with technical and business goals in mind. Initially we created two personas, whom we believe best represented our main user base.

Alex 'Data Geek'

Alex is looking for a product that is data driven and discoverable. He is always the guy in the know and uses the app to monitor his usage efficiently. He would like to explore the app, going deeper into his data to discover how appliances in his home could affect his usage, or by looking at the amount of energy he uses compared with his neighbours.

Sarah, Working Mum

Sarah likes to be lead through the process of submitting her energy usage. She is less informed on the energy market, and would like a service that allows her to keep on top of her bills, freeing up time to focus on the other areas of her life. She is a busy mum often completing household admin on her way to work. She likes products that allow her to find what she is looking for easily and all in one place.

As the product evolved and we began speaking and testing with Lumo's live users, we realised that Lumo also had another main user, who was more focused on price, and wanted to switch the cheapest tariff.

John, The Switcher

John is very knowledgeable about the energy market and understands his usage. He is focused on always being on the best energy tariff even if this means switching suppliers multiple times per year. He uses sites to compare offers through money saving websites like Top cashback. He engages with Lumo to check his energy usage is correct, manage his bills but also to be notified when it is time to switch to a more price effective tariff.

Each major feature was tested, either as a team through a series of workshops, or by inviting users in for product testing. We faced a lot of challenges along the way, specifically when onboarding customers through the sign up process. Due to the nature of the product, we would often need specific details about the user's home and more importantly their actual usage from the offset, in order to provide accurate results in both the comparison table, and for accurate billing. Of course this information was not always supplied accurately and would therefore affect their first bill.

Being an app only product, it was critical that we asked users to turn on app notifications. At first we would ask this question as soon as the user had completed the sign up process, but before revealing any comparison results. After testing this idea, we found that many users declined, as their focus was purely on seeing their results. We thought long and hard about when to ask this question, and we soon realised that it was best placed somewhere they might need a reminder, ie, after submitting their first reading - as a subtle reminder to submit the next, or after booking a smart meter appointment - to be notified the day before the engineer was due to arrive at their property.

The research highlighted that it was important to engage with the user by explaining why something is important and a benefit to them and not asking too much to soon, so that trust in the product could be built. Being able to communicate with our users, whether through email, text or via the app, was vital. Unlike other apps where engagement may be on a daily basis, for example through social media, news or even banking apps, energy related admin, is completed less often, meaning that a user could go a long time without needing to engage with the app at all. Engagement levels were therefore low, making communication an even greater challenge.

Understanding user needs Our assumptions of how a user may feel when booking a smart meter installation appointment.

OUR EXPERIENCE PRINCIPLES


We wanted to create a product that was zero effort for the user, where they felt in control and empowered by their choices, and where they had trust in the service we provided. Here are some examples of our principles, and what defines each one.

Zero effort

Make it easy for our customers to self serve and manage their account in the app.

Examples: You can change and edit contact details or payment date. We’ll simplify complex processes like opening meter reads, switching, and booking a smart meter by supporting you and giving you timely updates.

Feel in control and empowered

Give users the right information at the right time to make better decisions.

Examples: We’ll remind you about meter readings, give regular updates on your balance and usage behaviour, so you can control your energy finances with all the information at your fingertips. We’ll use friendly, simple language to guide and support you every step of the way.

Transparent and trustworthy

Keeping customers informed on the energy market.

Examples: We’ll show you the whole market, so if there’s a better deal out there, we’ll help you switch and let you carry on using the Lumo platform. We’ll help you understand how quotes work and help you get the most accurate quote, not the quickest.

CHALLENGES & SOLUTIONS


As with any digital product, there are always challenges to overcome. Solving complex problems is one of the most rewarding parts of any design process. Through extensive research we knew our users came to the app for three main reasons. To submit a reading, check their usage and view or download their monthly bill amount. Each of these areas, required different features, challenges and a variety of solutions.



Defining Usage and Displaying Data

Defining how we displayed energy usage was an ongoing process. At the start we made many assumptions, that a user would of course like to see graphs and charts showing how much energy they had consumed that month. We did a lot of competitor analysis, looking at how other apps such as Bulb, Eon, and British Gas display their usage. Charts and graphs were a common theme amongst most, showing the user monthly usage against a yearly average. As usage in the Lumo app was displayed as a monthly amount, we also researched into apps that take a similar approach to displaying data in this way. Banking, fitness and mobile contract apps all give insights into this type of measurable data. Whether this was displayed in pounds, minutes, kwh, miles, kg and so on, it was all relative in helping us reach our starting point. Once a user was able to apply for a smart meter, their daily usage amount, as well as monthly and yearly would need to be displayed, so we needed a solution that was flexible. As well as looking at the data values, we also wanted to test how it was displayed. We experimented with both dark and lightmode, as a concept for showing usage, and whether dark mode was better suited to breaking up the app into two visual paths. During our first round of testing, we asked users how they expected to see their energy usage, before taking them through a couple of prototypes. We wanted to ask open ended questions, rather than guiding them towards a set of ideas too early on. Many users expected the app to show them usage graphs, but also said that whilst they looked nice, they were hard to understand. Primarily they just wanted to know their usage amount in pounds rather than kwh, and for this to be displayed in a way that was easy to obtain. Showing usage values in pounds proved a familiar concept to most - they roughly knew how much they spent on average per month for their energy, and would therefore know if they had consumed too much or needed to switch to a cheaper supplier. Our business goals were always to give users the most accurate representation of their energy consumption, but also help them switch to a cheaper supplier at the end of their supply contract.



Understanding Payments and Billing

One of the greatest challenges when building the product features was making sure it was clear and easy for users to self serve. Unlike other services, Lumo was app only, so for tasks such as adjusting their payment amounts, this was something that they would need to do themselves in the app. We wanted to give users the right level of flexibility, so they were able to make their own decisions, but in a way that was responsible and considered. In the early stages of the apps development, we would send out reminders to customer that needed to either make payments or increase their payment amount. Feedback from users suggested that they were often unclear as to why their payments did not cover their usage, or in some cases that they were in fact overpaying. Another challenge was describing the term average usage, rather than defining a set monetary value. Their average usage value was based over a 12 month period, which proved hard to explain to a user who’s primarily focused on monthly values. This would mean that whilst bills were generally higher during winter months, the reduction in energy consumption during the summer months would reduce the total average for the year. One idea we tested was a traffic light system. If a user was on track with their yearly average and their monthly payments covered this it was displayed as green. Amber suggested that they would need to increase their payments and red that their current payments did not cover their energy consumption. Most users found this system helpful. Visually the colour coding of a traffic light system was easily relatable, and any additional information describing each section, provided reassurance. This information was clearly displayed on the apps dashboard as well as in the billing section. If an action was required by the user, our primary buttons would take them to the relevant area of the app to complete this.

Lumo Design System


It was important that as a team we created a shared design language, where design and engineering had a clear understanding of the product features, interactions and always remained consistent. Design sprints allowed the team to come together, plan out future product features and also decide how best to build components. It was always important to me that the visual identity of the product was lead by the design team, but the functionality and technicalities of how the product was built, very much a team effort. During workshops, we would always feed back any results from user testing, to help explain the importance of future ideas. It was vital that everyone involved understood why we were building features in the first place, in order to best meet user needs, but without compromising the business goals. Our design system followed four main criteria.

Efficiency

Our components library allows us to efficiently build new features fast by reusing interface elements. Future goals would be for design and code to have an online pattern library, where we can maintain, test and update, with clear visibility for all.

Consistency

As we scale, our goal is to ensure that our users are experiencing the same quality and consistency of design, no matter what area of the product they are using.

Quality

Having a solid design system will mean we don’t have to compromise on quality.

Accessibility

To make Lumo available, usable and understandable to all and achieve an AA level of compliance.

As a design team we were passionate about providing the best possible experience regardless of any limitations or disabilities. We were lucky enough to work closely with the UX research team at OVO, and saw first hand the struggles that some users face completing tasks such as submitting their meter reading in the app or trying to download and read their monthly bills. We were very passionate about developing the product with accessibility in mind. Design and development worked closely to update components, using semantic HTML to help with screen reader compatibility. Identifying the page hierarchy made it easier for visually or audibly imared users to access our content. Using accessible colours was also an area we focused on, improving the contrast ratio of buttons and text, and increasing our font size and line height. We also made sure our web app was navigable by keyboard, and establish a clear information architecture.



Design Sprints & Workshops

Workshops were an important part of our design process. We would carry out workshops for different areas of the product, this could include, building out our component library or deciding upon the next new product features. Design sprints allowed us to come up with ideas quickly, thinking about how a solution to a problem could be resolved from both a business and technical perspective. We were lucky enough to have a current user base, who we could call upon for testing ideas and improving already live solutions. We approached a design problem with two outcomes in mind - How can we enhance the user experience efficiently in the present, but with the insight to allow for that feature or goal to evolve in the future. Design would meet with product managers to outline ideas and make sure our ideas aligned with the product roadmap. These ideas were then shared with the wider team. Our weekly design/dev workshops gave us the opportunity to share our research, expand our technical understanding and get feedback on how we would work together during that sprint to achieve our goals. Prototypes were made in Axure as this best showed the developers how we wanted each component to function. Workshops were about presenting the overall concept and functionality rather than polished UI elements.




OUR COMPONENT LIBRARIES


We built each component to be unique to itself and provide the flexibility to be adapted or reused. Component cards on the dashboard were split into two categories - Action cards and information cards. Those that required the user to complete and action would always display a primary button. Gestures were added to action cards to highlight that this was the next task we wanted a user to perform. Information cards were not clickable and required no action. These cards would educate the user on a particular topic or feature. For example - If we required the user to book a smart meter appointment, the card on the dashboard would have a ‘Book now” button, to prompt them to start the booking journey. If the user had already completed the appointment booking they would see an information card, showing the date and time of their booking, and required no further action to be taken.



In the early stages the components lived inside Sketch, only accessible by the design team. The end goal was to produce an online global library, where any member of the team could build different journeys. When building new features we would try to reuse components that existed in the current library. Keeping the library to a minimum, provided a consistent and easy to maintain product. Iconography and illustrations were used as a visual aid to mark the start and end of each journey. Illustrations often featured on intro screens to give a friendly yet informative approach, with a custom icon set designed to increase Lumo’s brand identity.

Our BRAND VALUES


As a design team we came up with five main brand values. These evolved over time and were lead by our results of user testing and feedback we received as the product developed. Building trust with our users was at the forefront of our brand values. Our tone of voice was informative and friendly. We wanted users to feel at ease when using our app, like they were communicating with someone they were familiar with.



Easy to use

Keep the interface simple and clean, so the user instinctively knows where they need to go and what they need to do next.

The right information at the right time

Prioritise the next critical action the user needs to do. That might be, to help them submit a meter reading before supply date or helping them to adjust their payments.

Make it fun at the right times

The right design interactions can help bring data to life and increase engagement. Adding illustrations to screens will help inform and guide the user.

Use the components and grid

Use the library of components we have created, including the bootstrap grid for the web app and mobile grid for the Ionic app. A new component is only created when there is a strong user and/or business case for it.

Keep testing

We'll keep testing our product experience and components with our users to see where improvements can be made and which elements work/don't work. New components will be tested before they are implemented.




Next project