Answers4Families

Website Redesign

Brief Description

There were many past attempts to redesign this website by previous developers but each attempt had not been successful. Aside from dated design and many other issues, the old website was also built using Drupal 6 which exposes numerous security risks . With my expertise and determination, I was able to work closely with the client through open communication and was able complete the design and development of this website. This website is built in Drupal 7 and is still in the works in terms of content. However, development of theme, Drupal scaffolding and feature building has been completed.
Visit website View repo

Client

Answers4Families

Role

Team lead, Content consultant, Designer, Developer

Technology Used

  • Drupal 7
  • JavaScript
  • SCSS
  • HTML
  • Bootstrap
item.left_alt_tag ||
A screenshot of the old website
A screenshot of the new website
A screenshot of the new website

The Process Taken

I led conversations in the redesign effort within the team to redefine the purpose and audience of the website based on user forums done and feedback from users. I created mockups using Adobe XD.

Then, I reorganized the information architecture and designed the website based on UX best practices. I created subtheme based on the Radix starter theme. On the SCSS end, I utilized the BEMIT methodology. Utilized interpolation mixin for variable font sizes depending on a min and max screen widths to improve font readability especially for larger and wider screens. Utilize custom function mixins for generating dynamic values based on arguments such as creating different shades and colors for links, buttons, and box component based off on theme color variable.

I also installed necessary Drupal 7 modules and configured them while setting up various content types and dynamic views to populate the site.

Key features

  • Set up taxonomy feature to tag content into categories
  • Create views that will dynamically show content filtered contextually by their taxonomy tags
  • Create panels modules to template layout and content of taxonomy pages
  • Installed paragraphs module to help content editors easily add content
  • Installed and configure the responsive images module with different breakpoints to automatically generate images of various size for the picture element
Project List