Rangemaster Custom Web Application Share: Ballyhoo Score Awaiting client review n/a Date Published 14 September 2022 Reading Time 8-Minute Read We built a progressive web application to aid the product selection user experience. Project Overview Rangemaster was looking to develop a modern replacement to their collection of product selection apps across web, tablet and mobile. These apps allow would-be customers to filter and search the Rangemaster catalogue for their ideal range cooker. We proposed creating a Progressive Web Application to showcase the range of cookers. Our app would consolidate the existing suite into a single solution, working seamlessly across varying operating systems and devices. Project Brief The previous product selector application had been developed using a tool for creating animations for the web, which had then been wrapped into iOS and Android apps for mobiles and tablets. Numerous issues arose due to this technology choice: The web application was fairly hefty, mainly due to large images. The web app suffered performance issues on mobile devices. The web application lacked a responsive layout. Updating the product catalogue was laborious, requiring manual editing of a CSV file and injecting this back into each application in turn, and then redeploying the mobile applications to their respective marketplace. The branding did not match current AGA Rangemaster guidelines. Our Proposal Based on these shortcomings and discussions with the client, we identified key requirements for the Rangemaster Product Selector Application, including: The application must be of the same quality AGA Rangemaster puts into their products, and represent their brand correctly. The application must make it easy for AGA Rangemaster to manage their catalogue of products to display to customers. The application must be capable of working in an environment where it is unable to reliably communicate with a server, such as on the shop floor of a distributor. The application should be developed and documented in a way that makes maintenance of the code (separate from the product catalogue) easy and well understood for future development. Customers would ultimately be able to narrow down their requirements and personal preferences in a web environment that looks and behaves like a native app but is actually centrally managed and updated, with full brand and UX consistency across the gamut of available systems and screens, including those which are yet to be released. In order to meet these requirements, we made two deliverables; a customer facing front-end JavaScript Progressive Web Application, and a back-end PHP Web Application. Look & Feel Both the backend and frontend of the Rangemaster product selector web application have been designed to match the brand identity supplied by AGA Rangemaster. These brand guidelines outline usage of the logo, fonts and colours, with useful examples of proper placement, alignment and scaling. In the backend we aimed to keep a minimal user interface (UI), so that focus is put on form interaction to improve UX when entering and managing data. The frontend retained much of the same structure and layout as their previous application, albeit with updated branding and improved UI, to ensure that sales representatives would be able to navigate the application with continued ease and familiarity. Javascript Progressive Web Application Technical Overview The customer-facing application was written in HTML5, CSS3 and Javascript. Our intent was to take the current UX of the existing application (a guided “slideshow”/”wizard” approach of several “pages” querying the user before displaying the results) and improve upon it. In particular, close attention was paid to the use of animations to ensure they are smooth and consistent on a mobile device. The application was developed using React/Vue. This library provides a solid base for the development of JavaScript Single Page Applications, which allowed us to quickly develop the application in a consistent manner that will be maintainable should new functionality be required later. Offline Capabilities The main audience of this application was expected to be sales staff in a retail environment, working with prospective customers to narrow down selections. We anticipated that a stable, fast Internet connection wasn’t always likely on the shop floor, therefore the application needed to be capable of working offline. We provided offline capabilities using several web technologies which we felt could accomplish the same goal as a native app while also benefiting from a faster update cycle and a consistent codebase across web, Android and iOS. The primary technologies we chose to use were “Service Worker API” and “Web Application Manifest”. At the time of development, these technologies were not yet available on iOS. In order to support iPhone/iPad, we implemented fallbacks to alternative technologies, including Application Cache Manifest, Apple “web-app-capable” meta tags, and PouchDB. User Flow In other words, the journey a user takes when visiting the site and using the application. Upon start-up, the product selector application displays a small loading animation. This is embedded in the page and loading is structured such that it will render while the application code is downloaded, parsed and executed. When the application code has loaded, it replaces the loading animation with the start screen. The start screen shows the AGA Rangemaster logo, a small selection of cookers and a call-to-action (CTA) Start button. Clicking this button changes the display to the start of the selection wizard. The selection wizard progresses through five key steps: Initially, the user must select the size of cooker they are looking for. Clicking a width option advances the user to the next step. The user is asked to pick a style of cooker; modern or traditional. Images are shown above both buttons depicting each style. The user is asked to pick their prefered fuel type for the cooker. Each fuel type is explained, and additional information is also available about induction cookers by tapping on a call-to-action which launches a video in-app. Finally, the user is asked if they want a multifunction oven. As per the Fuel Type step, a call-to-action is shown to play another video, this time explaining what a multifunction oven is. Results are presented. A small loading animation is shown while the catalogue is filtered to provide matching cookers and any preparation work needed to load the cooker images is done. Once loaded, the customer can swipe to cycle through the list. Search Results On the Results page, customers can click on the image of a cooker to show more detailed information. The page transitions to a view of the chosen cooker, with text information, a bullet point feature list and collection of attributes (JBA Code, dimensions, etc). Additionally, the cooker image has a set of controls below it to view the cooker in different colour configurations. Settings A basic settings screen allows sales reps to see the last-updated time for the list of cookers, the network status of the app (i.e. can it talk to the servers) and a button to initiate an update. On boot, the application will attempt to contact the server. If it finds a more up-to-date catalogue, it will present a dialog to the user asking if they wish to download the latest version. While the app is updating a progress bar will be shown indicating the number of files left to download. Should the download fail at any stage, no changes will be saved and the user will continue to use their existing downloaded catalogue. PHP Web Application (The Backend) Technical Overview The backend is a fairly standard CRUD (Create, Read, Update, Delete) application. Once logged in, an authenticated user is able to view and modify a list of cookers. This list of cookers records a collection of attributes about a cooker such as size, ovens, product code etc., stored in a database for ease of management. The application allows a user to upload images related to a cooker, with images then processed on upload to match the dimensions required by the application and to help with filesize. This information is accessible by a REST API, encoded using JSON for the data with URLs pointing to attached images. The form for entering/altering a cooker entry has been designed to ensure valid data is entered with immediate feedback or restricted inputs (dropdowns, checkboxes) where appropriate. Structure The user is initially presented with a login prompt. After successfully authenticating, the user is taken to the main admin page where they see a paginated table listing all cookers in the catalogue. UI elements are provided to allow a user to filter the list to aid in updating information about a specific cooker. Only “common/primary” fields will be shown in the table to improve UX by not bombarding the user with unnecessary information. Each table row also has a set of controls to edit or delete an entry. Deletion will display a prompt to confirm the action. Editing will open a different page. This page consists of several form inputs populated with data on the cooker, allowing a user to edit said data. Certain form elements use “restricted inputs” such as selects, radio or checkboxes to limit allowed values. An additional section of the form allows a user to upload/edit the images associated with a cooker. The user is able to select multiple images, and associate each with a colour value and name of colour (Cranberry, Racing Green, etc.). This form is also used to enter new cooker information. Clicking save will once again validate the details in the form, and send the data to the server. Any new images will be processed, creating versions resized to match the required dimensions for the application.