DCA is an all-in-one web app that streamlines volunteer management.

With supercharged features to speed up admin processes and flexible designs catering to various programme types, it’s every program owners’ ideal assistant. I helped design the entire experience from concept to delivery.

My role

I led two junior designers in creating and delivering a volunteer management portal. I collaborated with multi-functional teams, managed stakeholders and handled the entire design process from research and ideation to delivery and implementation. The junior designers assisted with visual design iterations and prototyping for engagement sessions.

Results

Although the project is still in development, there have been positive reactions, including increased interest from program owners wanting to join the platform, reduced design-to-development handoff time, and improved data collection for analysis.
How might we build a system that works well for program admins?
We needed to get out of the rabbit hole, change the current processes, and work towards gathering the building blocks to own a better system.

Priority was to streamline admin tasks, establish trust and ensure inclusivity. 



To design the portal's architecture and features, I asked programme owners a series of questions to understand what works and does not work well in their current volunteering management portal (if any) and their process.
Dual session views, customised & automated email templates, flexible date and roles scheduling, clean data collections were some of the features designed for efficiency, flexibility.
We can design a wonderful all-encompassing system if all the stars align, but the reality is to build the best system under constraints

Since this was an MVP product, I prioritised rolling out the essential core functionalities. We had to complete the design work stream within 12 weeks — one that addressed users’ pain points and was extremely code-friendly as we were building on a platform that was very basic.

The tricky part was to zoom in and out and consider how the designs of the back-end admin portal could impact the front-end view, as most of the information displayed on the front end was pulled from this admin portal.

Finding out the right problem before designing the solution right

Imapped out the site map, plotted the user flows, and built greyscale wireframes with regular conversations from the various stakeholders.

During the discovery and define stages, I facilitated design workshops and engagement sessions, mapped out detailed user flows and site maps, produced low- to mid-fidelity sketches for design reviews.
Design iterations and user insights from testing
Show not tell

’ll admit that this is something I struggle with.  I thought I found the perfect design solution to allow users to manage their applicants for different program types (either by individual sessions or by all sessions view) by intercepting a modal window and asking them to make a selection.

Sounds pretty straightforward, right?  But through testing and analysis, I realised my oversight—how can I expect users to make a decision without showing them both choices first?

Before: Asking users to choose between individual sessions or all session view without context (modal window)
After: Presenting both options to toggle, allowing users to see & compare before deciding the view that best suits their prog needs (in site banner)
Visual design is more important than you think

While option 2 seemed like a great revelation, many users skipped reading the yellow banner asking them to choose and were confused about why the interface was locked when they tried clicking into the cells.

I found that this was because the character line in the info banner was too long to scan quickly, causing most users to skip past it even though it was prominently designed. This led me to option 3, which broke the info text into digestible chunks and prominently placed it in the center.

This was so much better received by the users.

After:  Presenting information text in short, clear phrases places prominently in the center, making it easier for users to read
Combine different tasks together if it makes sense

I carefully mapped out every step of their user flows with the aim of identifying opportunities where I could speed up their processes. For example, I didn’t want programme owners have to go through the entire form-filling experience every time they had a new opportunity to publish.

So I came up with a ‘duplicate’ feature from the list of their past opportunities to let them submit new programmes by overriding existing data. This was a good shortcut.

Before: 'Duplicate' function allowed prog owners to easily clone and override details from past prog submissions.
After:
Redesign shows how prog owners can accomplish 2 actions - duplicate prog for submission (under actions) + track recent submissions, all in a single screen
Don't forget your super users

Time is precious. Programme owners would rather focus their time on important things than to do tedious admin processes. I added features that could speed up their workflows should they chose to use those options.

I knew that programme owners would be much happier using the portal if the system could help them do the majority of the heavy lifting so much so that their primary role was mainly to check for errors and validate the data before submissions.

The result

This portal is not by any means done. In fact as a MVP, it the start of iteration and improvement process as new insights or experiments come along. However, I’m confident now that the portal embodies efficiency and flexibility to automate tasks and streamline workflows. With clean, user-friendly interfaces, DCA ensures simplicity, intuitiveness, to meet program owners core needs.