Alex Panichi

Roma Altruista

role / services

UI
Web Design

description

I redesigned this website for a charity based on Roma, Italy. Roma Altruista organises events to support people, animals, the environment and whatever needs help. Their website is the hub where volunteers can look for events, signup online, attend the event and make their contribution. 

year

2021 (currently being built)

01.

Discovery & Analysis

Working together with the marketing team of Roma Altruista and an external development agency to the redesign of the website, we soon discovered the faults of the current site:

  • The live website was really old and not fitting the purpose anymore to attract young volunteers and participate to charity events.
  • The website was becoming inadequate from a development point of view since it was based on an old technology and pretty difficult to update.
  • Most of the money coming in are from donations so one of the main priority was pushing also the marketing side of the charity.
  • Highlight on the website the part related to collaboration with businesses

I also did a quick restyle of the logo, changing the font to match with the font used on the website which is Dm Sans, Google Fonts. Colour wise I just went for a monochromatic simpler version in dark blue.

Roma Altruista logo
02.

My role

  • UX design creating set of wireframes and user flows
  • UI design creating the full website visuals
  • Web style guide
  • Iconography
03.

Project goals

  • Make the website more modern and user-friendly
  • Make it easier for volunteers to find and join events
  • Give volunteers opportunity to manage their attendance
  • Facilitate donations
  • Give a better platform to event coordinators to manage the event attendance
  • Lead generation to grow the email database
04.

Wireframes

I wireframed iteratively to define the information architecture of screens. I also explored various navigation approaches to determine the best experience for the user.

I collaborated with the marketing team and devs along the way to validate concepts and gather feedback to continue improving the experience.

Homepage, Events listing and Single event details
Roma Altruista home and events
Homepage, Events listing and Single event details
Roma Altruista Signup
Volunteer and Event coordinator areas
Roma Altruista Areas
05.

Visual Solutions

Homepage

The homepage is divided into 4 sections:

  1. the hero section with the statement in form of heading and video with the form to grab users emails
  2. Social proof from volunteers, businesses and vip ambassadors
  3. List of events for volunteers to apply
  4. Call-to-actions cards to involve businesses to host events
Roma Altruista work 1

homepage social proof

in this sections over here the social proof of Roma Altruista is even more highlighted showing logos of companies more and VIP ambassadors who participated to charity events

Roma Altruista work 2

homepage invite businesses

To involve companies in hosting and sponsoring events, there is an entire section on the homepage so businesses can easily apply.

Roma Altruista work 3
Roma Altruista work 4

Events page listing

This pages shows “All events” that will be happening in chronological order. The filters on the left provide the users tools to easily filter down the type of events they want to contribute.

Roma Altruista work 5

Individual event page

The individual event pages has all the information that the volunteer needs to attend the event:

  • Location, date and time of the event and the button to book the event
  • What will be done in the event
  • The event coordinator details and also will be possible to see other volunteers that have already booked their place 
Roma Altruista work 6
Roma Altruista work 7
Roma Altruista work 8

Flow for onboarding volunteers

After users click not he button to attend the event, the volunteer will be asked to signup/login to the website and eventually complete the form with all their details.

One extra optional step that is included in the event registration is the form to donate some money to the charity.

Roma Altruista work 9

Volunteer events and personal details

Once volunteers register for an event, they will be able to see al the past and future events in a specific section that they can access once logged in.

Roma Altruista work 10
Roma Altruista work 11

Events coordinators

Each event has an event coordinator which is the manager of the event. Each coordinator has a dashboard from where they can see the events assigned, volunteers attending and see which one have confirmed their attendance.

Roma Altruista work 12
Roma Altruista work 13
Roma Altruista work 14

Icons set for events categories

Created this set of icons for each type of event that the charity organises.

Roma Altruista work 15

Website style guide

This is the web style guide that I created for the developers so they can create the related UI components for the website.

Roma Altruista work 16
Roma Altruista work 17
Roma Altruista work 18
Roma Altruista work 19
next project

alexpanichi.com - All rights reserved © 2024