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.
Lisa is a staff member that uses company’s laptop with predefined settings such as dark-mode, who needs often to update the organization’s website but doesn’t understand why the pages look different on her computer than her colleagues.
Natalie is a very busy manager that also uses company’s laptop with dark-mode, who needs often to update the organization’s website and doesn’t have time for the website to load super slow. She would like the backend to be easier to understand and manage, without having to update same info on multiple pages.
Website did not look good on some devices or screen sizes. Client was seeing parts of the design completely different (darker background) than our internal team.
To update staff info for example, we had to go to multiple pages to change the exact same information. List of resources had to be manually added to each page and added to resources list.
The backend was outdated and complicated, cluttered, not visually easy so client was not able to update the site themselves.
Outdated plugins were generating errors on the backend, and large amount of content (old website content) was increasing the page load times for most pages and backend.
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.