ReWork the Bay is a nonprofit organization that envisions an economy centered on the voices, power and needs of working people. They needed a new website with visually engaging frontend and easy, user friendly way to update from backend.
Build a website visually engaging, easy to manage / update and reasonably affordable using WordPress CMS (open source management system).
Lead UX / UI backend strategist, wireframe UX designer, content organizer, lead UX CSS developer (frontend) and development team manager.
Based on the project needs, brand identity material, the content provided by client and expected functionality, I was in charge of creating the first version of wireframes.
A detailed documentation of UI backend functionality was developed to make sure expected user experience and usability standards were achieved and easily understood by the development team.
The main goals were:
Examples of development spec information:
Home slider: Fields: title, photo captions, image background (file/link), button label, button url (link). Frontend details: use fade to transition between images. Client should be able to upload slider images without any overlay/gradient finish, both of those effects should be handled with CSS automatically.
Content columns: Full-width or two columns (2 options = [100%] or [50%|50%]). Column fields (repeater): column title, column content (wysiwyg editor + media button), color background (color picker), image background (file), Icon (file), photo caption.
Logo carousel: Single row carousel with multiple images. Main fields: title, content (wysiwyg editor + media button). Repeater fields: logo (image), link (url), name (text). Frontend detail: images will always appear in greyscale and will reveal full color on hover. Mobile behavior will preview only one logo on screen, with ability to drag to change logos.
CSS adjustments were done until the frontend was working well on all different devices and screen sizes.
The backend functionalities was built with custom field groups (ACF plugin) + WordPress classic editor.