CommuniHelp
UX/UI Design
CommuniHelp is a mobile app that matches skilled volunteers with the best opportunities, while helping charities recruit and retain the best talent. The client wanted a completely fresh perspective on their signup process and UI. The team validated the product idea, optimized the onboarding flow using principles of gradual engagement and simplified login while allowing for better security and authentication.
Following multiple colour studies, the brand palette was expanded to appeal to product’s younger audience and new web-safe fonts were selected based on detailed typeface analysis that emphasised legibility for body copy and readability for the headers. Both fonts and colours were selected with AA accessibility standards in mind.
The process began with white-boarding then moved on to paper prototypes and low-fidelity wireframes, which were tested. Following multiple stages of white-boarding and flow refinement based on the outcomes of testing and user input, mid-fidelity wireframes were designed.
Principles of progressive disclosure and gradual engagement were used to design an isolated user flow that captured the user’s preferences and filtered the opportunities based on favourite causes, skills and preferred volunteer type. Numeric indicators of results were introduced in CTAs throughout the app. With every selection, the user sees the number of opportunities increase or decrease based on the change in data. This small but important feature communicates value of the app to the user and differentiates it from competitor apps.
Having validated existing brand colour choices, the team conducted multiple colour studies to select ideal complimentary colours that would add contrast and variety to the existing palette, making it more appealing to CommuniHelp’s younger target audience. New web-safe fonts were selected, based on detailed typeface analysis that emphasized legibility for body copy and readability for the headers. Both fonts and colours were selected with AA accessibility standards in mind. Lastly, an extensive image library that reflected the CommuniHelp user demographic and echoed the branded colour scheme.
