Online Order App
Client
Jumpstart
Overview
When I joined Glair, one of the first projects assigned to me was to revamp Jumpstart’s online ordering system. The existing Progressive Web Apps (PWAs) were technically adequate but failed to resonate with users, resulting in confusion and low engagement. The original goal of making the app simplify ordering had become difficult to achieve. Therefore, Jumpstart initiated the redesign of this PWA with their concept in hand.
Strategizing the Redesign
My initial step upon joining the project was to familiarize myself with the existing system that had already been launched. The system consisted of an app in the form of a Progressive Web App (PWA), which was utilized to leverage cross-platform capabilities, and backoffice examined how its components were connected.
Armed with this knowledge, I revisited the concepts provided by the client to ensure alignment with their needs and the overarching project goals. The main objective was to simplify the user journey from the landing page to checkout, enhancing the intuitiveness of the process.
Fig 1.0 PWA & Backoffice
Collaboration and Implementation
Then I transformed these revised concepts into deliverable designs, focusing on elements like sizing, spacing, responsiveness of the PWA, and the use of appropriate fonts and typography.
During this process, collaboration with the engineering team was crucial. We initiated the creation of reusable components that could be utilized for future projects. This initiative resulted in a design system that was beneficial not only for the engineers but also for me as a designer. We began with frameworks like Bootstrap, using it as a reference for component names, behavior, and shapes, then adjusted them based on Jumpstart's branding.
I provided a comprehensive design style guide as a base for the engineers and a design system for the components that would be used in the design. I maintained close coordination with the engineers to address and resolve any undefined components or discrepancies that arose. Throughout the development process, I ensured continuous collaboration with the engineers to handle any issues promptly.
Fig 2.0 Design System
Fig 2.1 Design Delivery
Fig 2.2 Design Preview