The CauseMatch new campaign page is really exciting project, this is the face of any campain that run through CauseMatch, beside the new ux and ui, we added some cool features! it's worth to wait!
My role: UX Research, UX, UI
CauseMatch Project
Introduction
The campaign page is the flagship product of the company, it is the platform that the donor meets when he comes to donate to any organization. The campaign page has a role to convey a message, to be easy and accessible to donors – to donate. Ambassadors to get impresseion of their journey to their goal and to the nonprofit- to get the feedback if their campaign- does its work!
First Step- Survey
Over the years, 2 versions of the campaign page design were created. The last version is already old, 3 years old, during this time the company underwent a significant change in the target audience, which created new needs. I went to talk to the campaign managers, they hear, see and receive feedback again and again from the customers. beside asking the campaign manager for their feedback, i went to TrustPilot and read the clients reviews.
problem
different clients – different needs, Page has to be easy to customize
Solution
A lot of space in each components, flexiable structure, places to add text between sections
problem
there are clients taht want their campaign story to be in much more meaningful place in the page, which is now in a tab in the donors area, we know , by data that this area isn't read by donors, and it's waste to put this long section in more important place
Solution
we moved this section to be after the perks section with a Read More button- for expanding. we're going to check if in this place the story section is getting noticed more than before!
problem
Current campaign page is boring, old fashion and colorless
Solution
we're going to add colors, exciting features and easy colors customizing
Second Step- wireframes
We started working on the ux of each section separately, the donation area, the perks area, and the section of donors, ambassadors and teams.
Third Step- Design
After month of back and forth we finally started coloring it! how exciting!
Let's review the changes of each part
Hero section\ donation section
The donation area got an innovative twist, it became very easy to customize, a simple and flexible structure, the progress bar area was highlighted and placed as the first element, the traditional clock was replaced with an innovative element that creates a sense of continuous progress due to the use of the countdown, the colors became vivid, yet customizable Easily.
Perks
The perks area is complex, a lot of content and many options, sometimes the client chooses to display a large number of layers which necessitates producing a small component to create a sense of load. The significant change was in mobile, when in the old version the levels were almost unclickable and readable. We worked on a renewed grid that gives a lot of room for customization
Donors
The donor area as a whole shows tabs for donors, ambassadors and groups, in the old design it also included the about campaign tab, we simplified the tab bar to a minimum and moved the about tab to an area by itself. In the Donors tab, the donations appear in real time with information about each donation, the halo becomes dominant and full of color, with functionality completely identical to the previous design to simplify the development process
Ambassadors
The ambassadors area is the indication for the ambassadors to see in real time their progress status against the progress status of the other ambassadors, each ambassador has his own page that can be accessed from the ambassadors tab, we simplified the process that was a bit cumbersome in the current design, we added a cool feature of likes to create a competitiveness among the ambassadors. We worked on an explanatory and detailed copy, and left room for personalization message
Ambassador Page
The ambassador's page is a personal page for each ambassador, at the top of the page there is a sticky strip that includes all the information about the ambassador, target amount, how much he raised, a profile and a personal message, you can share the link to this direct page and send it to friends who will donate directly &receive feedback and likes.
Teams
The team area contains the pages of the different teams, we added the like feature to each team to create good competitiveness between the teams as well, we gave additional space for a long personal message to each team.
Forth Step- Review
I met with the customers success team, the sales, the dev and of course the ceo, and got their feedback on it, added some new features as the request. now moving this for development and than to clients review