The Challenge
How might we redesign the homepage of an NGO acting on the IA and the content, within a two-week design sprint?
The Client
Marevivo is an Italian NGO that aims at:
- Fighting climate change to protect the sea
- Promoting environmental education
- Halting overfishing
My Role
UX Researcher and Designer
Timeline
2 weeks
Goals
- Test the Information Architecture (IA) and the content to improve the user experience.
- Redesign the homepage as a Minimum Viable Product (MVP).
Deliverables
- Usability tests on the current website.
- IA and content updates proposal (homepage).
- Three proposals of a redesign for the homepage (desktop).
- New homepage redesign (MVP).
Test
I planned and conducted remote card sorting and usability tests to find out if:
- users could understand the overall content
- users were familiar with homepage naming conventions
- users could accomplish main interactions to support Marevivo purposes
Open Card Sorting
Three participants were given 30 cards with namings taken from marevivo.it homepage (Italian version), and they had to group them and create one category/ title for each group created.
findings
- Most users have created 2 new categories. One for the navigation menu and one for the homepage sections.
- One user would have liked to see who are the supporters, partners, and sponsors of Marevivo.
- For most users, some names were difficult to categorize (Web attivista, Divisioni, Scuola, Azienda, Scrivi la tua email).
findings
- Overall, users understood what the page was about even though they were missing a clear statement regarding what Marevivo is or does.
- Some users said there was too much information to look at.
- All users could see active campaigns and projects but could not choose a specific one to donate to and had to return to the homepage to make a generic donation.
- Most users understood how they could become volunteers.
Usability Tests
After the card sorting, participants were given specific tasks to accomplish on Marevivo homepage.
- What is Marevivo? What are its core activities?
- Discover active projects and campaigns, and make a donation.
- Find out how to become a volunteer for one project.
Competitor Analyzed
One indirect competitor was analyzed (savethechildren.it) to assess the same users’ interactions and flows also present on marevivo.it.
findings
- Savethechildren.it had a “Donate” button in the navigation bar.
- Had testimonials.
- Explained their activities in a concise and visual way.
Define
Hypothesis Before The Redesign
I assumed that increasing donations was a critical aspect for Marevivo and that it could be used as a specific goal for the redesign.
“Increasing the donation CTAs along with making improvements in the content and the IA, would increase between 1% and 3% the donations.“
Ideate
__ Assumptions
1.The section’s order was chosen by running secondary research and analyzing data (e.g., Marevivo president public interview).
2. I assumed they were willing to improve memberships, donations, and income declaration support more than the volunteering aspect.
__ Limitations
- I didn’t have analytics data on the website (demographics, best-seller products, user behavior, bounce rates, etc.).
2. No backlog document was available to check if any other changes could be included in the redesign.
3. For time reasons, IA and content were only tested on three users.
First Two Attempts of Redesign
Based on the collected data I made two first proposals:
1) a conservative option: very similar in terms of visuals but with some IA and content structure changes (order and distribution of information)—link to PDF.
2) a disruptive one: keeping updates on IA (primary/ secondary CTA’s, navigation bar, and new sections) and content (copy and microcopy) trying to give a more catchy and easy-to-understand feeling while maintaining it professional—link to PDF.
Proposal 1 – Updates
1. CTA (Sostienici) integrated into the navigation bar.
2. New section added: all Progetti e Campagne (projects and campaigns)are displayed.
2.1. New section created: Come Aiutare (how to support).
2.2 New Section created: Blue Shop (products display).
3. Footer: changed order of the lists (from most to less relevant).
Proposal 2 – Updates
1. Navigation Bar: the main navigation categories and the CTA Sostienici (support us) were added.
2. New section created: what is Marevivo, mission description, CTA to join and more info link (brings to Chi siamo/ who we are page).
2.1 New section created: Progetti e Campagne with description, CTA to support and link to all projects & campaigns.
2.2 New section created: Come Aiutare (ways to support) plus CTAs, and more info link (opzioni).
2.3 New section created: shop with product slider, CTAs to buy, and links for info on products (Dettagli).
2.4 New section created: testimonials (people named as Cavalieri del Mare by marevivo) + CTA to support.
3. Improved section: icons, CTA to support and link to progetti e campagne added.
3.1 Improved Section: icons and link to discover each division were added.
Client’s Feedback
” I like most the second redesign. Sections are clearer than before, but I still miss a more consistent narrative, more storytelling to engage users.”
” Also, I think that there is too much text on the second redesign.”
” Could carousel in the first section be replaced for something else? “
After listening to the client’s feedback I looked for some inspiration from similar organizations and tried to think of ways to integrate new insights. I also have reflected more critically on Marevivo‘s value propositions.
Prototype
And here is the final redesign I delivered. See the homepage (MVP) image below or open the PDF.
Proposal 3
Prototype’s Recording
__Next Steps & Recommendations_ _
1. The redesign has to be tested (A/ B test) on users to check its effectiveness.
2. Minor corrections are needed (e.g., tagline – letter case consistency).
3. Once the redesign has been validated, a design audit has to be run on the rest of the pages.
- It would be advisable to include a section to explain how donations are distributed and leveraged for each campaign and project.
2. It also would be advisable to include information on who are the Marevivo‘s Partners (?).
3. Consider adding volunteers’ testimonials on projects/campaigns pages.
If you liked the project and you are planning any improvement for your website or if you would like to get in touch let’s connect on Linkedin! You can also send me a message through the button below.
More Projects?
How Can We Use Quantitative Data To Launch Charity Campaigns?
Google Analytics and usability tests to design campaign interfaces for fund-raising.
Exploring Solutions For Older Persons Transportation: Accessing Alternative Services
Mobile version of a website that aims to help older people with local displacements, healthcare, and chores.