Wi0 2009

UI/UX Design  |  Full Stack Development  |  Ruby

Project BrieF 
WIO is the abbreviated form of “Web-based Interactive Organizer with Mobile Support,” built using the Ramaze, a lightweight Ruby Web Framework, Datamapper ORM, and Gnokii. 
The main features of the WIO are file sharing, online task management, user connectivity and collaboration, and SMS connectivity. WIO's project and task management features were modeled from the work-life management system developed by David Allen's Getting Things Done® (GTD®).
This web application was my thesis and submitted for the fulfillment of my bachelor’s degree program and garnered the Best Thesis Award in my graduating batch during the commencement exercises. 
Roles and Responsibilities 
Full Stack Development, UI/UX Design, Unit Testing 
First, I had to conceptualize and design the system's architecture. I created low fidelity wireframes to guide me during the application's development stage. A local development environment was set up using an Ubuntu operating system and Apache webserver. Then, I built the web application using Ramaze (Ruby), MySQL using DataMapper ORM, HTML, CSS, and jQuery. For the SMS connectivity, Gnokii was the software used to access and send messages from a Nokia 3310 cellphone. 
Lastly, unit tests were conducted per use case of the web application.
Tools and Technologies 
Design: Adobe Photoshop, Adobe Illustrator
Development: HTML, CSS, jQuery, Ruby (Ramaze), MySQL with Datamapper ORM, Gnokii
SYSTEM ARCHITECTURE
WIO Basic Use Case Diagram
WIO Basic Use Case Diagram
One of WIO's Sequence Diagram - for the SMS feature
One of WIO's Sequence Diagram - for the SMS feature
Entity Relationship Diagram
Entity Relationship Diagram
Dashboard 
 Application Screenshots 
​​​​​​​Have a project in mind?​​​​​​​

Other Works

Back to Top