Design
The login screen is where the user can log in to access their personal information such as profile and progress tracker. The login screen has two fields that are required to be able to click on the submit button, the username and password. The submit button will either refresh the page if the username/password is wrong or if everything is fine, it will go to the dashboard. In addition, there are two texts that are buttons that would lead to the forget password and help screen, respectively. Lastly, at the center bottom, is a create account button that would link the user to the create account screen.
The forgot password screen can only be accessed if the user clicks on any button that indicts that they have forgotten their password. The screen simply will ask for the user email and have a fill bar for them. Lastly, a submit button that would submit their information and send them a code to reset the password.
The create account screen is mainly filled with an information prompt for the user. The more unique feature is the hunter vs huntee, the bottom will start out with white background and whichever the user chose will change the background to the website color scheme beige.
Shown above is the dashboard screen for the workHuntr website. The dashboard contains buttons in the center of the screen that allows the user to access current job listings, their inbox, their profile, and their progress for their current projects. The dashboard also contains a description of the workHuntr system and how the system works. There are also two buttons at the top right of the screen that allows the user to access settings and log out of the system.
The current listings screen can be navigated to by clicking its respective button on the dashboard or on the navigation bar at the top. On the current listings screen, a user can view other listings that are in need of help under "Hunted" and bid to work on them. They can also post, modify, and remove projects that they need help with under "Hunting" and view completed projects under "Completed". Under completed projects, a user can "Review" finished projects where they will be taken to the payment screen for the respective project.
The payment screen for a project will be shown after a user moves the progress bar of the respective project to "Finished" and the "Review" button is clicked. Once at the payment screen, the user can navigate to the other screens using the navigation bar on the top or by clicking "Back" to go back to the current listings screen. The user will have multiple payment methods to choose from such as card, PayPal, Apple Pay, and more (like a bank account). This screen will also show previously saved payment methods, and the user can simply click one if they desire and confirm the payment. Once the payment is confirmed, the user will be sent back to the dashboard. Finally, the invoice section shows the details of the project such as its description and a price along with it. This section is to act as a receipt.
The inbox screen can be navigated to by clicking its respective button on the dashboard or on the navigation bar at the top. On the inbox screen, a user can navigate to the other screens using the navigation bar on the top, search for messages by contact name or message, see their previous conversations, and begin new messages by inputting their text in the text field and pressing Enter. If the user searches for a contact that they have not previously messaged, the search feature will find the desired person's contact info and begin a new conversation with them.
The progress tracker screen can be navigated to by clicking "Progress Tracker" on the navigation bar at the top. On the progress tracker screen, a user can navigate to the other screen using the navigation bar on the top and can view a large progress bar with defined milestones for projects that they have posted or are working on. If the user is working on the project, they can log their progress at the bottom of the screen where their employer can see it on their end. If the user wants to see the progress on different projects, they can click the project's title and a drop-down will appear allowing them to switch to different projects.
Shown above is the profile screen for the workHuntr website. The profile is where all the information about the users is stored. It is linked via the top bar and the dashboard. Under the profile picture and the name, there is an option to tag yourself with specific skills or traits you want to make sure everyone who looks at your profile will see. While this website isn't just for computer science / related jobs, you can tag just about anything related to your job. Below the tags is a brief demographic overview so potential employers can easily see things like your age, current work, and the highest level of education. In the top right there is an option to set your profile to public, where everyone can see, or private, where only you will be able to see your profile. Below that is the button you can click in order to edit your profile. Your resume can be accessed via a button/link and so can any work samples you choose to upload. Below the work samples is a chance for you to outline your full work history. This can differ from your resume since you are worried about keeping a resume a specific length. Finally, below the work history, you get a 0-5 workHuntr rating from prior employers. You can choose to allow prior employers to submit ratings of your performance.
Shown above is the edit profile screen reached by clicking on the edit profile button on the profile screen. On this page you are able to edit your demographic info, tags, profile picture, and your work history. As you move your mouse on the screen, if you hover over something editable, it will highlight green, allowing you to click on it. Once clicked on, it opens a dialogue box allowing you to type in new information (shown with the location in the demographic info). anything that isn't clickable, like the buttons for viewing a resume, are greyed out. the nav bar options are also gone, replaced by a save changes and a cancel button, allowing you to save or discard any changes. for editing the profile picture, it would also highlight, and open your file explorer for you to select a new image file.
- Background: White
- Accents: Blue (#8fbdc7) and Beige (#e3d6ab)
- Text: Black
Add a "Triple Bar" icon to each page where the user can navigate to different pages
- Login (Angel)
- Username/password fields
- Logo/color scheme
- Create account
- Forgot password
- Create Account (Angel)
- Hunter vs huntee
- Name
- Birthdate
- Company
- Title
- Sex
- Email/password
- Username
- Forgot Password (Angel)
- Ask for email
- Submit button
- Dashboard Links to: (Justin)
- Profile
- Current Jobs
- Progress Tracker
- Inbox (for the messaging system)
- Profile (Re)
- Profile picture
- Resume
- Demographic Information
- Skills (tags like Python, Django, etc.)
- Rating - show comments here
- Work history
- Work samples if applicable
- Set profile to private feature
- Current Jobs (Timothy)
- Search feature
- List of jobs - requirements/type/etc.
- Rating of poster/bidders - out of 5 stars and if clicked on links to their profile showing comments from previous jobs
- Scroll to top button
- Configure button
- Filter button
- Progress Tracker (Timothy)
- Lists different projects you are working on/have someone working on
- Each has a visual progress bar (set milestones like in preplanning, design, development, testing, etc.)
- Inbox (Noah)
- Typical inbox
- List as different conversations with different people
- Show contact info of person/latest message
- Payment (Noah)
- Card information
- Price
- Information on the project