L.I.R.A.
Building the new corporate website to improve content structure and accessibility, integrating an autoamted chatbot for customer support
Client
L.I.R.A. Spa
Field
Public services
Agency
iDigit Group
Period
Feb - Mar 2022
Role
UX UI
Front-end dev
L.I.R.A. is a company with 50 years of experience in providing water and heating public services in Bologna, Italy. Committed to enhancing their offerings, they prioritize delivering flawless customer service.
At the beginning of 2022, I joined the iDigit Group design team for two months to completely redesign and launch the new L.I.R.A. website.
I collaborated closely with Adriano Mescia, a professional UX-UI Designer with whom I had previously worked on other projects. Together, we managed all phases of the website re-design, from its initial concept to the online release.
Project statement
The client aimed to create a new corporate website with a clear content organization and a fresh, modern look and feel.
The main objectives were:
- Defining a new sitemap with a structured content organization
- Creating funnels to generate leads from potential new clients (apartment building administrators)
- Implementing an automated solution to enhance customer assistance
Users
L.I.R.A.'s users are people between 35 and 55 years old who reside in Bologna. The target audience is categorized into two distinct groups:
- Final users (tenants) - They use the website to access information and pay their bills.
- Apartment building administrators - They leverage L.I.R.A.'s services to manage water and heating systems for their buildings.
Responsibilities
I managed all project phases alongside Adriano Mescia. Our specific tasks included:
- Understanding business requirements and managing client expectations
- Creating the new information architecture for the website
- Designing wireframes for both desktop and mobile devices
- Developing the final UI and creating an interactive prototype to present to the client
- Conducting meetings with the client to showcase our work, gather feedback, and implement changes
- Developing and deploying the website using the WordPress CMS
- Creating automated funnels for customer assistance using TypeForm
Design process
The project was organized into design sprints, each lasting 2 weeks. At the end of every week, we held meetings with the client to present our progress and gather feedback. We repeated this process for 2 months leading up to the website's online release, ensuring that client expectations were met and deadlines were respected.
The design process was structured into 5 phases:
- Structuring the website's information architecture and designing the chatbot flow for the automated customer care service
- Designing wireframes with an interactive prototype in Figma (for both mobile and desktop)
- Creating the visual design and finalizing the interactive prototype
- Developing the website on WordPress and deploying it online
- Developing the chatbot flow with TypeForm and integrating it with WordPress CMS
Adriano and I focused on different sections of the project while ensuring alignment in design decisions. Meanwhile, the copywriter analyzed the content of the old website to develop the new content. This collaborative approach allowed us to present an interactive prototype of the final website with real content instead of placeholder text.
Scope and constraints
We aimed to create a new website for L.I.R.A. to enhance their online communication with customers by providing clear content organization and an automated chatbot for customer care. Additionally, we thought to increase opportunities for generating leads from potential clients through structured funnels that guide users to get in touch with the company.
The website also features a user portal. However, this component is managed by a third party and was therefore out of scope for our project.
Given the tight deadline and the small team of just two people (with external support from the copywriter), we structured the project efficiently using agile methodology. The client was highly responsive, facilitating quick feedback turnaround.
Interviewing client to define business priorities and analyzing data to understand user navigation flow
Before starting the project, we had a couple of calls with the client to clarify priorities and expectations.
Afterward, I analyzed Google Analytics data from the old website to understand user navigation patterns, identify areas for improvement, and have an overview of web vitals.
Defining the sitemap with a new information architecture for better content organization
The sitemap was structured with a focus on two user groups (tenants and administrators) and the two services provided (water and heating).
Each user group features subpages highlighting the benefits of being a L.I.R.A. client and providing useful information about the services.
The administrator area includes customized funnels to generate leads from potential clients based on their specific service requirements.
Designing wireframes for both desktop and mobile devices
After defining the sitemap, we proceeded to design high-fidelity wireframes for all pages, both for desktop and mobile devices.
Our goal was to provide the client with a clear understanding of the website layout and navigation, ensuring their approval before moving on to the next phase without any concerns about the page structure. We designed over 50 pages.
Defining the color palette and typography
The primary palette features warm and cool colors (representing heat and water) along with the brand’s tones. Vibrant light blue and orange effectively highlight key business areas and attract user attention for calls to action.
The secondary palette uses lighter colors to create contrast in backgrounds and secondary UI elements.
The chosen font family is Raleway, a modern, elegant sans-serif Google font that maintains an institutional feel.
Primary palette
Secondary palette
Font family: Roboto
Regular
Semibold
Bold
Designing the final user interface using modular blocks
The modular blocks, established during the wireframing phase, allowed us to reuse content elements across different sections of the website.
The user interface is built from these modular blocks, designed in line with our defined guidelines for color palette and typography, complemented by custom vector illustrations.
This approach ensured the website’s content remained visually engaging and unique, avoiding the generic look of standard stock images.
Homepage
The homepage opens with a clear brand proposition, followed by two highlighted sections representing the main service areas: Water and Heating.
Next, a dedicated section showcases key services for end-users (tenants), with a CTA to explore all available services.
Following a similar structure but with distinct visual styling, the next section focuses on services for apartment building administrators.
At the bottom of the page, we provide resources for both audiences, including saving guides, helpful links, and a dedicated customer support area with multiple CTAs for contacting L.I.R.A.
Main services: Water and Heating
The main service areas use distinct color schemes to visually distinguish each focus area: Water and Heating.
Both pages feature a tabbed navigation below the main header to display content for different audiences (tenants and administrators).
Content highlights the benefits of each service, encouraging users to log in to their private area or register for full access.
Tenants dedicated page
The main page for tenant users incorporates the same service content blocks used on the homepage, providing a consistent user experience.
Following the list of main services, along with CTAs to explore all options, a dedicated payments section outlines various payment methods and their benefits.
Next, a resources section allows users to download common documents or visit a dedicated page for additional resources.
The page closes with a section featuring useful content and customer support options.
Tenants subpages for desktop and mobile devices
Below is a quick overview of the tenant user subpages, including Services, Payments, Support, Saving Guides, Modules, Useful Links, and more.
Administrators dedicated page
The page opens with a main header featuring the brand proposition for administrator users, accompanied by related CTAs for logging into the private area or registering.
Next, the three primary services for this audience are prominently listed, each paired with custom illustrations and clear CTAs directing users to the dedicated pages.
At the bottom, there is a section encouraging users to log in or register, along with the user support block.
Administrator services pages and lead generation funnels
The service pages showcase features and benefits along with useful information such as installation and maintenance processes, document previews, and more.
Dedicated CTAs for requesting a quote are positioned in the main header and after the main content.
Users are redirected to a new page with a form to provide the necessary information for the quote request.
Upon completing the form, users are taken to a thank-you page displaying a confirmation message, along with information about next steps and other main services.
Administrators subpages for desktop and mobile devices
Below is a quick overview of the administrator user subpages, including Services, Support, Useful Links, and more.
Creating an interactive prototype for final review before starting the development phase
At this stage, we had finalized the user interface for both desktop and mobile devices, incorporating the content provided by the copywriter.
We built an interactive prototype to allow the client to navigate the website pages, provide final feedback to refine the last details, and approve the user interface to proceed with the development phase.
Chatbot creation with Typeform and implementation on WordPress website
The chatbot is designed to assist customers in obtaining information, finding specific services, or contacting the appropriate technical office.
The first step involved creating the chatbot flowchart, outlining the required user information, questions, answers, and useful links. Next, I developed the chatbot flow in Typeform, tested it, and integrated it with the WordPress CMS.
Users can interact with the chatbot by clicking the fixed icon placed in the bottom right corner of the website.
For the laptop integration, I chose a small frame layout similar to Messenger or WhatsApp, ensuring it doesn’t obscure the page content. In contrast, the layout is full screen on mobile devices.
Client expectations were fully met, allowing users to easily access information about L.I.R.A.'s services through the new content organization of the website. In addition users now have an automated digital service for customer assistance that is always available to help.
Lead generation from potential customers has increased thanks to the structured funnels, enabling users interested in L.I.R.A.'s services to make inquiries or request quotes and consultations with experts.
The client has full control over the website's content and can make minor edits independently using the WordPress CMS, as requested.
Ready to take your digital product to new heights?
Schedule your free 30-minute consultation right away!
Why reserve your spot now:
Receive instant feedback from a design expert with over 10 years of experience
Gain access to a network of specialized freelancers I regularly collaborate with
Join the consultation online via Google Meet, accessible from any location on your preferred device. Plus, it’s completely free!