Obi

Energy mobile app. Company project (UK), 2016. Finalist in the UX category at the European Talent Awards 2017 – Aquent

    • Business context: energy saving mobile app (B2C) in the utilities sector.
    • Company: ONZO.
    • My role: manage the whole project (lead designer).
    • 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.
Research 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 competitive review, 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, walking in the street or just 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

It’s time now for 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):

    • Layout: key elements of UI. The main content fits in the browser window.
    • Color palettes:  1. Corporate. Common elements used in the interface, including app icons; 2. RAG system based on the energy consumption (R red-high, A amber-medium, G green-low); 3. 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

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

obi logo

Ideas come to life faster through handwriting sketches. And writing. I take notes to untangle my thoughts and let them all flow onto paper.

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, more info is displayed according to the following guidelines:

    • Content: 1. Appliance detection (energy level in near-real time); 2. Notification; 3. Personalised information; 4. Interaction, by engaging users with some feedback and making it actionable.
    • RAG status to define the energy consumption through different poses (green, amber or red guy).
    • Categories (platinum, gold, silver, bronze) linked to an accuracy description table provided by data scientists.
    • Clickable images to find out more about the topic.

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

A fully-interactive high-fidelity prototype that looks and works like the real app is available upon request, due to confidential info that I can’t share today in public.
Below, user behavior 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 create a development/test version. Obi can be installed on portable Apple devices so far operating with iOS9.1+, 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

As a result, we gained equity funding from new investors as well as new customers, improving company profits. Want more? the whole UX design process (pdf) is available upon request, due to confidential info that I can’t share today in public.