Re-designing AllFive's website could increase their productivity, revenue and will help them extend their reach within Menlo Park County and beyond. We achieved this by highlighting their school programs, motivating the visitors to donate and people to volunteer.
We determined that there were few objectives we needed to tackle in the project:
Conducted domain research and user interviews in order to figure out the following key objectives:
Looked into a couple of organizations which are similar to AllFive.
I performed a heuristic evaluation for the AllFive's original website using Jakob Nielsen’s general principles. Following are a few usability issues I encountered using the original website:
All Five did not have donation button anywhere in the top of the page. There was CTA to make a donation near the footer.
• On admissions page, important information like application process steps, deadlines, fees, contact details etc. was buried inside a lot of text.
• Content was difficult to read and had overlapping images.
Application relevant information was not on the application form.
On the 'contact us' page, when user sees a black box when hover over "Locate us on map" button. There was no error message to indicate map is not working.
I dug deeper to understand the following:
I conducted usability testing to validate my findings mentioned above. Three users agreed for usability testing to perform 4 different tasks:
I decided to create an affinity map to categorize the information and get a direction to proceed.
AllFive's original IA had a few problems like:
Proposed information architecture managed to highlight All Five's school programs, clear mission, team, partners, categorized resources and a separate page for users to know how to get involved with them.
Clear information architecture allowed me to create site map with meaningful categories.
I started with paper prototypes for all the pages in the website while continue to conduct regular meetings with the stakeholders and incorporate the feedback from our discussions. Then moved on to mid-fidelity prototypes on Figma. Lastly, I applied all the graphical elements to bring the designs to life into high-fidelity prototypes.
• Clear CTA And Information: Added donate button in the top navigation. Three main call-to-actions for AllFive are shown at the top on the homepage so users gain context immediately without having to scroll.
• Impact and User Quotes: Added impact and user quotes, so users will be able to connect with the AllFive's cause and gain transparency on how their donations make a difference.
• Clear Information For Admission Process: Presented admissions related info like fees, application deadline, contact details etc. in relevant chunks.
• Admission & Donation Forms: Integrated donation and admission forms directly into the new website. With this change users will feel greater sense of security in their transactions.
Re-design of their website had following impact on AllFive:
Designing for a non-profit organization with such a great mission was a great experience.
I learned that:
