Sadaka is a charity that aims at helping service users in difficult financial situations by providing hot food, essential goods and basic employable skills.
Due to the type of organisation the budget restrictions were immense. This meant that not only I was expected to be the UX Designer but also the “developer”, user researcher and overall project manager.
Due to being a charity, they already had a web builder platform in place (WIX) to which they could not deviate from due to financial constraints. That meant that, not only the design but the multiple technical challenges would have to be overcome using that platform. All of this while presenting a modern design with a sleek and intuitive user experience in order to satisfy the Trustees expectations.
Although user research tools such as UserTesting.com, ReFramer or Hotjar weren’t available for obvious reasons, by using the help of some of the service users, we could create a small user testing panel.
Using myself and some of the charity members, after planning a field visit, I have organised and conducted a few user interviews, tree testing and even Guerrilla testing in some instances. Although the user sample was not big enough for this type of testing, I could also run a smaller scale version of a card sorting which turned out to be quite revealing for organising the information architecture within the Navbar tabs.
During the competitive analysis, I had encountered some usability issues from similar charity websites from the area. This included unclear call-to-actions, and mission statements, visually unappealing and disengaging UI, and in some cases, confusing Donation journeys. These were obviously avoided during the creation of the website.
However this process also allowed me to incorporate a lot of good ideas from competitors. These included building a Trustees panel, outlining the mission in separate information blocks to clarify the message, including visual elements that remind the user that this charity operates locally, and resisting the temptation of using shocking images to guilt-trip users into donating (also known as “poverty porn”).
If I could put it into a percentage, due to the use o WIX (instead of working with a team of developers), I was creatively constricted in around 70%.
As I didn’t want to use the built-in content provided by WIX, and since this platform works by using sections (or Strips as they call it), I have attempted to create separate blocks of design (using Figma) that would be ultimately assembled in it. It took a lot of trial and error in order to get the dimensions to work in a responsive environment and to provide a seamless transition between the sections without looking like “it didn’t belong there”.
As Glassmorphism started to become more predominant as a trend towards the end of 2020 I have decided to use that approach to convey amore modern look. Regarding the Interaction design, I have used a combination of the WIX animation presets with a subtle use of image manipulation pre-prepared in Adobe Photoshop.
As the charity wanted to remain using the JustGiving Donation service (instead of the built-in donation option in WIX), I have tried to embed the widget into the code injection block in the platform.
Although this feature works most of the time, for some reason it didn’t in this instance. Since the Donation is by far the most important call to action for a charity this needed to be resolved in the most intuitive way for the user.
To keep the journey short and after playing up with the options within the JustGiving website, I have realised that simply using the charity pointed URL and setting it up as a button within WIX could easily solve this. The only downside was that the user would be redirected to anew page where JustGiving is present (while slightly increasing the length of the journey for the user). However the good side is that we could retain the current donation platform while doing at zero costs for the organisation.
WIX is extremely limited in terms of mobile optimisation. There are no options in terms of reuploading pictures and the text resizing can be very limited.
In order to overcome these issues, I have had to redesign a few “one size fits all” backgrounds in order to be non-disruptive to the text in the mobile view.
Despite of the unconceivable technical limitations, the strong desire in doing the right thing and providing a fresh, welcoming and up to date design and experience, allowed for this project to be completed within the forecasted sprints and without too many delays.
Please visit it below.