Charlotte Mae Efren | Pixelmai

— 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, UX/UI 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

Fablab-WIS Basic Use Case 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.