DeedmobSearch and filter experience redesign

client

Volunteer Centre Hackney (VCH)

role

UX Designer
UI Designer

team

Team of one

timeline

1 month

Following the completion of the VCH-Simply Connect user research project, discussions had continued with VCH around the next steps in optimising their volunteer engagement digital solution.

From the outset it had been made clear that VCH were unlikely to have the resources (even with the awarding of a grant) to design and develop a bespoke platform based on the findings uncovered as part of the project. The likelihood in light of this remained switching to an alternative provider, and one of the stronger platforms which had emerged after completing a competitor analysis was Deedmob.

However, stronger did not necessarily equate to strong, as all of the providers analysed had exhibited notable usability flaws. In the case of Deedmob, the search and filter experience was particularly problematic, a considerable concern as this task had also created significant friction for users during the previous testing on the Simply Connect platform.

But what if this experience could be improved to address the wants and needs of VCH users? Could this strengthen the case for considering Deedmob as a viable option for VCH to explore further? An interesting challenge therefore arose…

The challenge

Leveraging the findings from the VCH-Simply Connect research project, demonstrate how the search and filter experience could be optimised to meet the wants and needs of VCH users.

The deliverables from the project also need to equip VCH with design rationales and tangible assets that could be used as a basis for discussions with Deedmob going forward.

background

Deedmob - The foundations of a promising solution

Deedmob had proven itself to be one of the more impressive providers that I had assessed as part of the competitor analysis. The Deedmob powered site which I reviewed, Get InVOLved Norfolk, immediately stood out against competitors due to its modern, fun and vibrant feel — qualities sorely missed on competitor sites, which often felt clunky, dated, cold, and somewhat transactional. This was clearly a testament to the Deedmob mission of ‘promoting opportunities’ to do good in a ‘much more engaging way’.

Three mobile screens showing the Get Involved Norfolk website, powered by Deedmob, demonstrating user interface elements.

Of course, it was not only the visual design which contributed to this experience but also:

  • Access to organisation profiles within the portal, allowing users the opportunity to learn more about organisations without having to navigate off-site.
  • Social sign-up options streamline the registration process, whilst post-sign-up onboarding guidance aids in users understand and navigate the platform.
  • Chat-like feature, allowing users to communicate directly with organisations through the portal.
  • Impressive site speed.

However, possibly falling victim to the halo effect, upon closer inspection of the site, and with my designer hat firmly on, it became increasingly apparent that despite well-intentioned efforts to incorporate modern trends and patterns into the design, they often missed the mark. Troublingly, these flaws were particularly evident in one key area...

FEATURE EVALUATION

Shortcomings in the Deedmob search and filter experience

Amongst Deedmob's mission values is the aim to make opportunities ‘radically easier to discover,’ a noteworthy ambition and one which, if achieved, could make it a standout solution in the volunteer engagement software market space.

With this in mind, it was particularly disappointing that the walkthrough unveiled shortcomings not only related to core usability aspects such as navigation and findability but also in several other areas that challenged key user experience design principles.

Screenshot of Get InVOLved Norfolk audit
Working file from the audit of the Deedmob powered Get InVolved Norfolk mobile site

The outcome of having to overcome these challenges, in my assessment, resulted in an experience that fell somewhat short of this aim. Amongst the most pressing issues uncovered were:

Eye with a line through it, representing visibility issues.

Poor visibility and lengthy route to access search feature

Instead of directing users straight to the search feature, the main call-to-action on the homepage leads to an information page, with the option to access the search feature then being positioned among less important actions.

On the homepage itself, the search feature is accessible only through a tertiary button, which feels like an oversight considering the significance of the feature.
Mobile screens showcasing steps to access search portal.
The primary route to access the search feature
Icon representing unpredictability in search results..

Unpredictable outcomes

There is an evident lack of consistency and accuracy in the search results generated after running searches that should yield similar results. This suggests there may be flaws present in the algorithms applied to the search feature.
Two screens showing different search results with the same terms used in separate search fields.
Entering search terms that match specific filter options often returns fewer results than selecting the same options directly from the filter list.
Filters icon

Filters: Excess options with limited flexibility

There is a distinct lack of clarity and rationale behind the categorisation and inclusion of certain filter options, some of which feel mismatched to users expectations and intended goals.

Additionally, the lack of flexibility within certain filters is likely to lead to excessive user actions and the need to run repeated searches.
Mobile screens showcasing the various filter options available on the Get Involved Norfolk site.
Examples of limiting, redundant and ambiguous filter options
Icon representing missing or unavailable content.

Questionable design decisions and omissions on Role Description pages

Limited categories, buried content, excessive line lengths and crucial information gaps exist on role description pages, all of which contribute to the cognitive load placed on users when navigating these crucial pages.
Example of a role description.
Organisations are only required to complete a few mandatory categories, and crucially, a role availability category is missing, leading to many roles lacking this information in their descriptions.
Icon representing responsive design.

Limitations in responsive design

A misuse of screen real estate leads to a busy and cramped interface on mobile devices, hindering users ability to interact easily with content and process key information.
Mobile screens showcasing limitations in the responsive design of the Get Involved Norfolk site.
Large sticky elements (highlighted in red) as well as dropdown menus (with tightly packed options) are examples of some of the limitations in the responsive design.

Addressing the usability flaws identified in the design was of course imperative, but even more critical was how this would be done while fulfilling the needs and wants of VCH users.

USER-CENTRIC DESIGN

Establishing VCH user needs

I delved back into the data collected during the VCH – Simply Connect research project, homing in on the findings and insights gathered from the 10 usability tests conducted with the volunteer user group. This task aimed to re-focus my attention specifically on the user experiences and attitudes, both positive and negative, as users searched for volunteer opportunities.

As part of this approach, I revisited the affinity maps and rainbow spreadsheet created after the test sessions and considered different ways to further synthesise the data to support upcoming design decisions.

Notable quotes collected from usability test sessions
Notable quotes collated in an affinity map following usability testing with VCH users

DATA SYNTHESIS

Representing the VCH target audience with user personas

The VCH target audience comprised of diverse user profiles, which extended beyond demographic characteristics like age, gender, and employment status. Variations in attitudes and behaviours regarding motivations for volunteering, preferences for types of opportunities, and familiarity with practical aspects of volunteering were also evident. Based on this, there were also varying preferences in what users sought in a search and filter experience.

For this reason, I decided to create 4 user personas, which I would use as empathetic reference points to help inform the redesign of the Deedmob search and filter experience to meet the needs of VCH users.

Persona details for Rae, a user profile highlighting key characteristics and goals.
Rae, one of 4 personas created to represent the diversity of the VCH user group

COMPETITOR ANALYSIS

Thinking (and looking) outside the box

I only invested minimal time in reviewing the assets produced from the competitor analysis conducted as part of the user research project. This decision was influenced by the awareness that Deedmob's search functionality ranked relatively higher compared to competitors, despite its own shortcomings. With that being said, I was still able to glean a few key takeaways from this process that could serve as sources of inspiration when ideating on the redesign.

Content example from feature comparison
Snapshot from the comparison document created as part of the competitor analysis

Preferring not to conclude this stage solely based on my initial findings, I felt it could be beneficial to broaden the scope of the competitor analysis, beyond the boarders of the UK, with the hope that dedicating time to this process would provide a broader perspective for inspiration and understanding.

Mobile screens of 4 international competitors analysed.
Solutions reviewed as part of the further competitor analysis

An analysis of these 4 platforms revealed a series of promising patterns that addressed friction within the Deedmob search user journey, which I collected as screenshots to act as reference points when ideating.

However, upon completing this process I still had some lingering doubts around whether my analysis of solutions in a market space still striving for a certain level of design maturity would provide the best benchmarks to aspire to. Therefore, before proceeding any further, I decided to explore one final avenue, hoping it would provide the depth of insights and practical guidance that could take the redesign to the next level.

competitive review

Learning from the great and the good

I had been troubled by a particular thought throughout my assessment of competitor volunteer engagement solutions that I now confronted directly once again — Why did volunteer engagement digital solutions so often diverge from established design patterns commonly found on job boards?

It seemed that the teams designing volunteer engagement platforms were often experimenting with unconventional approaches, perhaps in pursuit of uniqueness. However, these efforts frequently resulted in a plethora of usability issues rather than innovative designs.

Recognising the potential in taking a different approach, one more closely aligned with Jacobs’ Law, I decided to prioritise familiarity in redesigning Deedmob's search user journey. To inform this process, I embarked on a benchmarking exercise, seeking to identify and analyse the standards, best practices, and common design patterns used by job boards to guide users through the search experience.

Competitive review working file snapshot
Snapshot from the competitive review working file

Completing the review left me with several ideas on how to incorporate certain patterns utilised by job boards into the Deedmob design. I was confident that if done so effectively, it would not only greatly improve the search and filter experience but also provide Deedmob a competitive edge in the market space.

workflow analysis

Reducing the steps in a convoluted journey

A key takeaway from the comparative analysis and benchmarking exercises was that many of the sites ensured that the fundamental task, of being able to search for volunteer/job opportunities, was displayed prominently as soon as a user landed on the homepage.

Within the current design on the Get InVOLved Norfolk site, the steps a user is required to go through to reach the search feature after landing on the site felt unnecessarily longwinded, with a lack of visibility and ambiguous terminology also not helping.

It seemed like a logical decision to address this issue by following the established pattern used by a number of credible sites and elevate the search feature to the homepage.

Current task flow
Current primary task flow
Task flow redesign
Redesigned primary task flow

USER TESTING

Validating design choices through user feedback

I had been conscious throughout the design process that, although there were notable similarities between Simply Connect and Deedmob as volunteer engagement platforms, it was paramount to gather user feedback on my suggested enhancements of the Deedmob search and filter experience.

It was now, at this juncture, that I felt it would be most advantageous to conduct user testing. Having addressed the usability flaws in the current design by applying learnings and insights gathered from VCH users, as well as adhering to usability principles and established design patterns, I hoped that the upcoming round of testing would focus on validating the design choices made and allow for fine-tuning rather than extensive changes.

Mid-fidelity wireframes of the homepage and search page with annotations indicating areas where users provided feedback on the design.
Example 1 - User feedback collected from test sessions
Mid-fidelity wireframes of the role description page with annotations indicating areas where users provided feedback on the design.
Example 2 - User feedback collected from test sessions

final designs

Making opportunities ‘radically easier to discover’ for VCH users

The concept of anything ‘radical’ in a design is always likely to cause some form of friction for particular user groups. Considering both the task at hand and the diverse VCH user group, the objective of creating ‘familiar ease’ within the experience felt like a more rational approach to apply when making design decisions.

The redesign therefore aims to offer users an experience that guides them to potential opportunities of interest in a quick, straightforward, yet still engaging, manner.

Homepage

Current homepage design with annotations
Before
High fidelity wireframe of homepage with annotations highlighting where improvements have been applied.
After

Search and search results

Mobile screen of current search page highlighting usability flaws.
Before
Mobile screens of redesigned search pages highlighting where improvements have been made.
After - Screenshot collection #1
Mobile screen of redesigned search results page highlighting where improvements have been made.
After - Screenshot #2

Filters

Current filter experience with annotations. Collection number 1.
Before - Screenshot collection #1
Current filter experience with annotations. Collection number 2.
Before - Screenshot collection #2
Current filter experience with annotations. Collection number 3.
Before - Screenshot collection #3
Mobile screen highlighting where improvements have been made to the design when filters have been applied to a search.
After - Screenshot #1
Mobile screen of the redesigned filter overlay.
After - Screenshot #2
Mobile screen of the redesigned filters, showcasing the 'activity' and 'days and times' filters.
After - Screenshot collection #3

Role description page

Current role description page with annotations. Collection number 1.
Before - Screenshot collection #1
Current role description page with annotations. Collection number 2.
Before - Screenshot #2
Current role description page with annotations. Collection number 3.
Before - Screenshot #3
Mobile screen of the redesigned role description page with annotations highlighting where improvements have been made.
After - Screenshot #1
Two mobile screens of the redesigned role description page with annotations highlighting where improvements have been made.
After - Screenshot collection #2

The end? For now...

This project was undertaken to showcase to the client, VCH, how the search and filter experience on an enhanced volunteer engagement could perform, based on the needs and wants of its customers.

They are now in the process of reviewing their numerous options regarding volunteer engagement platform providers but are now better equipped with an understanding of how a platform could look and feel which meets their volunteer users expectations.  

As they move forward, my hope is that they can refer back to the work done in this project, as well as the VCH-Simply Connect user research project, to ensure that their chosen provider integrates as many of the user-centric principles and design solutions identified and explored within the two projects.

What would I do next given the opportunity?

The short answer is further testing. I’d of course wish to validate the design and make iterations based on the feedback received from users. I hope this is something which will be possible in the near future, so do check back to see if the page has been updated. 

Following the validation of the mobile design, I would then look at adapting and scaling up the designs to larger screens, before, in an ideal world, testing these designs and iterating further.  

After that, taking on the task of redesigning the wider platform would be an interesting challenge.

Reflections and lessons learned

Completing this project definitely reinforced my appreciation of Jacob’s Law and the approach it encourages in creating designs which prioritise familiarity and usability over innovation for the sake of uniqueness. I feel Deedmob, and its diverse user groups, could benefit greatly from a simplified design which sticks more closely to the principles underpinning this ‘Law’.

I also found real value in conducting the benchmarking exercise with the job board sites. Learning from these well-established companies and the rigorous testing their designs have likely undergone greatly enhanced the redesign and could provide Deedmob with a genuine competitive edge over other providers in the same market space. I feel this holds true even while acknowledging that resources and expertise may limit the inclusion of some of the more complex design solutions included in my redesign. However, even if this were the case, there was much to take away from how these sites applied best practices related to user interaction, information architecture, and visual design.