Irene Pellegrino, UI/UX

Works

No headings found on page

Living Room Conversation

I was hired as a volunteer UX Designer by Living Room Conversation. I worked with them for two months to redesign their website to improve navigation. The client wants to improve the structure of the website with a clear Sitemaps that helps users feel guided rather than lost.

I was hired as a volunteer UX Designer by Living Room Conversation. I worked with them for two months to redesign their website to improve navigation.

The client wants to improve the structure of the website with a clear Sitemaps that helps users feel guided rather than lost.

RESPONSABILITY

Research

Redesign the website

Sitemaps

Wireframe

ROLE

UI/UX Designer

TOOL

Figma

ROLE

UI/UX Designer

TOOL

Figma

ciao

Living Room Conversation is a nonprofit initiative that helps people bridge divides and build understanding through structured, respectful dialogue with different methods such as their events, online meeting rooms or their curated libraries. They are even referenced by different media such as CNN, TEDx and The New York Times.

They are even referenced by different media such as CNN, TEDx and The New York Times.

ciao

When I started collaborating with Living Room Conversation, their goal was to make the website visually seamless and easy to use.

Redesigning the website with a sitemap was a compelling challenge for me, so I took a new approach. I began by conducting a sitemap analysis to gain a deep understanding of the existing structure, which allowed me to create updated and more effective sitemaps.

Now that I had a roadmap, all I had to do was refine the sitemaps with the manager's feedback and build wireframes.

When I started collaborating with Living Room Conversation, their goal was to make the website visually seamless and easy to use.

Now that I had a roadmap, all I had to do was refine the sitemaps with the manager's feedback and build wireframes.

ciao

Brainstorm: I collaborated with the volunteer manager to discuss the website’s goals, define the target audience, and outline the types of content it would feature. I also proposed a rough project timeline, which was reviewed and approved, establishing a clear plan for the redesign process.
Next, I analyzed the website’s existing sitemaps to identify structural issues.
Sitemap: Based on precedent analysis, I created the first draft of the sitemaps and used the client feedback to add the pages they required.
I proposed a new sitemap to improve the site’s organization, navigation, and overall user experience that was approved with new pages their required.
Wireframes: I create wireframes, user flow and specification for the visual designer and developer; then I deliver to the Volunteer Manager to collaborate on the revision process.

Brainstorm: I collaborated with the volunteer manager to discuss the website’s goals, define the target audience, and outline the types of content it would feature.

I also proposed a rough project timeline, which was reviewed and approved, establishing a clear plan for the redesign process.
Next, I analyzed the website’s existing sitemaps to identify structural issues.
Sitemap: Based on precedent analysis, I created the first draft of the sitemaps and used the client feedback to add the pages they required.

I proposed a new sitemap to improve the site’s organization, navigation, and overall user experience that was approved with new pages their required.
Wireframes: I create wireframes, user flow and specification for the visual designer and developer; then I deliver to the Volunteer Manager to collaborate on the revision process.

ciao

From the brainstorm I have few insights from the organisation of the website.

Navigation was too heavy: users were presented with too many options in the menu, which can cause cognitive overload, instability and they can struggle to find what they need. I decided to simplify the number of top-level menu items by prioritizing the most important pages, using dropdown and submenus to organise content logically.

Navigation was too heavy: users were presented with too many options in the menu, which can cause cognitive overload, instability and they can struggle to find what they need.

I decided to simplify the number of top-level menu items by prioritizing the most important pages, using dropdown and submenus to organise content logically.

The website navigation

Lack of clarity in the navigation title: users experience confusion when the page they navigate to does not match the title they clicked on. For example clicking on “About our community” led to a page titled “LRC in community,” causing disorientation and uncertainty about the content and even drop-offs or frustration.

The solution was to ensure that the page title reflects exactly what the user clicked.Some pages have duplicate titles, which adds no value and can confuse users so I decided to eliminate those doubles and unite the title with the description.

The solution was to ensure that the page title reflects exactly what the user clicked. Some pages have duplicate titles, which adds no value and can confuse users so I decided to eliminate those doubles and unite the title with the description.

Poor structure and visual hierarchy on pages: Many pages lack a clear hierarchy of elements, making it difficult for users to scan and understand the content. For example on the “Topic Guides and Resources” page, the description is unclear and the cards do not visually communicate that they are articles.

Lack of a personal profile functionality: Users who log in or register cannot update their information or delete their account. This limits user control and can lead to frustration, especially if users need to correct mistakes.

ciao

When I finish documenting the old website sitemaps to deeply understand the structure, I create draft sitemaps and page-level sitemaps to ensure the site structure and the page visual hierarchy are well organized.

After the changes were approved, they requested the addition of three new pages to the navigation: workplace, education, and libraries.

After completing the sitemaps, I reorganized the content of each page to improve clarity and usability.

More specifically, I reviewed every page and evaluated the links within each section to value them as relevant, consistent, and well-structured. This allowed me to better align content with user expectations and create a more logical and intuitive information architecture.

After completing the sitemaps, I reorganized the content of each page to improve clarity and usability.

More specifically, I reviewed every page and evaluated the links within each section to value them as relevant, consistent, and well-structured.

This allowed me to better align content with user expectations and create a more logical and intuitive information architecture.

ciao

At this stage, I created wireframes for each page of the website based on the page-level sitemaps defined in the previous phase. The goal was to translate the sitemap into a clear and consistent layout, focusing on visual hierarchy, content clarity, and navigation flow.

During this phase, I encountered some issues with the page-level sitemaps I had previously defined. While the structure seemed clear conceptually, creating the wireframes revealed a more effective hierarchy for users.

As a result, I reorganized several elements to improve usability and clarity. I shared these changes with the project manager, explained the reasons behind them, and she approved the new structure.

Before: About our community

After: About our community

Before: What does a living room conversation look like

After: What does a living room conversation look like

ciao

Living Room Confidence is a beautiful reality that, like me, believes that communication is key. I was very happy to collaborate with them.

When I accepted this project, I was scared because I had never reorganized a website sitemap before. Through this experience, I learned a lot and I’m really proud of the strategy I adopted.