top of page

E-Cosmart

UI/UX Design, Visual Design, Research

An on-demand B2C platform where users can more easily manage their electricity accounts and master electricity consumption, so as to finally achieve the goal of energy saving

ECOSMART.png

ROLE

Visual Design 
UI/UX Design
User Research

TOOLS

Figma

Adobe Illustrator

COLLABORATORS

Mingjun Jiang,

Yushi Gong,

Anny Xu,

Emily Liu

BACKGROUND & CONTEXTUAL INFORMATION

Since the 19th century, the main way to pay for electricity in most parts of Canada has been to regularly receive paper bills and then mail a check for payment. This traditional payment method is still in use today. The limitations of time and space not only bring a lot of inconvenience to people’s lives, but also cause the country to waste a lot of unnecessary manpower and material resources, such as unnecessary expenses in hiring staff and the use of paper to print the electrical bill. Meanwhile, since the use of this traditional payment method restricts residents from tracking the price and power consumption of the electricity meter, it is difficult to form electricity-saving habits and awareness. In the long run, this will also have a continuous negative impact on the country's environmental protection and sustainable energy development. 

 

Therefore, the entire market has a great demand for energy consumption and management services, and the government is also promoting the concept of energy saving. With the development of digital technology, Canada's power system is constantly innovating, and many regions have begun to use digital or smart meters. However, Ontario still does not have a specific digital solution to help residents with energy monitoring and mobile payment. The potential opportunity in the market is to create digital tools that break limited payment options like utility companies or retailer websites, Improve the ability of residents to monitor electricity consumption, and cooperate with the government and official electricity companies to create a credible authority platform with complex payment channels.

LEADING QUESTION

How might we design an on-demand and trustworthy B2C platform for Ontarians where they can more easily manage their electricity accounts, helping them better grasp their electricity usage?

INTERACTIVE PROTOTYPE

ECOSMART.png

Design Concept

Our app aims to

  • Integrating all telecommunication companies in Ontario into one platform

  • Allowing users to view their electricity usage and billing, manage payments

  • Notifying customer service of account and service issues

  • Receiving timely messaging from local telecommunication companies online

  • Helping Ontario residents improve life efficiency, adjust power-saving habits and increase energy-saving awareness

  • Benefiting the sustainable development of the entire country

PROJECT PROCESS OVERVIEW

Research

Ideation&
Concept

Wireframing

Prototyping

Evaluation

User Interview
Persona

User Scenario
Affinity Mapping
Market Research

Brainstorm
Five Whys
Site Map

Wireframe

Mood Board
High-Fidelity Prototype

Usability Testing
Iteration
Future Development

USER RESEARCH

Target Users

Stakeholders

  • Household energy electricity financial management

  • Ontarians 

    • Financially independent (primarily aged 25 to 35) 

  • Craving to save energy from financial aspects

  • Electricity consumption monitoring, control, and economization.

  • Platforms (the product)

  • Energy companies 

  • Targeted users segments

User Scenario

John is a 30 years old senior designer, who lives in Toronto in a rented condo and is planning to move to a newly furnished town-house in the suburban greater Toronto area. He is currently using a financial tracking app to record life expenses. John had a hard time paying the new monthly electricity bill with the pressure led by the house mortgage. He wishes to have a digital energy payment system to view monthly bills and hopes to learn electricity usage details for saving money. In addition, he is looking at a gathered information platform for energy saving.

User Interview - Key Findings

  • Four of the seven participants(57%) were between the ages of 25 and 34, and five out of seven(71%) were female, all of them had varying degrees of familiarity with technology

 

  • The main reason why participants choose to use smart homes is to facilitate life and save money

 

  • The main energy-saving habits that users have formed are to buy household appliances with energy-saving labels or to turn off the lights during unnecessary periods of time

 

  • The electricity bill is usually mailed to the users as a physical document, and users usually do not read the details on the bill but choose to pay directly

 

  • Users usually use electricity cost as a standard to evaluate power consumption, and they are not clear about the power distribution of their home

 

  • Users prefer to use one app to control and monitor power consumption

4.png

User Pain Points & Needs

Pain Points

  • Users cannot effectively monitor their electricity consumption, which mainly through electricity charges as the evaluation criteria

  • The same electricity account cannot be shared to use with multiple power companies, and additional accounts or multiple accounts need to be registered and managed when changing the place of residence

  • The electricity bill is in physical form, which is difficult for the users to read and store

  • Users sometimes miss the payment deadline

Needs

  • Convenient online payment method

 

  • Better control of electricity consumption and reduce electricity expenditure

 

  • Hope to get the function of data analysis and comparison

MARKET RESEARCH

5.png

Competitor Analysis

Market Trend

The designed product meets the needs of online payment development. The existing traditional payment is completed in a relatively closed system, which has numerous limitations and lengthens the entire transaction time. 

 

Online payment can be connected 24/7, and consumers can easily make payments via mobile app anytime, anywhere. The current payment methods are limited by time and space, which is difficult to reach the customary needs of various users in terms of time, space, and even transportation.

6.png

IDEATION

Previous Ideation Process

  • Every teammate was asked to conduct multiple potential ideas, whether they are achievable or not

  • We held discussions and provided feedback to each idea and by value the advantages 

  • Through the voting method, we incremented the top-voted ideas to finalize the proposed idea

Potential Bias

  • Users have generally demonstrated a negative bias toward online platforms for privacy protection and mobile payment security issues 

  • We mistakenly thought that environmental protection and energy conservation was one of the main concerns of the younger generation. 

  • We mistakenly thought that women are more concerned about home life and spending

  • We mistakenly supposed that young people know more about technology so they should be our main user group

Idea Refinement Process

We adopted the design methodologies, such as mind-mapping and Five Whys to generate more in-depth and comprehensive thoughts

Ethical Issues

  • As interviewers, we might unconsciously give hints to the interviewees when asking questions

  • Energy-saving topics might put moral pressure on participants

  • The project team have similar background which may lead to narrow product down from cultures and professional perspectives

  • Information safety

  • Design with a selected user group might crowd out some users

  • The potential to become a monopoly product

  • Social media attributes might put more pressure on users

SITE MAP

615-SITE MAP.drawio.png

WIREFRAME

Eco-Smart_wireframe

Medium Fidelity Prototype

Mood Board

Frame 4 (1).png

USER FLOW

7.png

Final Version

USABILITY TESTING

Recruitment

According to our high-fide prototype v1.0, we set up a user test composed of four tasks and follow-up questions.

Task List

Tasks 1

You move into a new apartment and find that the power supply company here suggests you pay online, so you find E-Cosmart and download the software.

1. Sign up for a new account

2. Find your new address

3. Pay for your electricity bill

Tasks 3

There is something wrong with your E-Cosmart software, so you want to contact customer service for help.

1. Find the customer service page

Follow-up Questions

There is something wrong with your E-Cosmart software, so you want to contact customer service for help.

1. Can you name some competitors of this product?

2. What features do you find most valuable and why?

Tasks 2

You are interested in your monthly electricity bill and usage.

1. Switch to the usage page

2. Check your use in February

Tasks 4

Now you are a little familiar with E-Cosmart. As a picky user, you observe the "home page"(payment) of the App.

1. What part of the page did you notice first?

2. What would you click on first?

3. What do you think are the benefits this page offers?

3. What do you think about this design?

4. What prevents you from completing a task?

User Feedback

8.png

Iteration

Modified most of the layout of the pages to ensure that the most needed information is always in the visible range or in the middle of the page.

 

- The size and position of some icons are adjusted to facilitate the use of users.

 

-Add address/account information is to the usage page, which can help users with multiple addresses to use this page better.

- The “welcome tab” for new registered users is removed, because requiring new users to provide their bank card information before they are familiar with the App will weaken users' trust in the product.

Customer service and contact us pages are integrated to reduce the confusion of users.

FUTURE DEVELOPMENT

Next Steps

- We need to work with the energy companies and convince them that our product are helpful to them.

 

- A few more usability testing sessions are necessary in the future. We want to gather feed back from various types of user to keep iterating our design.

- We need to think about the security issues. It is crucial for us to prove to our users that our app is safe to use and their

information is well-protected. We can apply blockchain technology to ensure this.

- We will recruited programmers to help us develop our product.

PROCESS

 "Back End" of E-Cosmart

Process Document

Research Report

bottom of page