The SGPV App, originally developed as a cross-platform B2B tool for tablets, underwent a major re-styling aimed at making it fully responsive and scalable across both tablets and mobile devices
Moving from version 5 to version 6, the app’s redesign allowed it to serve over 15 clients with tailored solutions while reducing the company’s reliance on tablet hardware, thereby cutting costs.

The Problem

The app had been customized extensively for each client, resulting in multiple versions that were difficult to update and manage.
Additionally, the app was built for tablet use, forcing clients to invest in tablets for their workforce. As smartphone usage grew, the app’s lack of mobile responsiveness became a critical issue, impacting usability and increasing operational costs.

Hypothesis

By re-styling the app to make it fully responsive and scalable, the company could eliminate the need for tablet-only usage, enabling clients to run the app on smartphones. This would provide significant cost savings and operational flexibility. The focus on a centralized design system, primarily targeting the main CSS and icons, would also streamline updates and ensure faster deployment across all clients..

Role & Responsibilities

• User Interface Design: created updated mockups and improved the UI to ensure a smooth and responsive experience on both tablets and smartphones.
• Graphic Design: produced a set of universal icons and images to maintain consistency across client versions while allowing for minor customization where needed.
• Front-End Development: led the front-end re-styling, ensuring the app was fully responsive and scalable for mobile devices.

Technologies

Figma -HTML5 - Bootstrap 4 - CSS3 - JavaScript - PhoneGap

Output

• Scalability: the app was successfully re-styled and deployed across more than 15 clients, with consistent updates possible across all versions with minimal effort.
• Cost Savings: by making the app fully functional on smartphones, clients no longer needed to purchase tablets, resulting in a 20% reduction in hardware costs.
• Development Efficiency: by focusing the re-styling efforts on the main CSS and icon sets, changes made for one client were quickly tested and deployed to others. This streamlined the deployment process, improving efficiency by 80% and effectively bypassing years of legacy code.
• Development Efficiency: by focusing the re-styling efforts on the main CSS and icon sets, changes made for one client were quickly tested and deployed to others. This streamlined the deployment process, improving efficiency by 80% and effectively bypassing years of legacy code.
• Development Speed: centralized design and development allowed for future updates to be implemented 25% faster than before, with minimal disruption to existing clients.
• User Satisfaction: the redesigned, responsive app was better suited to client needs, resulting in a 15% improvement in overall user satisfaction.

This re-styling project not only delivered a scalable and cost-effective solution but also laid the groundwork for the future development of SGPV version 7.