Online job booking
My IT Capstone project in STI College of Davao. An Online Job Booking Mobile Application that serves as a job portal for both service provider and recruiter. It will help the unreached service providers in finding jobs, and to provide quality booking experience for recruiters in posting job vacancies and searching for their needed workers.
Project overview
Completing the IT Capstone is necessary for graduation. In this project, I served as the UI/UX designer, Front-End/Back-End Developer, and the team leader in a group of 3, as assigned by my professor. We can select any project title or a client-based project, as long as it meets the approval of our panelists and is considered a valuable project for an IT student.
Problem Statement
World Health Organization declared COVID-19 a global pandemic. Businesses were forced to cut off some of their operations or even close their entire business that results in the unemployment of the majority. Searching for either a service provider or recruiter is very important in the middle of this pandemic.
Goal
To develop a functional and reliable cross-platform online mobile application system with enhanced features for the unreached service providers in finding jobs, and a quality booking experience for recruiters.
app research
I researched and tested other online job booking web applications to ensure our product aligns with current trends and industry standards for features and functionality.
Ideate
I began brainstorming and finding ways to make the user experience smooth. I also created a flowchart to visualize the process.
design
The design process involved creating initial wireframes and prototypes, following best practices in Figma and adhering to the correct dimensions for mobile devices.
DEVELOPment
In this process, we utilized Flutter for the front-end and Firebase for the backend, ensuring a sleek user interface and robust data management.
Testing
To enhance the user experience, we rigorously tested the design prototype, actively seeking feedback for an exceptional user experience.
Timeline
With a 6-month project timeline (excluding title proposal and tools approval), we've effectively utilized a Gantt chart to stay on track, seamlessly transitioning through Agile methodology. This approach, from design to development and testing, has been successful, ensuring project milestones are met within our timeframe.
Aug
Sep
Oct
Nov
DEC
JAN
We utilized Figma for UI/UX design, Flutter for cross-platform front-end development targeting iOS and Android due to its speed, and Firebase for the back-end, chosen for its compatibility with Flutter. All tools were managed through VSCode, with Xcode ensuring optimal Flutter performance on iOS. For development collaboration and ticket management, we efficiently utilized Github, while Trello handled task management seamlessly.
VS Code
LOGO AND APP ICON
I designed our logo and app icon with versatility in mind. It includes a main version for the primary background color, a version for dark backgrounds, and one for light backgrounds, ensuring a cohesive and adaptable brand representation.
TYPOGRAPHY AND COLORS
Google Font
Bold
Medium
Regular
#FCD405
#F5B93B
#202020
#000000
#2C2C3C
#A9A6A9
#9497A1
#8E8D8F
User flow
I guided the app's flow to ensure a clear development path. The user flow incorporates essential modules: User Login, Posting and Applying, Hiring, Completing a Task (as Freelancer), and Completing a Task (as Tasker).
Low Fidelity
With the addition of low-fidelity wireframes, I detailed the functionality to improve our presentation for the panelists. This approach ensures a clearer understanding of the user experience focus and allows early identification of potential issues. Providing a comprehensive overview of intended functionalities helps gather valuable feedback, ensuring alignment with our objectives and addressing any issues before advancing to higher-fidelity designs.
FINAL Product
In this project, I'm not just making the app look good (as a UI/UX Designer), but I'm also the one building how the app works (Front-End/Back-End Developer). It's not just about the appearance; I'm also making sure the app does what it's supposed to do in the real world.
Sign UP / Sign in
I've made the design simple for Sign In and Sign Up, using Firebase authentication. This way, users can explore and navigate the product without any hassle of a complex signup process initially. The goal is to provide an easy and user-friendly experience from the start.
Onboarding
To enhance trust, we've implemented an onboarding procedure for every user signing up if they decided to post or accept any job. This step ensures the legitimacy of their credentials, reducing the risk of scams related to their expertise. Our goal is to create a platform where users feel secure and confident in their interactions, fostering a positive and trustworthy environment.
Profile section
The team discussed introducing a hybrid account feature, allowing Taskers to both post and take on jobs based on the user's niche. This versatile approach aims to provide users with a seamless experience, enabling Taskers to engage in various aspects of the platform depending on their preferences and expertise.
Posting Form
For job postings, we offer two types: Fixed Price and Hourly Rate. Taskers can choose their preferred payment condition based on what suits them best. This flexibility allows Taskers to align their payment preferences with the nature of the tasks they are offering.
Messaging
We've made our messaging feature simple to match the nature of labor jobs, which usually involve in-person interactions. To create a relaxed communication environment, we removed the "seen" feature. This approach, supported by real-time updates through Firebase, aims to ease any pressure on Taskers when receiving messages, promoting an open and stress-free communication experience.
Feedback
To assess the capabilities of Freelancers, we utilize feedback. Others can gauge their work through a simple star rating system and accompanying descriptions. This allows for transparent insights into a Freelancer's performance, helping users make informed decisions based on the experiences of others.
Payment Method
For the payment method, our professors approved and recommended a strategy to ensure monetization. They suggest charging a nominal fee of 1 Philippine peso for each posting. During the development phase as students, we opted for PayPal as the transaction method because it was freely available and suited our needs.
Admin PAGE
We have a dashboard that shows Transaction, Users, and Activities. In the Users section, we manually approve new users if they meet our criteria and have provided legitimate identification during onboarding. This helps ensure the security and accuracy of our user verification process.
Mobile Development
In this project, I've gained valuable experience in designing and developing a project from start to finish. I've actively participated in both the design and development phases, adhering to best practices throughout. Our collaborative efforts included the use of Github, enhancing our development experience and ensuring effective teamwork in managing the project's codebase.
more creative works
