Mobile mockups- final iteration
DemocracyLab connects skilled tech volunteers to projects on their platform. It also has Groups (for example Code for San Jose) that support projects by providing volunteers. Dlab organizes hackathons and other events to solve problems and brings people together.
Group leaders expressed the need to have a 'find projects' search and filter function on their page on DLab
Currently, the number of projects aren't too many but the groups expect to support more projects in the future and volunteers should be able to search for projects based on various criteria like skills, causes, etc
I was the UX Designer for this design task and I worked with the Executive Director and developers to create mockups, various options, and the final solution.
"There is currently no way to search or filter projects on Group pages, the way we do on the Find Projects page. This functionality will be desirable as Groups add more projects. The design used on the Find Projects page appears to be overkill on the Group pages."
My design process
A design brief was given to me. I asked the team, questions about the requirements, timeline, and other constraints. I met with 4 users in a focus group to test out existing filters on the site. After sketching ideas, I created mockups to discuss the design options with the team.
•Existing project information is placed in three sections of the page which is a bit of a visual disconnect.
•Project Info spills into project card area.
Layout of existing filters on another page on the platform - do I need to keep my design consistent with that design?- this was one of the questions for stakeholders.
Filters elsewhere on site
Elsewhere on the site were filters and search function which looked like this and worked well for that page.
However the split layout didn't necessarily need to be followed was a response I got from stakeholders and developers. That was not a constraint at all.
Research via Focus group to gather requirements
To explore what the users had to say I conducted a focus group with 4 volunteers over a phone call while they explored the existing filters page.
I was curious about the split layout, which is seen in a lot of websites today. Plenty of ecommerce websites have filter categories to the left and search to the top right of the page.
The layout did not follow Gestalt principles.
The main insights I got from the interview were that the split layout was alright but a better design option would be welcome. The filter categories are great and serve the purpose very well for the other page, however, it could be an "overkill" for the Groups page. This was in line with what the Group owners & other stakeholders suggested.
I sketched ideas based on which I created mockups to present to the team.
Mockups Iteration 1
During our weekly meetings, I presented my design options to the team, where we brainstormed on solutions. I redesigned the project information section, which now followed the Gestalt principle of proximity and freed up space for the filters and search bar. I had three options as shown here.
Before filters applied:
•Collapsed filters – a compact solution
•Clear filters button in two states
•Project information now in a card
•Orange checkmark instead of a strip of orange
•Orange color does not pass WCAG tests, brand color is being evaluated
After filters are applied:
•Filter selections show in the box
•‘Sort by’ also uses the same orange check box for consistency - This triggered a site-wide change.
What I learned from this project
Success metrics I wanted to track but could not due to lack of resources
Adoption: The number of volunteer sign-ups per project.
Satisfaction: Ratings from satisfaction surveys.
Setting conversion rate goals and tracking them. The number of visitors converted to volunteers.
I learned that teamwork and feedback are key to successful design.
It was great to present my work to the Executive Director/ Product Owner, fellow UX Designers, and Developers to get feedback during brainstorming sessions. I listed all my assumptions and constraints and discussed them with the team, which helped me narrow down a final solution.
By presenting many ideas early on, I was able to facilitate a brainstorming session and understand which ideas worked and which ones didn't and why they didn't work.