Hawaiʻi
Hub 1.0
July - Aug 2022 | Web Design & Coding
Created during the Creative Code Collective Summer Lab Fellowship, Hawaiʻi Hub 1.0 is a prototype project created to envision a platform that houses educational and community building resources for the people of Hawaiʻi. The platform is designed so visitors can both discover and contribute resources to the hub.
This prototype was built off the resource list created by Kylie Akiona
& Natalie Borsky !
The Story
With my years in activism in Hawaiʻi, I observed how local youth often struggle to get involved in local activism. There are plenty of resources and involvement opportunities around island, yet why does this barrier exist? This question sparked an idea to create a centralized platform to make navigating Hawaii-based activist and educational resources easier.
The project is currently a "prototype" as many bugs and glitches still have to be fixed !
Process
Screenshot of my FIGMA planning board ! Explore HERE !
The Process
As I have never worked with data base related web platforms, a lot of my pre-production work came with research and understanding how data from Google Sheets can be transferred into HTML & CSS via Javascript.
In terms of design & layout, I explored ways to best group information and how the layout of information directs the possibilities with this platform. For instance, grouping resources based on "resource type" versus "topic" and how to best represent these ideas. This design-thinking was also applied to the creation of the Contribution Google Form where anyone can submit a resource to the hub.
Design Breakdown
Using Javascript, the Google Sheet that houses the list of resources is converted to be displayed as "resource cards" on the website. The "Contributors Wall" button on the top left takes visitors to a page where all contributors to the hub are listed in bubbles. Meanwhile, the "Contribute" button leads to a Google Form where visitors can also contribute to the hub. This Google Form is directly linked with the data displayed on the site, hence any entered information will be immediately uploaded to both the home page and contributors wall page.
Each "resource card" includes resource title, author, short bio and tags of what issue the resource relates to. These interactive cards flip on hover, which then allow the user to view a brief bio of the resource & access the website or resource via hyperlink. The resource cards are also automatically color-coded based on the "type" of resource: movie, grassroots orgs, books, infographics and etc.
Resource Cards
From Here...
With projects I usually "dream big." Using my initial intentions of this website, I would love to build a team of local (Hawaiʻi) creatives and coders to further develop the following:
-
Sort & search the resource based on tags (Isotope JS). Additionally provide "recommend" resources to guide audience through various resources.
-
Map out the "location" of each resource card based on "similarity" of topics between resources (Force Directed Graphic - D3)
-
Integrate accessible design to better user experience all individuals (screen reader compatibility)
