My low-fidelity prototype was a simple sketch of the Community Resource Hub website. It focused on the layout, navigation, and overall user experience instead of colors or detailed design. The goal was to test whether users could easily move through the website and quickly find community resources.
The low-fidelity prototype allowed me to organize the website's structure, test the navigation flow, and make changes before developing the fully functional version. Creating this prototype helped me identify improvements early and ensured the final design was simple, organized, and easy to use.
| Screen | User Sees | User Action | Corresponding Function |
|---|---|---|---|
| Screen 1: Home | Welcome message, navigation menu, search bar, and featured community resources. | The user enters a keyword in the search bar or selects a category from the navigation menu. | searchResources() searches for matching resources, and showScreen() displays the selected section. |
| Screen 2: Resource Category | A list of available resources for Food, Housing, Healthcare, Education, or Jobs. | The user clicks a Learn More button to view additional information. | showDetails() displays information such as services, hours, eligibility, and contact information. |
| Screen 3: AI Resource Assistant | An AI chatbox where users can ask questions about available community resources. | The user types a question and clicks the Send button. | sendMessage() analyzes the user's question and provides helpful recommendations. |
| Screen 4: Contact | A contact form for users to request additional assistance or provide feedback. | The user completes the form and submits it. | submitContactForm() validates the information and submits the user's request. |
Project Link: Paste your Codecraft Works Web Studio project link here.
I built a prototype called Community Resource Hub, a website that helps low-income individuals and families find reliable community resources in one place. The prototype includes eight interactive screens: Home, Food, Housing, Healthcare, Education, Jobs, Contact, and an AI Resource Assistant. The website's core functionality includes a navigation menu, a keyword search bar, "Learn More" buttons that display additional resource information, and an AI assistant that helps users locate services based on their needs.
One of the biggest challenges I faced was getting the HTML, CSS, and JavaScript to work together correctly. I initially designed the website using separate pages, but later changed it to use multiple screens on a single page, which required updating the navigation and JavaScript functions. I tested each feature, corrected element IDs, and fixed navigation issues until every screen displayed properly. This project helped me better understand how HTML, CSS, and JavaScript work together to create an interactive website.
Throughout development, I continuously improved my prototype by testing different layouts and features. I redesigned the homepage, improved the navigation, expanded the search feature, added "Learn More" sections, and included an AI Resource Assistant to make the website more useful. I also refined the overall design with a modern color scheme and better organization. Each revision made the website easier to navigate and more effective at helping users quickly find community resources.
The core function of my Community Resource Hub prototype is to help users quickly find community resources based on their needs. When a user enters a keyword such as "food," "housing," "healthcare," "education," or "jobs" into the search bar, the function analyzes the input, identifies the appropriate category, and displays the most relevant resources. This feature is the foundation of the website because it allows users to access important services quickly and efficiently. In the future, AI could enhance this function by understanding natural language questions and providing personalized recommendations based on the user's specific situation.
| Key Feature | Corresponding Function |
|---|---|
| Navigation Menu | showScreen(screenId): Displays the selected section of the website when the user clicks Home, Food, Housing, Healthcare, Education, Jobs, or Contact. |
| Search Bar | searchResources(): Searches for community resources based on the keywords entered by the user and displays the most relevant results. |
| Food Resources | displayFoodResources(): Shows available food banks, meal programs, and food assistance services. |
| Housing Resources | displayHousingResources(): Displays affordable housing programs, shelters, and rental assistance resources. |
| Healthcare Resources | displayHealthcareResources(): Lists free clinics, healthcare providers, and medical assistance programs. |
| Education Resources | displayEducationResources(): Shows tutoring programs, scholarships, schools, and educational support services. |
| Job Resources | displayJobResources(): Displays job openings, career training, and employment assistance opportunities. |
| Learn More Buttons | showDetails(resourceId): Opens additional information about the selected resource, including services, hours, contact information, and eligibility requirements. |
| AI Resource Assistant | sendMessage(): Processes the user's question and provides helpful recommendations for community resources based on their needs. |
| Contact Form | submitContactForm(): Validates the user's information and submits their message or request for assistance. |
Create a JavaScript file for my Community Resource Hub website. The JavaScript should allow users to navigate between the Home, Food, Housing, Healthcare, Education, Jobs, and Contact sections. It should also make the search bar functional by directing users to the correct resource based on keywords. Include "Learn More" buttons that display additional information about each resource and create a simple AI Resource Assistant that responds to user questions about food, housing, healthcare, education, and jobs. Use comments throughout the code to explain what each function does.
Navigation Function
function showScreen(screenId) {
Hide all sections
Display the selected section
}
Search Function
function searchResources() {
Read the user's search input
Match keywords such as food, housing,
healthcare, education, or jobs
Display the matching resources
}
Learn More Function
function showDetails(resource) {
Display additional information
about the selected resource
}
AI Resource Assistant
function sendMessage() {
Read the user's question
Search for matching keywords
Return helpful recommendations
}
The JavaScript did not work perfectly on the first try. I had to troubleshoot the code by connecting the HTML elements with the correct IDs, linking the external script.js file, and updating the navigation so it displayed the correct sections of the webpage. After making these changes, the navigation, search bar, and AI assistant functioned as expected.