Close
Type at least 1 character to search
Back to top

ReWork

ReWork Website on Different screen sizes

The Project

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.

The Problem

Build a website visually engaging, easy to manage / update and reasonably affordable using WordPress CMS (open source management system).

My Role

Lead UX / UI backend strategist, wireframe UX designer, content organizer, lead UX CSS developer (frontend) and development team manager.

Details

Date: 2020-2021

Website: reworkthebay.org

Visual Design: Yippa

Backend Development: Misterslicing

Understanding the development needs

  • Implement new design
  • Content organization and wireframe production
  • Translate design into development – step by step execution
  • Guide development team to best resources for animation and effects needed, translating frontend functionality into development documentation
  • Responsive functionality, design and development quality assurance and testing before launch

INITIAL WIREFRAMES

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. 

Development Documentation & UI Strategy

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:

  • Grouping custom field groups into fewer amount of modules, to simplify the backend and user experience
  • Suggest expected behavior for animations and already trusted plugins or resources compatible with the project needs
  • Guide developers to content organization on the backend, of what post types, templates and expected pages were needed before launch.

Translate Design to Development Documentation

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.

Refining the design & functionality

  • Accessibility
  • Responsive styles
  • Simplifying field labels when necessary

Final Frontend

CSS adjustments were done until the frontend was working  well on all different devices and screen sizes.

Final Backend

The backend functionalities was built with custom field groups (ACF plugin) + WordPress classic editor.