POP 2017

UI/UX Design  |  Responsive  |  Front-end Development

POP 2017

UI/UX Design  |  Responsive  |  Front-end Development

Project BrieF 
POP is a software as a service (SaaS) that provides users an effective way to create, send, approve, and monitor purchase orders. Its features included advanced user access settings, cash-flow control, extensive reports, and Xero integration. The users must be able to manage their purchase orders anywhere—to provide this feature, the web application was designed to be fully responsive. 
Roles and Responsibilities 
Design Lead, UX/UI Design, Front-end Development, Responsive Web Design
The web application’s overall user experience and interface were designed by me. Tasks for this project included the creation of low and high-fidelity wireframes and detailed designs. The web application had to be fully responsive. Additional screens had to be designed to provide the seamless experience of using the features in different devices. The web application was checked in multiple devices (desktop, tablet, and phones) and web browsers for compatibility and consistency. 
Additionally, coding the front-end prototypes using HTML, CSS, and jQuery was also my responsibility. The project had a tight deadline, so I managed a junior developer to help in the coding of the front-end markups, ensuring the design and coding standards are consistent.  
Finally, I also collaborated with a team of developers implementing the back-end code of the web application. I had to ensure that the flow and transitions when navigating the application is seamless.
Tools and Technologies 
Design: Adobe Photoshop, Adobe Illustrator, Adobe XD
Development: HTML, CSS (Bootstrap), jQuery
App Preview 
The video below provides a quick tour of the features of the POP web application.
These are the front-end markup coded using HTML, CSS, and jQuery. 
 Web Screenshots 
Dashboard with selected purchase order
Dashboard with selected purchase order
Purchase Orders List Page
Purchase Orders List Page
Create Purchase
Create Purchase
Create Supplier
Create Supplier
Create Workflow
Create Workflow
 Mobile Screenshots 
Dashboard
Dashboard
Purchase Orders
Purchase Orders
Suppliers
Suppliers
Settings
Settings
​​​​​​​Have a project in mind?​​​​​​​

Other Works

Back to Top