CIPC
The Project
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).
The Problem
Outdated design (look and feel), heavy database (page load, amount of plugins), complicated backend, client was not able to update.
My Role
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.
Details
Understanding the development needs
- Implement new design
- Content organization
- Improve performance (page load time)
- Reduce database (optimize, compact content + plugins)
- Simplify backend for client
- Fix design issues on frontend
- Responsive functionality
Backend User research
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.
Persona 1: Lisa
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.
Persona 2: Natalie
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.
Pain Points
1
Responsive Design, Dark Mode
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.
2
Organization of Content
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.
3
Manage Website Backend
The backend was outdated and complicated, cluttered, not visually easy so client was not able to update the site themselves.
4
Errors & Speed
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.
Digital Sitemap & Content Strategy
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.
- Staff (pages) – move to post type
- Events (pages) – move to post type
- Allowing posts to use blocks with full-width layout/design
Simplifying Page Structure
Content element descriptions were added to each page to simplify information and clarify priorities to design team.
Refining the design & functionality
- Accessibility
- Responsive styles
- Visual backend options
- Simplify field labels to user’s language
- Easy functionality of moving elements around the pages/posts
UI functionality Findings
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.
UI functionality Solutions
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.
UI Usability refinements
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.
Final Frontend
After final CSS adjustments the frontend was also working well on all different devices and screen sizes.
Final Backend
After final CSS adjustments The UI backend was working well on all different devices and screen sizes.
UI User Training Materials
– 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.
