DemocracyLab
What is DemocracyLab?
DemocracyLab is a tech-for-good nonprofit that offers a platform for social entrepreneurs and skilled volunteers to work together on projects that advance the public good.
My Role at DemocracyLab
As one of the first UX writers to join the design team, I’ve had the opportunity to work with newer writers, as well as a number of UX designers, UX researchers, developers, and other members of the design team for regular reviews and feedback sessions. (I also occasionally lead weekly design meetings.)
Select Work
Error Messages
Example below is from two different steps of the project creation flow.
Challenge
Update error messages so users can easily fix any mistakes and move on.
Solution
Move them to contextually relevant locations, change color, and update copy.
How I Helped
Collaborated with research team to review user testing and compile results.
Wrote new copy for messages to be more conversational, while still helping the user fix their error.
Worked with a UX designer who was working on overhauling error messaging across the platform.
Error messages are currently listed as black bullet points at the bottom of the screen. This makes them easy to miss.
The updated error messages are in red and placed below related field.
Clarify Instructions
Example below is from the ‘Add Resources’ step of the project creation flow.
Challenge
Help the user complete their task.
Solution
Ensure that guidance is clear, contextual, and useful.
How I Helped
Collaborated with research team to review user testing and compile results.
Worked with a UX designer to modify the design, allowing for more detailed instructions.
Added https:// placeholder text for fields that require URLs.
Current copy is vague and confused many testers who were unsure what was being requested or how the information would be used.
Despite these fields being optional, users can still trigger an error message if they start to type inside the field and do not add a valid URL. So we felt it was necessary to reassure users that they can skip a field - or an entire section.
While UX writing aims to be concise, this is an example of more text being necessary to help the user complete the task.
Example below is from the ‘Add Volunteer Roles’ of the project creation flow.
Challenge
Help the user prioritize volunteer roles added (if there is more than one role).
Solution
Offer concise, clear instructions.
How I Helped
Worked with UX designer and design team.
Offered copy modifications to scale back text, along with suggestions (adding a tooltip) when information might have been confusing for user.
Modified text to reflect a design change to a related element.
Original copy read:
'Volunteers will see the roles in the listed order below. Drag the roles to rearrange the order. The first 3 skills indexed will appear onto the listed project card. Volunteers will see your project's roles in the order listed below. You can drag and drop the roles to rearrange their order. The first three roles in the list will appear on your project's card. All roles will appear on your project's profile.'
Modified copy reads:
'Volunteers roles will be listed in the order shown below.
Drag each role to rearrange.'
'Volunteers roles will be listed in the order shown below.
Drag each role to rearrange.'
Example below is from the last step of the project creation flow.
Challenge
Help the user complete this process without hesitation or confusion.
Solution
Update copy to reflect what the user could expect when clicking the CTA, as well as the current status of the project.
How I Helped
Collaborated with the research team to review user testing and compile results.
Worked with another UX writer who started this task before leaving DemocracyLab.
Completed the task and reviewed progress with the design and development teams, eventually creating two scenarios: one for creating a project and one for updating an existing project.
The current screen instructs users to click 'PUBLISH' but the project status on the next screen is 'Unpublished'.
Copy needed to reflect the actual process: the project is submitted for review and made active on the site after approved.
- Updated 'PUBLISH' to 'Submit Project' (style guide has been updated to title case for CTA buttons) and changed status of project from 'Unpublished' to 'Under Review'.
Since the same flow is used to edit an existing project, the copy needed to change for that use.
- For this flow, we modified the header copy to 'Ready to save your edits?' and updated 'PUBLISH' to 'Update Project'.
Notification
Example below is from the volunteer approval process.
Challenge
Let user know that they successfully approved a volunteer’s application.
Solution
Provide an easily identifiable visual with a clear message.
How I Helped
Collaborated with the research team to review user testing and compile results.
Worked with a UX designer to review notification design options.
Wrote copy for notification.
Helping with usability testing for color and placement of notification.
Currently, there is no notification that a volunteer has been approved (or rejected). The project owner would only see the volunteer's name added to the 'Team' section
on the project's profile page.
- The header is a concise confirmation of the action.
- The body copy shares the details of where to find the newly approved volunteer.
Destructive Modal
Example below is from the volunteer application process.
Challenge
Inform users that they could lose their progress.
Solution
Use clear language in the modal and for CTA buttons.
How I Helped
Collaborated with UX designers on the entire flow of the updated volunteer application.
Spoke with developers about different use cases and when data could be lost.
Presented copy options to design team and incorporated feedback into final designs.
