Green Active App

Case study presenting the design process of Green Active app. The project includes the development of the app and the creation of the landing page.

About the product

Challenge

Develop a mobile air-conditioning management application that helps users to monitor their AC devices and their energy consumption. The aim is to empower users to make informed decisions about energy use and help them optimize it, thereby saving costs and reducing environmental impact.


Solution

The app allows users to easily connect their AC devices, control them and monitor energy consumption in real time. The app analyses data, identifies consumption patterns and smartly adjusts energy settings for optimal use. Users have access to energy information, clear statistics, transparent electricity pricing, personalized recommendations and a track of their consumption and savings.

The app emphasises the visualisation of the impact the user is having on the environment, highlighting savings and improvements in energy use and providing all the necessary data and management in an accessible, simple and intuitive way.


Design Process

The process of creating the application can be divided into five key phases. Although it is usually developed in that order, it is always an iterative process.

Discover

The first stage of the app development process was discovery, researching the competitors and market trends related to air conditioning energy-tech, smart home control, and sustainable energy solutions.

The aim was to analyse the main features, structure and content of competing products, how information is presented, their advantages and disadvantages, as well as user opinions.

Define

In the definition phase, the information gathered was analysed to define the core sections of the Green Active application, the key features and functionalities, the problems to be solved and the best practices to be applied.

  • Personas

    Fictional characters were created based on research in order to identify user needs, behaviours and expectations.

  • User journey maps

    Developed user journey maps to explore the overall user experience when approaching and interacting with an air-conditioning management app. The process of mapping the user's journey in their search for information or solutions helps to recognize pain points along the journey and identify how to meet the user's expectations.

Ideate

During the ideation phase, user-centric ideas were generated to tackle the design of Green Active app, based on user understanding provided by research stages.

  • Information architecture

    Creation of information architecture: the app structure, outline and organize content, main sections, site map and navigation systems. The focus was on creating an optimal, intuitive and user-friendly experience for the user.

  • User flows (task flows)

  • Low-fi wireframes

    Low-fidelity wireframes were created to quickly think and devise design solutions without committing a lot of resources.

Interface Design

The goal of this stage was to create an intuitive, coherent, simple, practical, accessible and user-friendly interface for the product. The user interface design process focused on the look and feel of the interface to enhance the overall experience and encourage users to maintain interest, easily access information and perform tasks.

  • Design system

    A design system was created to establish consistency and streamline the design process.

  • Hi-fi wireframes

  • User flows (wire flows)

    Wire flows were created to define the scope, content and user actions within the application.

  • Mockups

Visual Style

The core ideas that influenced the visual style of the brand identity are the imagery related to sustainability, circular energy and innovation. The visual elements aim for balance, harmony and simplicity.

The colour palette uses green as the protagonist, as its vibrant tones are associated with energy, nature, sustainability and efficiency. Starting from green, the colour palette expands into a pleasing combination of analogous colours with an optimal level of chromatic contrast that allows it to be used effectively for various web and application design purposes.

In addition, the colour palette, together with the fonts, is intended to convey a pleasant, energetic and modern look, reflecting the essence of "green energy" and making the application and website stand out from the competition in the industry.

Main Features of Green Active App

  • AC Devices Smart Control

    The app allows users to effortlessly connect, program and adjust the temperature and mode of air conditioners. The app has automatic adjustment functions that intelligently regulate the settings of air conditioners according to indoor and outdoor temperature and electricity price fluctuations, ensuring energy and price optimisation.

  • Measurable AC Energy Usage

    The application allows users to easily visualize and track detailed energy consumption of AC devices through real-time dashboards, clear statistics, and alerts.

  • Smart Indoor Climate

    The application provides automatic and intelligent optimization of the user's home climate control based on outdoor temperatures and lower electricity prices. Users receive personalized notifications to monitor consumption, savings and updates. In addition, the app offers transparent electricity prices that users can view.

  • Sustainable Energy Consumption

    Users can seamlessly track improvements in AC usage by checking statistics on how much energy, Co2 and money has been saved.

Landing Page

Challenge

Create a landing page that introduces the application, shows the main features and guides the user to download the application.


Solution

Create a simple and attractive landing page, with a clear structure, presenting the product through precise sections that contribute to informing and attracting the user, keeping their interest and getting them to download the application.

Some best practice conclusions to apply based on the analysis of competitors' landing pages: