Home » Grocery Store PWA

Grocery Store PWA

Summary

This project was my final project/disertation at University. The title of the project was “An investigation into whether Progressive Web Apps improve the User Experience of Ecommerce Mobile Websites” and I received a grade of 81% helping me get a First Class degree in Digital Media Technologies at the University of Greenwich.

My Role

UX Designer and Developer

Results

Progressive web app prototype for a ecommerce grocery store and first class dissertation result

This project put many of my skills to the test including research, prototyping, designing, web development and user testing. The web app designed in Adobe XD and developed with the ReactJS framework which requires good HTML, CSS and JavaScript understanding.

Progressive Web App

This website implements Google’s Progressive Web App user experience which allows for offline usage, fast load times even on slow networks, HTTPS for a secure connection and a “Add to Homescreen” prompt allowing for a native application UX once installed. When tested with the Google Lighthouse Audit it scores a perfect 12/12 score. 

Prototyping and Design

Before development both low fidelity and high fidelity prototypes were created using Adobe XD. The low fidelity prototypes are in the form of wireframes which allowed for rapid prototyping and important decisions relating to grid structures, information architecture and responsive web design to be made.

The high fidelity prototype helped as a guide for development as well as making decisions such as colour and branding as well as images and final placement of information.

Development

I developed the PWA and mobile website using the ReactJS framework as it allowed me to use a large library of JavaScript components as well as build my own. Developing this really helped me improve my JavaScript, HTML and CSS skills as well as helped me learn the basics of ReactJS which is a skill in its own right. Although my passion isn’t back end development I think it is important for a designer to be able to understand programming and back end development to a certain level to be able to communicate with developers and understand potential limitations of systems. The approach to development was to build a fully functional mobile website and then add the PWA features after on a separate build as both versions were required for the user testing and evaluation to answer the investigation.

Features

First off the PWA is fully responsive with a responsive Bootstrap grid used on all pages and responsive images that fit better on mobile or desktop. The PWA features include “Add to Homescreen” allowing for a native application like experience once installed. A service worker is being utilised for offline usage and fast load times on slow networks. All pages are served over HTTPS to be more secure. In terms of ecommerce features there is a product page, product details pages, a cart and a work PayPal checkout using the sandbox version of PayPal. Additional pages include About, Customer Service and Privacy Notice. 

User Testing

The user evaluation was conducted with the aim of finding out whether PWAs improve the user experience of ecommerce mobile websites. The evaluation was conducted with a user group of 12 students aged between 20 – 25 with a mix of 8 males and 4 females. Each user completed 4 scenarios in a controlled environment with some written guidance, once the users finished the scenarios they had to complete a questionnaire which provided quantitative data to help answer the investigation. The results of the test did show a slight improvement in user experience however as the mobile website was built in the same framework as the PWA and already featured elements such as HTTPS and responsive web design there was not a massive difference. Due to the results and conclusion of the investigation an obvious path for further research and development is to carry out a similar investigation in a country that does not have as good mobile hardware and does not have as good network infrastructure as the UK as the PWA improvements theoretically should be more noticeable.