Fablab-WIS

Agile Project Management | Full Stack Development | UI/UX Design

Fablab-WIS

Agile Project Management | Full Stack Development | UI/UX Design

Project BrieF 
Fablab-WIS is a bespoke web information system developed for the Fabrication Laboratory in the University of the Philippines Cebu. User-Centered Design methodologies were performed during the project with special focus on the planning, design, and testing stages. 
The main features of the web application are invoicing and billing, customer profiling, project management, equipment management, and reports generation. As the sole developer of this project, the whole development process lasted for six weeks.
Roles and Responsibilities 
Agile Project Management, Full Stack Development, UI/UX Design, User Tests, Security Tests 
Client collaboration was paramount during this project—Google Design Sprint (GDS), an agile development approach, was used to provide an organized workflow for the management of the project. First, I conducted client interviews, then to get more in-depth information, I led and facilitated the meetings, especially during GDS' unpack, sketch, and decide phases. 
I developed the web application using Laravel (PHP), MySQL, HTML, CSS (Bootstrap), jQuery, and Ajax. User tests were performed per finished project feature milestone. When all the features were completed, tests were conducted to non-users (beta testers).  Penetration tests were also conducted on the web application.
The user tests results showed that Fablab-WIS is highly usable and easy to use application. Both the actual users and beta testers had high intentions of using the web application. 
Lastly, the maintenance of the web application and server and the initial training the actual users are also part of my responsibilities. 
Tools and Technologies 
Design: Adobe Photoshop, Adobe Illustrator, Adobe XD
Development: HTML, CSS (Bootstrap), jQuery, Ajax, PHP (Laravel), MySQL, OWASP ZAP
 Agile Project MAnagement 
Google Design Sprint was used in this study, it is an agile approach developed by Google in 2010 to turn the design process agile, a collaborative team effort, and solve business problems. 
Photos during the GDS Unpack, Sketch, and Decide Phases

Methodology & System Architecture 
Research Methodology
Research Methodology
Fablab-WIS Basic Use Case Diagram
Fablab-WIS Basic Use Case Diagram
Entity Relationship Diagram
Entity Relationship Diagram
App Preview 
Here's a short video tour of the main features of Fablab-WIS. An invoice and official bill will be created to demonstrate the UI/UX design and technical capabilities of the web application. 
 aPPlication Screenshots 
Login
Login
Initial Dashboard
Initial Dashboard
Client Details Page
Client Details Page
Invoice List Page
Invoice List Page
Invoice Details Page
Invoice Details Page
Create Invoice Page
Create Invoice Page
View Project Page
View Project Page
App Settings Page
App Settings Page
System Generated Invoice Print View
System Generated Invoice Print View
Official Bill Print View Official Bill Print View
Official Bill Print View Official Bill Print View
​​​​​​​Have a project in mind?​​​​​​​

Other Works

Back to Top