Abida Sultana
Kit Leung
Oliver Davies
Albert Szupszynski
![Screenshot 2024-08-16 at 14 18 47](https://private-user-images.githubusercontent.com/154522895/358595029-cae1e49f-9a3f-40da-aa35-7d123d102557.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4MTkzMjgsIm5iZiI6MTczOTgxOTAyOCwicGF0aCI6Ii8xNTQ1MjI4OTUvMzU4NTk1MDI5LWNhZTFlNDlmLTlhM2YtNDBkYS1hYTM1LTdkMTIzZDEwMjU1Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxN1QxOTAzNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hYTFmMTY0NTRlODg5MDVlNjY1M2NiZDU2MzZmNmZkYzY2YjNmNzViYmYzNTEyZmNhZTM3ZmM0YzEwOTQwOGUxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.BTONxjdzNPdWJzwPkmXQTJY1kqeGR4iF-t4tdUPV3qE)
To create a platform to help young people understand the jobs, identify which ones are right for them, and the next step they could take.
Our front-end design for the bot app provides an engaging and intuitive interface to assist students and young people in discovering environmentally healthy career options. The solution features a user-friendly chat experience where the bot asks insightful questions about the user's interests, skills, and preferences. Based on the responses, the bot offers tailored career recommendations, such as roles in data analysis, health and safety coordination, or lab technology. The design aligns with the existing visual identity of our platform, utilizing consistent colors and design elements to ensure a seamless and cohesive user experience. This approach not only helps users find careers that match their personal values and interests but also enhances their interaction with the app through a structured and supportive dialogue.
![Screenshot 2024-08-19 at 13 13 01](https://private-user-images.githubusercontent.com/154522895/359096312-42b8d10d-1d53-45f5-9828-12dca9b8560c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4MTkzMjgsIm5iZiI6MTczOTgxOTAyOCwicGF0aCI6Ii8xNTQ1MjI4OTUvMzU5MDk2MzEyLTQyYjhkMTBkLTFkNTMtNDVmNS05ODI4LTEyZGNhOWI4NTYwYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxN1QxOTAzNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MzlmNzk1MmYwMjNiMjFlYWIxNmE1ZDVkNDEyMTA4OTlhOGFjOTNiYzFhOGNmYWI2ZDU5YjFkZDMxOWI2OWIzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.AHnhaz9lxuG5xo6cCr-BqkdBCuUvt8HK7mdpo3ldCY0)
The following prototype images showcase the design and functionality of our bot app. These visuals are crafted to align closely with the existing page’s color scheme, typography, and overall design aesthetic, ensuring a seamless integration into the current user experience. Each screen is designed to reflect the app's core features and maintain consistency with our established visual identity.
- Next.js - allows severside rendering to have both our mock backend and front together in the same application
- Tailwind CSS
- Supertest - for testing
- Javascript
- Mock backend - Quicker to have a functioning application
- Low fidelity wireframe
- Front end
- QA - Functional test - ensure our mockend is working at intended.
- Open AI - replace the mock backend with real data using given API key
Go to https://next-step-navigators.netlify.app.
Screen.Recording.2024-08-19.at.09.38.08.mov
Once site is running, please got to http://localhost:3000/api/mockbackend.