HDOA, Market Development Branch Website Redesign

Research

• Hosted on the State of Hawaii’s WordPress platform
• Highly templated with little flexibility

MDB’s website resided within the State of Hawaii’s Department of Agriculture website, which in turn, resided within the larger State of Hawaii website hosted on a WordPress platform.

Due to internal permissions restrictions, HDOA’s and MDB’s website was highly templated with little design or UX flexibility. Components like the website header, main NAV, and footer could not be altered and many WordPress site capabilities were not accessible.  

Thus, I had to work within these constraints to try and refresh the look with limited options. 

Strategy

• Prototype pages in Adobe Xd to make proofing/review process easier for stakeholders
• Design with platform constraints in mind
• Use a combination of the default Block Editor and HTML
• Use a card style UI to create a simple, organized, and mobile friendly layout/aesthetic
• Don’t deviate too far from identity and UI of other HDOA webpages
• ADA compliant

In order to make the process of building out the site in WordPress easier, I first prototyped the pages in Adobe Xd to get a better idea of the visual design. These interactive prototypes also made the review process for my stakeholders easier by providing them with a more tangible proof. Changes could be easily made and tracked within the review link. 

While designing the prototypes, I kept all the web constraints in mind, sticking to a simple card style UI that would allow for an organized layout that would also be mobile friendly. 

Being aware that MDB’s site was a part of a larger HDOA site identity, while the goal was to refresh the look and UX of the MDB site, I did not want to deviate too far from the rest of the HDOA website. 

Solution/Result

By using the default WordPress Block Editor, I was able to implement most of the elements I created in my prototypes. The old webpages primarily used a single column layout, so with the Block Editor I was able to create two and three column layouts for varying content. A seemingly simple change helped to make the pages more interesting and establish a better hierarchy of information.

For anything that the Block Editor was unable to achieve, I implement HTML manually via the WordPress Classic editor to refine the design, or add legacy components (CTA buttons, divider lines) to help maintain a consistent look across the entire HDOA website. 

Changes to the column layouts, along with updating to a card style UI, vastly enhanced the mobile experience and by sticking to ADA compliance regarding contrast, I was to implement more colors while still keeping the key information readable.