Energy Ogre iOS & Android App

09 Sep 2021
Energy Ogre is an application that helps Texas residents find affordable electricity providers, with a focus on savings and sustainable energy.
Hero image for Energy Ogre iOS & Android App
Energy Ogre
Energy Ogre
Energy services
hero watermark background

Tech Stack

Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo
Tech stack logo

Services

#Product Strategy
#Product Design
#UI/UX
#Branding Extension
#Product Development
#Frontend Development
#Backend Development
#API Connection
#Analytics Integration
#Ongoing Production Support & Product Evolution
About project

Client and idea

Energy Ogre is a platform that assists Texas residents in finding the most suitable and cost-effective electricity service providers. The company’s goal is to help customers save on their utility bills and opt for more sustainable energy consumption. The customer turned to us for mobile app design services after we had successfully redesigned their website.

Challenge & Goals

The main challenge we faced was to keep improving the customer’s website while working on the design for the mobile app. The main goal, in turn, was to finalize two solutions, meeting the deadlines, following a brand style, and keeping a sense of familiarity among the current users.

Solutions & Result

We have designed the UI/UX for Android and iOS mobile apps which now are available for downloading. These are cross-platform solutions created with React Native. The conversion rate grew by 2.4 times, and the number of active users - by 1,75x.

340
h
design
370
h
development
4.7
rate in AppStore
project Overview

Main app features

The Energy Ogre mobile app brings the same powerful features as the website but with a focus on mobile experience.
Image interface

User’s dashboard

The app offers a user-friendly dashboard, providing customers with a quick and comprehensive view of their electricity plan, billing details, and contract status.

Payment methods and history

This feature enables users to keep track of their electricity expenses, choose payment methods, and review payment history. There is an auto-payment feature as well.

Сontracts lists and stats

Here, the users can review their contract details and historical contract information, plus monitor contract expiration dates conveniently.

Notifications center

With the help of in-app notifications, users can always be in the loop about contract renewals, billing updates, and other important information.

Go Green

With this feature, the Energy Ogre app allows users to customize their preferences and receive offers exclusively from renewable energy providers.
Development

Methodology

Android and iOS applicaitons for Energy Ogre were developed following Agile methodology. Since we used React Native that allows for sharing a codebase between two apps, staying flexible and distributing the efforts were our main priorities.
Design process

Research

When designing a mobile app for Energy Ogre, we already had an understanding of the niche and main competitors. So, we focused on creating a convenient interface according to the LEAN UX methodology.
Design process

UX Wireframes

Following the best mobile app design practices, we created effective UX wireframes, with the main focus on the user dashboard, quick sign-up process, and help center. We employed a set of custom-designed icons and visual elements designed in Figma and animated in Adobe.
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
We created clickable wireframes to simulate a prototype that is similar to the end product. We developed and carried out user testing for prototype validation. This helped us to test every hypthesis before proceeding to the development stage.
UI ImageUX Image
Design process

UI Design

We created clickable prototypes for Android and iOS mobile apps. A lot of time was dedicated to testing our design ideas while staying in close touch with the customer. The main focus was ensuring intuitive navigation and clear workflows.

Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Branding

Typography

Following the brand style, we used the same font for both the website and mobile app - Walsheim Pro. This is a good choice for small screens because of its clarity, modernity, and versatility.
GT Walsheim Pro
RegularMediumBold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
010203040506070809
Branding

Colors

The chosen color palette aims to reflect the eco-first values of Energy Ogre. Greens symbolize sustainability, while whites signify clarity and transparency.
#0090B2
Blue
#8EC742
Green
#004157
Dark
Consistancy

Design system

​​Like with the Energy Ogre website, we developed a design system tailored to make managing electricity plans, contracts, and bills not only effortless but also visually engaging - all these in a single mobile app. Every design decision was made to enhance user satisfaction and streamline their journey.
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image
Project interface vertical slider image

Conclusion

The mobile applications for Energy Ogre are the next-level solutions aimed at complementing the experience the users can get on the website. While the company’s customers can now harness the power of smart energy management on the go, our collaboration with the Energy Ogre goes on.