Obi

Energy mobile app. Company project, 2016.

    • Finalist UX category. The European Talent Awards 2017 – Aquent (London) | Read more
    • Business context: energy saving mobile app (B2C) in the utilities sector.
    • Company: ONZO.
    • My role: manage and execute the whole project.
    • Goal: engage new users, improve customer experience and provide the right information quickly and efficiently.
    • Target audience: families and 18-40 stakeholders / digital people of any age.
    • Competitive review: more than 30 apps from 8 different countries.
    • Approach: create the smartest energy experience integrated into a beautiful app.

obi home

Designed with passion, this energy-saving mobile app empowers customers to take control of their energy use through real-time communications.

01 Research

This is the first stage of the UX design process. Two questionnaires provided us with useful feedback from both colleagues and potential users. As a result, we got a total of 131 responses from 8 different nationalities with an age range 18-74 (most of them from 25 to 34).

    • obi questionnaire 1
    • obi questionnaire 2

A selection of several energy saving apps from 8 different countries serves as competitor analysis, each one with its own data sheet (brief description, rating scale and website). These examples are especially relevant as inspiration in UX/UI design.

    • obi competitive review 1
    • obi competitive review 2

Market research helped us to identify the audience and run some quick research on. Customized content, behavioral targeting and engaging challenges create a smart energy experience 24 hours a day in the pocket of customers. So the user scenario takes place anywhere, anytime: while going to work on the underground, while walking in the street or when staying at home.

obi user scenario

After conducting a series of interviews we were able to identify a set of metrics that we used to define two audience personas: 1. Primary. Families and couples who use a smart meter for electricity and gas; 2. Secondary. Stakeholders of any age, most of them ranging from 18 to 35-40 (young adults) and especially interested in trendy mobile apps.

    • obi user persona 1
    • obi user persona 2

02 Strategy

The second stage. First of all, brainstorming sessions to reward ideas and maximize productivity which are crucial to find the best and most complete decision for a plan of action, receiving more than 82 comments from all the team.

    • obi brainstorming 1
    • obi brainstorming 2

The UX design process continues below by defining specific goals (engage, loyalty, data insights), and information architecture according to the following characteristics: terminology, relationships, categories.

    • obi specific goals
    • obi information architecture

The design guidelines provide a manual of strategies mainly focused on the visual language (top to bottom):
1. Layout: key elements of UI. The main content fits in the browser window.
2. Colour palettes: Corporate. Common elements used in the interface, including app icons; RAG system based on the energy consumption (R red-high, A amber-medium, G green-low); Appliances icon set, where each color is selected according to a meaningful message in the context of the appliance’s category.

    • obi design guidelines 1
    • obi design guidelines 2
    • obi design guidelines 3
    • obi design guidelines 4

03 Design

The solution. The first step is a new identity and Obi (On Board Intelligence) is the best name among 6 in total selected for user testing in 4 different market categories (association, object, character, thing).
Letters “b” and “i” come from the company’s corporate family font (Gotham Rounded Bold), and the capital “O” from the company’s logo, integrating them as a single group. The dot over the letter “i” reminds an indicator pointer of a thermostat once it’s combined with the letter “O”.
Ideas come to life faster through handwriting sketches. I take notes to untangle my thoughts and let them all flow onto paper.

    • obi logo
    • obi sketches

Below, one of these ideas which is directly related to energy disaggregation, providing more accurate information that might help users save money and time, as it improves load disaggregation by detecting every 10sec component appliances separately from a whole-home energy signal.
Once user clicks on the appliances / boxes, further info is displayed: 1. Content; 2. Notification; 3. Personalised information; 4. Interaction.

obi disaggregation

The icon set pays special attention to readability while keeping its consistency through a harmonious family. On the other hand, the Challenges section offers a rich game experience based on placing “stickers” (images) according to predefined locations on a screen based on the result of the game (the example below illustrates one of the categories, Biodiversity UI).

    • obi icon set
    • obi graphics challenges

The different screen layouts include not only improvements regarding UX/UI, but also new contents that provide richer information than the previous version, ensuring consistency across screens and making a more logical user journey. Below (left to right, top to bottom): Home (carousel), News, Live, Calendar, Comparison, Breakdown, Challenges and Settings.

obi screen layouts

Below, user behaviour along with detailed specifications for every screen help better explain all the process while highlighting multiple advantages in this new version.

    • obi versions
    • obi news
    • obi live
    • obi calendar
    • obi comparison
    • obi breakdown
    • obi challenges
    • obi settings

We finally created a development/test version. Obi can be installed on portable Apple devices once the device is registered through a web-link.
In conclusion, this project shows a full life cycle case study which includes a wide range of techniques for better user experience. This new version also gets better insights by reducing useless data, especially in regards to energy use and budget control.

obi development & test

Find a fully-interactive high-fidelity prototype that looks and works like the real app below:

Results

We gained equity funding from new investors as well as new customers, improving company profits. Want more? Find the whole UX design process below: