RENOVA GREEN | portfolio

Merged two products & rebranding

2023 • UX research • UX design • UI design

Overview

Outcomes

✔ Functional and modern-look prototype on desktop and mobile

✔ New brand identity: colors, logo, images

✔ Aesthetic photos

Project overview

Scope: I redesign the whole website and branding
Context: the clients needs a brand new website of green energy, combine with their new service (cleanings service)
I partnered with a talented developer

When

August 2023 - January 2024.

Goals

To merge 2 businesses: green energy products and a cleaning service into 1 website.
Have a fresh website with high rank in Google search engine.

Constraints

Lack of contents such us good quality photos of their team and their projects photos
Lack of copy writing
There is no brand guidelines: color palette, typography, visual style. So I need to define it first.

My role

UX/UI Design
UX Writing
Photography
UX research
Branding

Tools

Figma
Miro

Since 2015, Renova Green has offered high quality green energy products such as solar panels in the Northern part of Belgium.

This year, they’re expanding their business with a new service: warehouse cleaning. To showcase the blend of eco-friendly products and services, they need a fresh website that connects both offerings.

Outcomes

✔ Functional and modern-look prototype on desktop and mobile

✔ New brand identity: colors, logo, images

✔ Aesthetic photos

Frustrated Young Man Screaming in Fear_e

User pain points

Higher cost of electricity

1

Higher cost of electricity

Because of energy crisis, many people must pay higher cost of electricity.

Higher cost of electricity

2

Don't know how to maintain green energy products

.

Higher cost of electricity

3

Credibility

Confused to choose the trustable and good green energy company.

Higher cost of electricity

4

Confused to count the cost of energy and saved- money

For potential clients and newbie in green energy products, they get confused how to count these. Able to save money will convince them to use green energy products.

Higher cost of electricity

5

Higher cost of electricity

Sometimes the clients’ locations are far away from one another, meanwhile they just want our service to clean solar panels which is doesn't give us big profit

Original website

Higher cost of electricity

Age

All age:

youngest: 25 years old
oldest: 80 years old.

Higher cost of electricity

Income

low class
middle class
high class

Higher cost of electricity

Location

Flanders, Brussels, and 120 km from the office building in Bruges, until Limburg.

Higher cost of electricity

Who are they?

Home or building owners
People who pay so high electricity bills
People who are interested in “go green”, sustainable,
Electric car owners

Target users

Competitive research

My goal is to find out how to create a trustworthy site, how to avoid making a site that could cause users to complain, and to know from competitors how they showcase their projects that have been done. So, I observed and collected data from travel agents' websites and their online customer feedback.

How users choose product & service from trustworthy company

Read the reviews
How the company handles complaints on online reviews
Get recommendations from people they know, online, and influencers
Compare several companies who provide the same products and services
Talk with them
Check the certification on their website
Able to contact them easily
They share their legal business address
An up-to-date website with current contents

Elements & features on trustworthy company websites

Good reviews
Guarantee
About them: who are the team, address, VAT numbers
Why users should choose them?
Contact them: phone, email
Benefit if you contact them. For example: free consultation, free energy calculation
Certification
Complete works (projects)
An up-to-date website with current contents

Solutions

View prototype

1.

Good quality photos

High quality and professional
Several models with different races
Capture the staffs work with passion

5.

Credibility

Share company experiences
Why clients must choose Renova
Show certificates
Case studies: problems their clients have, solutions, and the reasons

9.

Reviews

Show reviews from satisfied clients
To increase credibility.

2.

UX writing

Tone of voice: formal
Use simple words
Concise (clear and short)
Reply to online reviews nicely

6.

Add map and service area

Show locations Renova Green covers

3.

Products & services

Explain the benefits of using green energy products and services: save money and ecology
Why choose them?
Free consultation and calculate energy

7.

FAQs

Save users' time and Renova' time to ask and answer common questions.

4.

Clear call to action button

Main action that Renova Green expect is users to call them by phone or meet face to face, Renova Gree can help users to count how much energy they spend and how much money they can save if they use green products.

8.

Blogs: educational contents

Good for SEO
Tips and tricks to maintain green products
Subsidies
How solars panel works in simple terms
The economic benefits of solar panels
The environmental impact of green energy

Solution & impacts

before & after redesign

I redesign Renova's logo into minimalist with more white spaces and has modern look. Aligned with Renova's new brand personality: sustainable, modern, and reliable.

Also, I combine 2 colors of Renova's main services which are green energy (green color) and cleaning service (blue color).

After

Before

With 3 different kind of fonts, the logo texts seems not united as one logo and can create the sense of disorganization. This can slow down users to scan it and less impactful first good impression of the brand.

The landing page focused on 2 services that Renova Green provides: green energy and cleaning service, also I show their very specific services.

I use 2 photos of workers who represent their two services. Showing real people doing Renova's services, smiling right at users. Based on psychology studies, this kind of photos could create welcoming vibe and warmth. That's exactly what we want to give to our users.

Clean layout with modern-look, based on Renova's new branding style: simplicity and modern.

After

Before

Outdated appearance
No clear hierarchy of contents. It might confuse users, with what to see first and next.
The brand colors is not showed on the landing page.

Before

To avoid creating confusions on users and help users to scan the website, I standardized button shapes based on Renova brand colors.

After

Imagine a website where the button looks different. Some rounded, some square, and others oval-shaped. This inconsistency creates confusion for users and slow down their process within the website.

Users struggle to understand the purpose and functionality of the buttons. They're wondering, "Can I click this?" or "Is it just decoration?".

Standardize button shapes based on Renova brand

Inconsistent button shapes create confusion

"Call us" as the the main Call To Action button to provide quick response and to increase trustworthy

The main Call To Action button is "Call us" on the top right corner and one is a floating button because Renova Green wants to build a personal connection to users and provide quick responses to what users need.

Also, based on research studies, providing a phone number encourages users to call directly and could increase trust and credibility. Users may perceive companies that offer direct contact options as more accessible, responsive, and trustworthy.

Before

Currently, there is no process info on the website. This can cause users wondering what's the next process after their call, how they make a schedule of Renova visits, and when they should make payment for Renova services. These three are frequent questions that Renova's staff receive from their users.

After

On desktop

Add the process info to guide users, to be transparent, to answer common questions

On mobile

Users know what to expect at each stage of Renova's service
To build trust. By providing detailed information about the process, it shows that Renova has clear processes or procedures in their work and won't leave their users in uncertainty.
To provide smooth user experience. Showing this Process info also guides users on Renova's service from start to finish and what to expect.
To answer the common question. This Process info reduces the need for users to get common questions about what's the next process after their call, how they make a schedule of Renova visits, and when they should make payment for Renova services, somewhere else.

Before

Currently, Renova team doesn't have good-quality photos of their team. This can cause users to wonder who are people behind the services. Using photos only from internet could also cause less trust from users.

After

Show good quality photos of Renova team

Since they have a tight budget for redesigning the website and I have basic photography skills, I proposed them taking the photos.

I created the photoshoot storyboard before the photoshoot day.

Click here to view.

Before

There is no frequently asked questions page on Renova's website. It can lead to users' frustration to find out information about Renova's services and policies, and leads them depending on calling or sending email to Renova' team.

After

No more depend on Renova's customer service & reduce phone calls

We decided to add the FAQ page to share users Renova's information or answers to users' common questions. Users can search for the answers themselves on Renova's website, without needing to call or email to seek help. The FAQ page can also reduce the number of messages or phone calls, which helps them work more efficiently.

On desktop

On mobile

What I learned

1

Challenges with client's point of view

When I suggest clients to use engaging pictures, writing, and logos to make a client's website look more professional, clients don't see it as a good intention. They see my suggestions cant take their team to spend more time double-checking their choices and slow down the process. They prefer to pick things based on their preference, even if they don't have rational reasons.

Here, I learned to find the middle ground, to respect their preference and to keep suggesting alternative designs. Eventhough in the end, they're the ones who choose and I learn to accept it.

2

Understand what users need the most

Some clients just want fast and done, not considering the looks. This time I learned to communicate well and ensure clients that looks does matter on a professional website. Then I simplify my design and communicate more with the developer if my design is easy to develop or not.

Thank you

I hope you enjoyed viewing this project as much as I enjoy creating it :)

View other works

Let's talk

Titus Kartika

Merged two products & rebranding

Outcomes

Project overview

When

Goals

Constraints

My role

Tools

Outcomes

1

2

3

4

5

Websites to collect users' feedback

Brands that have several different products and services

How users choose product & service from trustworthy company

Elements & features on trustworthy company websites

Good quality photos

Credibility

Reviews

UX writing

Add map and service area

Products & services

FAQs

Clear call to action button

Blogs: educational contents

Thank you