The Hokulea website was a designed by the lead UI Designer in Adobe XD and the website build was done using WordPress with a custom-built theme.
This was a unique project because the Hokulea website already had a main theme the client wanted to continue to use, but to have a new design for a specific project that Hokulea was conducting. The main challenge of this website was to have two different designs on the website, but to share the same website content. The idea was to have the new design only appear on the new project and keep the rest of the main site the same. The solution to solve this situation was to build a subtheme for the new design for the new Hokulea project. This solution will allow the subtheme to work as a stand-alone theme, where the website is now able to have a different style without conflicting with the main theme.
The Hokulea website was built using a custom backend to build the pages using the plugins Advanced Custom Fields plugin. I used the Advanced Custom Fields tool to create reusable field groups to build the content and page layouts. The website design was all custom coded using WordPress functions, hooks, custom post types, PHP, CSS, and JavaScript. The custom CSS is built by using SASS where the code is compiled and minified to plain CSS and the custom JavaScript code is also complied and minified using task runners and NPM.
The Hokulea website initial design phase was done by the lead UI Designer and the project manager. After the initial design phase was complete, I was then tasked to begin building the website. With the Hokuela website, I introduced a tool called Milanote (link to view readable Milanote board) to bring a new way to collaborate on the project and to help with the project management and expectations. Along with using Milanote, I’ve also introduced another tool to work with the team and implemented a tool called Markup to have the Designers and project managers to revise and audit the website after a live development version is live. This allows anyone to comment on a live demo of the website to provide feedback to make adjustments before the website goes live.
