The California Immigrant Policy Center (CIPC) – statewide immigrant rights organization website – frontend and backend – redesign, content organization and migration using WordPress (open source content management system).
Outdated design (look and feel), heavy database (page load, amount of plugins), complicated backend, client was not able to update.
Lead UX / UI backend strategist, content / migration organizer, UX CSS developer (QA phase – responsive styles), UX development team manager, UX / UI backend training material designer and lead training instructor.
The backend user research was done by collecting feedback from staff members from CIPC that were involved with updating the website. And testing the backend ourselves. Since I was responsible for updating their website even before we moved through this redesign process, I already had experienced several of the issues and pain points mentioned by client. The main assumption here was the backend being too complicated and outdated / showing several issues that was discouraging client to even try to update the website themselves. We also performed an interview with 2 staff members to collect more information about the frontend issues which was clarified and revealed the causes for the issues to be happening only for them (staff), who were working with predefined settings like dark mode on their laptops.
The main goal of a new sitemap was to review the current website, the amount of pages a type of content on the backend (static / dynamic) trying to offer a better organization and optimization of content.
Content element descriptions were added to each page to simplify information and clarify priorities to design team.
WPBakery page builder backend editor with a minimal visual connection of how it looks on the site. Actions with small icons and no labels are a bit hard to figure out for beginner’s user.
The frontend editor – easy to understand visually but hard to move elements around – buggy drag and drop functionality. So required users to move back and forth between two editors.
Backend editor with visual (preview) and edit options available on the same interface. We achieved a simplified backend design and usability by using WP block editor and building custom field groups to address specific needs of layout and design.
Improved functionality – WP built-in drag and drop and arrows to move elements up and down, making it easy for users to modify content on the same interface.
1) Removing unnecessary elements – custom CSS tab was initially designed but after usability testing with users, we realized it was not necessary neither something they would know how to use.
2) Simplifying labels – For better understanding of fields, we simplified and changed some labels.
3) Modifying field types – overlay was changed to options with language easy to understand instead of having a field requiring code knowledge to fill it up.
After final CSS adjustments the frontend was also working well on all different devices and screen sizes.
After final CSS adjustments The UI backend was working well on all different devices and screen sizes.
– Website tutorial guide (26 Slides) – with detailed steps and information about every area of UI backend.
– 6 Video tutorials – with basic steps of how to update key areas of the site.
– Final training live online meeting walking users through steps on the backend and answering questions.