-
Our idea- We were inspired by making a place where people, specifically college students and younger generations, can easily start urban gardening and access all the necessary resources- Saw a lack of fresh produce (fruits/veggies) available at UCSD
- Limited selection of gardening website targeted at younger generations and beginners
-
Our product- A website where beginners can start Urban Gardening- Learn about necessary tools and resources to start gardening plus where to buy them
- Watch tutorials to grow different houseplants, fruits, vegetables, and beginner friendly plants
- Connect with on campus gardens to learn more about gardening
-
Roles:
- Shamita -
Mentor - Cecilia -
Frontend Develepor - Danny -
Frontend Develepor - Sean -
Full-stack Develepor - Kathy -
Full-stack Develepor
- Shamita -
- Beginner Tutorials → implemented
- Seeds and tools information (what / where to buy) → implemented
- FAQ Section → implemented
- Contact form → implemented
- On campus garden list → implemented
- Interactive Map → could not implement
- Forum Page → could not implement
- Web Scraper → could not implement
1. Inspiration
- We chose neutral, earthy colors and a simple UI design to contrast the bright and maximalist aesthetic of many existing gardening websites. Our goal was to create a more modern look that would appeal to college students and younger audiences.
2. Sketching process/Wireframing
- We drew inspiration from various university organization and club websites, such as DS3 at UCSD and Design at Berkeley, to achieve a minimal and clean aesthetic that appeals to college students. We sketched out two interface designs that incorporated commonly seen features, like contact forms and FAQ sections, as well as features we specifically wanted to include, such as beginner tutorials.
3. Protoyping/lo-fis
- With only minor adjustments, nearly all the features from our low-fidelity designs were carried over into our high-fidelity prototypes. At this stage, our goals felt realistic and achievable, and we were confident in our ability to implement everything we had outlined.
4. Final Designs/hi-fis
- These are the final designs we chose to implement for our app. We were able to implement every featurem, with only minor changes such as adjustments to image choice.
- Learning phase -> Learning tech stack and code syntax by reviewing mentor provided notes, watching tutorials, and online research
- Meetings -> Outline weekly goals (pages, features, etc.) and delegate tasks
- Features -> Each person worked on different features and pushed code to their branch
- Figma
- Vite React
- ExpressJS
- Node.js
- MongoDB
- HTML
- CSS
- Javascript
- Creating manageable goals for the given timeframe
- Balancing our classes
- Figuring out backend
- Implementing necessary packages
- Experiment with web scraper
- Work more with backend
- Develop CSS conventions across project