ESB Network

ESB Network

Web Design

Web Design

UX/UI Design

UX/UI Design

A gamification program to be implemented in schools to address ESB’s challenges with energy usage and to improve energy education among youth.

A gamification program to be implemented in schools to address ESB’s challenges with energy usage and to improve energy education among youth.

Type

Type

Website / Educational Game

Role

Role

Team & Solo Designer


Solo UX/UI / Research

Tools

Tools

Figma

Photoshop

Illustrator

Background

Background

ESB reached out to our college Maynooth University for ideas / solutions to the problems related to the future of the company. The brief can be summarized to


“Outline an overall approach to helping Irish Energy users engage with Demand Response activity.”


Originally this project was within a team, which gotten good feedback from ESB but I came back as a solo designer to enhance the final Ux and Ui design.


I wanted to design a space that would help influence/encourage users to engage with demand response. For this project, I wanted to see users relationships with energy.

Challenges

Challenges

ESB’s problem is a very well known problem, energy being used up and the consumption of fossil fuels. The first problem is how can I funnel multiple problems to one? The second, who am I trying design this for. Third, how can I encourage people?

What I Accomplished

What I Accomplished

Designed a service which is more compelling for youth to engage with.


Created a design which corresponds to the businesses goals in a creative approach.


Designed a digital solution which joins youth competitiveness and active learning.

Summary

My process put into stages. I gave myself a project deadline of 1 month for this project. I only used data from past interviews, whom was conducted by me and 2 others. Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Summary

My process put into stages. I gave myself a project deadline of 1 month for this project. I only used data from past interviews, whom was conducted by me and 2 others. Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Summary

My process put into stages. I gave myself a project deadline of 1 month for this project. I only used data from past interviews, whom was conducted by me and 2 others. Hover to view.

Research

Defining

Designing

Usability Testing

Final Design

Research

Research

Understanding the Problem

Understanding the Problem

ESB told us their main problem was a demand/response problem.


Peak periods is when there is an overuse of high energy items. This makes produced renewable energy be consumed and making them rely on non - renewable resources.

My ‘How might we questions’

My ‘How might we questions’

How might we get users to engage with demand response?

How might we get users to engage with demand response?

How might we balance the grid?

How might we balance the grid?

How might we use less non - renewable resources?

How might we use less non - renewable resources?

Research Goals

Learn more about the roles of the people in a household and how they can differ.

Discover the relationship between users and energy use.

Learn psychological reasoning for the actions of the users.

Explore the users knowledge about energy usage.

Uncover possible solutions related to research insights

Assumptions

Assumptions

Before I did research I had a few assumptions about the problem space. These were areas where I wanted to prove them or if they are invalidated by research.

People who pay for energy for the household has a different relationship than those who do not.

People who pay for energy for the household has a different relationship than those who do not.

People are not bothered by their energy use because they gain nothing and most likely are not affected by anything.

People are not bothered by their energy use because they gain nothing and most likely are not affected by anything.

People are not intentionally using high energy products in peak period.

People are not intentionally using high energy products in peak period.

Research Interviews

Research Interviews

For this research we wanted to understand how people view and user their energy.

Splitting our information to two different research topics.

Research Topics

Research Topics

Role in a Household

Role in a Household

Research different roles and their relationship with power usage at home, divided by consumers and billpayers.

Learn their routine and identify areas of compromise.

Consumer

vs

Billpayer

Carbon Footprint

Carbon Footprint

Discover how responsible people felt about their own carbon foootprint. We want to see peoples awareness and knowledge about their energy use

Research Interviews

Research Interviews

I interviewed 10 people, consisting of 6 Billplayers (30 - 60yr old) and 4 Consumers (14 - 25). Trying to learn their behaviours and reasonings.

Billpayers

Consumers

Interview Insights

Interview Insights

The people we live with can influence our energy consumption

The people we live with can influence our energy consumption

The consumers are more conscious of their

electricity usage when their parents are at home. When the parents aren't home they were more likely not worry about something being left on.


Few consumers believed that they would be

more conscious of their electricity usage when they move out.

How might we encourage everyone to be more conscious of their electricity usage?

How might we encourage everyone to be more conscious of their electricity usage?

Individual efforts feels like it has no impact

Individual efforts feels like it has no impact

People want to make a difference, but feel that their own efforts cant tackle the problem in an impactful way.


This feeling of powerlessness makes users not care about their energy usage.

How might we make the user feel like they have an impact?

How might we make the user feel like they have an impact?

People are not educated on energy production and usage

People are not educated on energy production and usage

People are not educated on energy, which contributes to a lack of meaningful change in consumption habits.


Lack of knowledge means users will not put any meaning behind the topic of energy saving.

How might we educate people abut energy production and usage?

How might we educate people abut energy production and usage?

Secondary Research

Secondary Research

With these insights, I got curious about other topics, specifically on influencing behaviours and learning processes. So I had questions I wanted answered:

Who influences behaviour the most in a household?

Who influences behaviour the most in a household?

Parents generally influence the children more, but the reverse is also true.


In the study “The Role of Parenting in Adolescent Development” by Nancy Darling and Laurence Steinberg (1993), it says that parenting styles and behaviour shifts can shift due to the changing needs and behaviours of adolescents.

What's the most strongest behaviour influence?

What's the most strongest behaviour influence?

The strongest influence of behaviour can vary to person but the most notable ones are social influence and rewards.

Whats the most effective way of educating people?

Whats the most effective way of educating people?

According to the study on different ways of learning, the study “Active Learning Increases Student Performance in Scien.....” by Scott Freeman. (2014) says that active learning is the most effective kind of learning. ThiS includes engagement, peer to peer, interactive methods etc.

Define

Define

Target Users

Target Users

With the user research, I wanted to solidify the target users and why I wanted to choose that group.

"Youth Social Media and Activism: The Role of Social Media in Youth Activism"

"Youth Social Media and Activism: The Role of Social Media in Youth Activism"

Boulianne, S. (2018). Youth Social Media and Activism: The Role of Social Media in Youth Activism. International Journal of Communication, 12, 1585-1604.

Boulianne, S. (2018). Youth Social Media and Activism: The Role of Social Media in Youth Activism. International Journal of Communication, 12, 1585-1604.

I focused my target users towards the younger demographic (13 - 18) because:

I focused my target users towards the younger demographic (13 - 18) because:

They are more susceptible for environmental action.

They also still have the mental capacity to understand thier own actions.

Have influence and can create impact to members of a family.

Personas

Personas

Meet Jim and Jenny. There are 2 personas showcasing billpayers and consumers. Ultimately to see how we can create a solution that would get both parties involved while focusing on consumers.


Jim and Jenny are personas created by the needs, pain points, lifestyle, experience and motivations of the users in the interviews I conducted

Features

Features

With the interviews, personas and secondary research in mind, I brainstormed possible features.

Feature goals

Feature goals

Congregation

Congregation

Create community engagement with the target audience.

Educate

Educate

Primarily educating the younger generation, ultimately influencing the older generation.

Modify

Modify

Modify target users outlook in energy saving actions.

Features

Features

With the goals in mind, I added features needed to create that goal.

Congregation

Energy usage programs in school - extra curricular activity.

Leader boards

Milestones / Targets

Freinds Activity

School Rivalry

Friend Insights

Educate

Energy Tracker

Quizzes

Energy news

Shows Events

Energy Facts

Modifying

Progression Points

Rewards / Prizes System

Progress Bars

Competitions

Friendly Rivalry

Hook Model - Behavioural Design

Hook Model - Behavioural Design

I wanted my product to reward the target users behaviour towards saving energy. Having the youth be the leading charge, while having the support of their families.

Sitemap

Sitemap

I knew which features I wanted to include and was starting to build a picture of how the website would look & function. To further help define the structure and architecture of the website, I created a website map and how users will flow.

Design

Design

Parent Company - ESB

Parent Company - ESB

I first looked at ESB’s company website to make sure my layout and experience is similar to what they have already established. Of course directed to a younger generation.

High Fidelity Wireframes

I decided to create high fidelity wireframes before user testing. I did this because my user testing was going to invove youth, and I wanted the experience to be engaging and understandable for them to continue the test.

Full View of Wireframe

High Fidelity Wireframes

I decided to create high fidelity wireframes before user testing. I did this because my user testing was going to invove youth, and I wanted the experience to be engaging and understandable for them to continue the test.

Full View of Wireframe

Mid Fidelity Wireframes

Mid Fidelity Wireframes

Having mapped out my websites features, I proceeded to create the wireframes.

I wanted to focus on structure and placement, so I began with low-fidelity wireframes. My goal for the structure was a modern, simple and brighter colours to attract younger users despite asking quite a lot of them (behavioural changes).

User Logs / Signs in to profile page

User Logs / Signs in to profile page

v

High Fidelity Wireframes

I decided to create high fidelity wireframes before user testing. I did this because my user testing was going to invove youth, and I wanted the experience to be engaging and understandable for them to continue the test.

Full View of Wireframe

Usability Testing

Usability Testing

Test Goals

Test Goals

The Users that I focused on is more likely be used to digital products, so I wanted to see how they found the experience. I set myself goals for this user test so I can see what changes to do before the final design.

Goal 1

Goal 1

Test onboarding and see if the user understands what the apps goal is.

Goal 3

Goal 2

See how they find the friend list and the process of adding, generating, choosing and saving a plan.

Goal 5

Goal 3

Get their thoughts of the app and if they would install this app.

Goal 2

Goal 4

Test the user if they understand the layout, structure and functions in the home page.

Goal 4

Goal 5

See their thoughts of the home page displaying multiple events.

Scenarios

Scenarios

Since there is a lot of frames in this website, I only wanted to test user experiences in high priority features, and also test A-B progress.


Test was conducted with 5 people educational skill raging from 1st year to 6th year secondary school level.

“Your school introduced you an ESB program and you would like to know more about it”



“You know the ESB program and want to be apart of it, join it and see your profile. From there explore whichever”

“Your school introduced you an ESB program and you would like to know more about it”



“You know the ESB program and want to be apart of it, join it and see your profile. From there explore whichever”

Feedback Redesign

Feedback Redesign

Before

Before

After

After

Users felt that the double sign in options were unnecessary.

Before

Before

After

After

Before

Before

After

After

A smaller change that i did was the text length, they showed me that the text was way too long in some parts, in times just skipped it and stopped reading.


There was also unnecessary text which didn't really give information on the topic.

Before

Before

After

After

From the test I did some changes in the profile page. Removed settings (added no value) and most importantly added achievements tab. It was added to increase the long term engagement since a user said they would only do the test and that's it.

Final Design

Final Design

View Prototpye

View Prototpye

Ui Final Design

Ui Final Design

ESB Main Website

ESB Main Website

Fonts

Headers -

St Ryde

Header (2) -

Open Sans

Main Text -

Arial

Colour Palette

Colour Palette

173d6d

0067a1

5fb2de

fefef8

1a1a1a

f07d1a

04a64b

Design Components

Design Components

Profile

Friend Page

Daily Quiz

Store

Rankings

Events

Achievements

Shop

Chat Page

Notifcations

Level Difficulty

Energy

Go to

Estimated Time

Thoughts

Thoughts

Incomplete - Next Steps

Incomplete - Next Steps

This product is incomplete, although its design is functional there is still lots of things to be done for this project to be a viable product that would be used by actual users.


The next step for my project, from a UX perspective, would be building the platform and keeping tabs on how customers engage with it. What works? What doesn’t? Could anything operate more smoothly? How are the needs of users changing over time?


There is also the business side of the project which needs to be further thought upon. How would it be funded, is it profitable?, benefits, product stategy?, etc. A lot of things which needs to be discussed for a service like this to be launched.

Learning 01 : More Mid - Fidelity testing

Learning 01 : More Mid - Fidelity testing

During this project I went straight to hih fidelity wireframes and testing. I believe this was too much work for the results given. I wasted a lot of time trying to make the perfect high fidelities and when it needed to be adjusted, changed or just overall reworked I spent more time redesigning for aesthetic instead of functionality.

Learning 02 : External components outside design

Learning 02 : External components outside design

For a project like this I learnt that when presenting final concepts ideas there is much more than the thought process, UX and UI when presenting. If I were to do this project again I would like to spend more time in outside research in a business point of view, how this concept would work.


This would be more about funding, stakeholders, how the project would bring in benefits to the company and what the company has to sacrifice and if the benefits are worth the takeoff, etc.

Navigation