Savee App

The savvy way to share your electric bill

The savvy way to share your electric bill

The savvy way to share your electric bill

about project

Savee is a web app that promotes transparency in sharing electricity expenses within shared households. Developed as part of my master’s degree using the Challenge-Based Learning methodology, the project was carried out in collaboration between four team members.

Challenge

How can we raise awareness about responsible electricity use in shared households?

Solution

A web app that makes energy consumption transparent and helps college students fairly split electricity bills, with monitoring tools and practical saving tips.

New heating routine (hi-fi version)

My RESPONSABILITIES

I was heavily involved in preparing and conducting interviews, carrying out market research, defining personas, and developing low-to-high fidelity prototypes with usability testing.

Role

UX/UI Designer

Year

2022-2023

DURATION

9 months

Tools

Figma, VS code

Featured

Media Play 23

Partnership

oUTPUTS

2 students interviews

6 questionnaires

Market research

Benchmarking

Defining persona

Key features

Lo-fidelity prototyping

Hi-fidelity prototyping

Usability testing

Empathize

What is it like to share a house?

🌿

2 face-to-face interviews and 6 questionnaires

Questionnaires provided an easier way to collect both qualitative and quantitative feedback. However, we identified that combining them with more informal, easygoing interviews could offer deeper insights.

Objectives:

  • Understand how participants organise the division of montly payments;

  • Identify moments of friction or perceptions of unfairness in cost-sharing.

“...for example, they would go from the living room to the kitchen and if necessary, they would turn on all the lights in the hallway... an hour or two passed and the lights were still on.”

A college student who shares a house with two roommates.

💭

Insights

  • Sharing a house requires adaptation and patience;

  • Many are living alone for the first time, without parental supervision;

  • They prefer quick, simple actions without feeling judged;

  • They want to pay their share of the bill without waiting for others.

Context

How did schools create their school newspaper?

🌿

benchmarking and interviews with teachers

This project was part of PÚBLICO na Escola, a partnership between the PÚBLICO newspaper and the Ministry of Education, aimed at promoting media literacy and critical thinking among students.


We needed to design for two distinct audiences.

  • For students (5th to 12th grade), we used simple language and visuals, focusing on creating news articles, correcting spelling mistakes, and verifying sources.

  • For teachers, we adopted a more institutional approach, focusing on the creation and review of school newspapers.

“...we created and reviewed the students’ news articles in Word Online.…

Teacher who took part in our tests

💭

Insights

  • During interviews with teachers, we learned that some had abandoned the idea of running an online school newspaper;

  • Others only produced printed editions;

  • Some ran extracurricular workshops where they used WordPress for publishing and Word Online for collaborative article review.

IMPROVEMENTS to the existing platform

How can we improve the platform before testing it?

🌿

usability checklist

The newspaper's backoffice is desktop-only, but the newspaper (what is published) can be accessed on any device. Before conducting the tests, I focused on improving accessibility and navigation, applying design guidelines to key elements such as buttons, forms, touch areas, and navigation components. I consulted guidelines from several sources such: Carbon (IBM's open sourch design system) and NN group.

One example was moving the 'View Newspaper' button to a more noticeable spot, which improved the flow for accessing the published work.

The ‘View Newspaper’ button was designed to promote better flow

Usability and FIELD TESTs

What is the best way to get feedback?

🌿

prepare and conduct usability and field tests

Since the platform was already being implemented, we conducted usability tests (evaluations on the image timeline) to observe first-hand how users interacted with it. Students were asked to create a news article, while teachers were tasked with reviewing one.

The tests included students aged 10 to 18 and teachers were carried out in two rounds:

  • 1st Round (Torres Vedras): 11 authors (students);

  • 2nd Round (Esposende): 3 editors (teachers) and 7 authors (students).

We had a report page where suggestions and bug reports were collected (post-evaluation feedback) and maintained contact every two weeks. This guided iterative improvements and ensured a better user experience.

Indicative diagram of the temporal space and organization of the evaluation rounds

Context of the platform at the beginning of the Torres Vedras evaluation

With students, we aimed to understand whether all participants were able to use the TRUE project tools effectively (e.g., synonym search, spelling correction, etc.) and to identify any difficulties they might encounter during the process.

Example of our news creation editor (including Spelling, News Search, and Related News from Público

We had general help always available, which adapted depending on whether a student or teacher profile was logged in. This help also served as an onboarding tool to introduce the platform to new users.

Some general assistance that was effective during onboarding and while using the platform

💭

Insights

  • Realized that custom colors and brand imagery are very important for the identity of the school newspaper.

  • Younger students were afraid of making mistakes while writing (even with a spell checker). This may be because they approach it with a “test” mindset, even though we tried to make clear that we were actually looking for their questions and errors.

  • Younger students were more accustomed to navigating on tablets.

First round results

What can we improve for the second round?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

Key improvements after usability and field testing:

  • ✅ Fixed bugs;

  • 🎨 Enhanced customization (colors, logo and newspaper name);

  • 💾 Auto-save to prevent work loss;

  • 🆘 Added more help options;

  • 💬 Improved feedback in modals and fields;

  • 🔗 Clarified related news functionality.

Adapting the newspaper's colors

Newspaper color customization using a color picker

Newspaper color preview

💭

Insights

  • I pitched the idea of improved customization to the stakeholders before user testing, but it was initially considered a lower priority. However, after the first round of field trials, I managed to convince everyone. I learned that in projects like this, each partner has their own agenda. Timing and user feedback make all the difference.

Second and final round results

What can we still improve?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

  • Improvements after usability and field testing:

  • ✅ Fixed bugs;

  • ✂️ Made image cropping more clear;

  • 💡 Prepared suggestions for future improvements;

  • 📚 Organized documentation to assist future user.

Add new image and clearer cropping buttons

Add new image and clearer cropping buttons

💭

Insights

  • Sometimes it is difficult to manage the project timeframe and understand that some decisions involving changes to the database cannot be implemented in time.

Context

How did schools create their school newspaper?

🌿

benchmarking and interviews with teachers

This project was part of PÚBLICO na Escola, a partnership between the PÚBLICO newspaper and the Ministry of Education, aimed at promoting media literacy and critical thinking among students.


We needed to design for two distinct audiences.

  • For students (5th to 12th grade), we used simple language and visuals, focusing on creating news articles, correcting spelling mistakes, and verifying sources.

  • For teachers, we adopted a more institutional approach, focusing on the creation and review of school newspapers.

“...we created and reviewed the students’ news articles in Word Online.…

Teacher who took part in our tests

💭

Insights

  • During interviews with teachers, we learned that some had abandoned the idea of running an online school newspaper;

  • Others only produced printed editions;

  • Some ran extracurricular workshops where they used WordPress for publishing and Word Online for collaborative article review.

IMPROVEMENTS to the existing platform

How can we improve the platform before testing it?

🌿

usability checklist

The newspaper's backoffice is desktop-only, but the newspaper (what is published) can be accessed on any device. Before conducting the tests, I focused on improving accessibility and navigation, applying design guidelines to key elements such as buttons, forms, touch areas, and navigation components. I consulted guidelines from several sources such: Carbon (IBM's open sourch design system) and NN group.

One example was moving the 'View Newspaper' button to a more noticeable spot, which improved the flow for accessing the published work.

The ‘View Newspaper’ button was designed to promote better flow

Usability and FIELD TESTs

What is the best way to get feedback?

🌿

usability checklist

Since the platform was already being implemented, we conducted usability tests (evaluations on the image timeline) to observe first-hand how users interacted with it. Students were asked to create a news article, while teachers were tasked with reviewing one.

The tests included students aged 10 to 18 and teachers were carried out in two rounds:

  • 1st Round (Torres Vedras): 11 authors (students);

  • 2nd Round (Esposende): 3 editors (teachers) and 7 authors (students).

We had a report page where suggestions and bug reports were collected (post-evaluation feedback) and maintained contact every two weeks. This guided iterative improvements and ensured a better user experience.

With students, we aimed to understand whether all participants were able to use the TRUE project tools effectively (e.g., synonym search, spelling correction, etc.) and to identify any difficulties they might encounter during the process.

Indicative diagram of the temporal space and organization of the evaluation rounds

Context of the platform at the beginning of the Torres Vedras evaluation

The ‘View Newspaper’ button was designed to promote better flow

Some general assistance that was effective during onboarding and while using the platform

💭

Insights

  • Realized that custom colors and brand imagery are very important for the identity of the school newspaper.

  • Younger students were afraid of making mistakes while writing (even with a spell checker). This may be because they approach it with a “test” mindset, even though we tried to make clear that we were actually looking for their questions and errors.

  • Younger students were more accustomed to navigating on tablets.

Empathize

What is it like to share a house?

🌿

2 face-to-face interviews and 6 questionnaires

Questionnaires provided an easier way to collect both qualitative and quantitative feedback. However, we identified that combining them with more informal, easygoing interviews could offer deeper insights.

Objectives:

  • Understand how participants organise the division of montly payments;

  • Identify moments of friction or perceptions of unfairness in cost-sharing.

“...for example, they would go from the living room to the kitchen and if necessary, they would turn on all the lights in the hallway... an hour or two passed and the lights were still on.”

A college student who shares a house with two roommates.

💭

Insights

  • Sharing a house requires adaptation and patience;

  • Many are living alone for the first time, without parental supervision;

  • They prefer quick, simple actions without feeling judged;

  • They want to pay their share of the bill without waiting for others.

How do young people live, and what motivates them?

🌿

Market Research

According to the Plano Nacional para o Alojamento para o Ensino Superior (PNAES), in 2022, the number of displaced college students was:

18 M

Europe

108.5K

108.5K

Portugal

37.6K

37.6K

75 km radius of Aveiro

75 km of Aveiro

A study by the Francisco Manuel dos Santos Foundation in 2021 revealed that 90% of young people feel a strong responsibility towards combating climate change. However, this socially conscious group faces economic instability and soaring rent prices.

Where youth (15-34) live with in Portugal. Source: FFMS (2021)

💭

Insights

Although climate change is an important topic for young people, in the interviews they spoke more in depth about what they could do with the money saved.

A study by the Francisco Manuel dos Santos Foundation in 2021 revealed that 90% of young people feel a strong responsibility towards combating climate change. However, this socially conscious group faces economic instability and soaring rent prices.

Where youth (15-34) live with in Portugal. Source: FFMS (2021)

💭

Insights

Although climate change is an important topic for young people, in the interviews they spoke more in depth about what they could do with the money saved.

First round results

What can we improve for the second round?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

Key improvements after usability and field testing:

  • ✅ Fixed bugs;

  • 🎨 Enhanced customization (colors, logo and newspaper name);

  • 💾 Auto-save to prevent work loss;

  • 🆘 Added more help options;

  • 💬 Improved feedback in modals and fields;

  • 🔗 Clarified related news functionality.

Adapting the newspaper's colors

Newspaper color customization using a color picker

Newspaper color preview

💭

Insights

  • I pitched the idea of improved customization to the stakeholders before user testing, but it was initially considered a lower priority. However, after the first round of field trials, I managed to convince everyone. I learned that in projects like this, each partner has their own agenda. Timing and user feedback make all the difference.

Second and final round results

What can we still improve?

🌿

pitch new funcionalities to the stakeholders and organize bugs to be fixed

  • Improvements after usability and field testing:

  • ✅ Fixed bugs;

  • ✂️ Made image cropping more clear;

  • 💡 Prepared suggestions for future improvements;

  • 📚 Organized documentation to assist future user.

Add new image and clearer cropping buttons

💭

Insights

  • Sometimes it is difficult to manage the project timeframe and understand that some decisions involving changes to the database cannot be implemented in time.

What solutions already exist on the market?

🌿

Benchmarking

To position Savee effectively, we conducted a benchmarking study focused on two key areas: energy management and expense management. While I was not directly involved in this step, it played a crucial role in shaping our design decisions.

We analysed several existing solutions, including: EOT, Smappee, EDP Re:dy, Bosch HomeCom Easy and Splitwise.

Benchmarking analysis

💭

Insights

  • There are several energy monitoring solutions, but none has expense sharing.

  • Although there are market solutions for managing energy costs, none provide user profiles for multiple people sharing the same household.

Define

Who is our target audience and persona?

🌿

explore target audience and defining personas

We created provisional personas to represent key user groups:

  • “Overwhelmed” – a 35–50-year-old secondary school teacher managing two households and daily logistical challenges.

  • “Adaptable” – an 18–25-year-old university student, socially active, environmentally conscious, and living on a limited budget.

Since most of our users are young university students sharing housing with strong environmental concerns, we focused on this group. Most of the features designed are also relevant to other audiences.

Our solution was tailored for Pedro, a 19-year-old second-year student at the University of Aveiro, from Covilhã, sharing a house with three roomates, and living on a tight budget.

Persona that guided the process

Ideation and Testing

How can we bring “Savee” to life?

🌿

prioritize features and low-fidelity mock-up

To better understand and prioritise user needs, we translated our insights into actionable user stories using a Must / Should / Could framework. This helped guide the design of Savee, ensuring essential functionality was addressed while also identifying areas for enhancement and optional features.

Priorization framework

Usage:

Pedro creates the group "2ºdto" in Savee and adds his housemates. He sets the date of the last electricity bill. Each member adds the power of their appliances and manually records usage time. They can create routines to reduce manual input. Ideally, an energy monitoring device (like EOT) could further automate the process. When the bill arrives, the app calculates each person’s share based on their consumption. If Pedro disagrees with the calculated amount, he can contest it with the housemates.

Key features:

  • Create a group of housemates;

  • Add appliances;

  • Create and schedule tasks, organize into routines;

  • Track individual energy consumption;

  • Get alerts when monthly average is exceeded;

  • View and manage each person’s share of expenses;

  • Access history of payments and energy usage;

First paper mockups

Is this version user-friendly and simple?

🌿

low-fidelity usability testing

For the low-fidelity prototype usability tests, we recruited five participants from our target audience. Each participant completed a 30-minute remote session via Zoom.

The sessions included five predefined tasks aimed at evaluating the product’s core functionalities. At this stage, the focus was on assessing usability and functionality rather than visual design.

Lo-fidelity mockups

💭

Tests Insights

  • Track only individual tasks; other tasks are shared among group members;

  • Remove contest value from the payments section

  • Use default average values for equipment instead of manual entry (e.g., 2000W for a hair dryer)

How to simplify and convey the brand image?

🌿

high-fidelity development and prototyping

We simplified some of the functionalities and began integrating typography, colour, and design elements that define our platform’s visual identity.


Usage:

Pedro creates the group "2ºdto" in Savee and adds his housemates. He sets the date of the last electricity bill. Can add individual tasks (shower, cooking, hair drying). They can create routines to reduce manual input. When the bill arrives, the app calculates each person’s share based on their consumption.


Key features:

  • Create a group of roommates;

  • (x) Add appliances;

  • Create and schedule tasks, organize into routines;

  • Track individual energy consumption;

  • Get alerts when monthly average is exceeded;

  • View the amout each person must pay;

  • (x) Negotiate each person’s share of expenses;

  • Access history of payments and energy usage;

Homepage and Payment Flow: Low-Fidelity vs High-Fidelity Prototype

Are the interactions and visual feedback clear?

🌿

high-fidelity testing

We recruited five young adults living in shared housing.

The test included four predefined tasks, using the Think Aloud protocol to understand participants’ motivations and pain points. Between tasks, we asked open-ended questions to gather further insights about their experience.

The platform scored 88 points on the SUS, placing it in the "Excellent" range (Class A), indicating a high level of perceived usability.

💭

TEST Insights

  • 3/5 participants thought they had to add time before a task.

  • 3/5 participants tried adding a routine via the task button.

  • 2/5 participants liked seeing how the value was calculated.

Final remarks

While we developed the Savee web app MVP in React within the designated timeframe, working in a smaller team of all working students, we would recommend some improvements.

🔑

Takeaways

  • IoT integration: would improve accuracy and easy of usage;

  • NFC Task Logging: We should allow quick task logging via phone tap (e.g., before shower) to reduce manual input.

  • Notifications: Currently only alert bill entry dates; apply to other scenarios could boost user engagement;

  • Personalised Tips: Improve relevance and accuracy of recommendations for users.

This was an engaging project with a promising idea that holds potential for further development. I hope it resonates with you as much as it did with me, and I welcome any suggestions for improvement.