Home
Progressive Web App Conversion and Redesign

Progressive Web App Conversion and Redesign

to : We redesigned the JIRE website to be a responsive, progressive web app, so it would provide an optimal experience for mobile visitors.

Problem

What was the problem to be solved?

The vast majority of JIRE's visitors were coming to the site from mobile devices and the site was not optimized for mobile usage - both in terms of design and bandwidth considerations.

Solution

What was the proposed solution?

We pitched a PWA or a Progressive Web App to JIRE to solve this problem.

While many of the advanced features were missing from iOS at the time, we determined that going with a full-fledged native application was both cost prohibitive from a development standpoint and a tough barrier to break down from a usability perspective - there really wasn't any reason for a user to download a completely separate application just to access a website.

Part of the PWA redesigned also meant we would make the site responsive so that it would adapt to any screen size, future-proofing the design foundation to accommodate whatever devices may come in the future.

Challenges

What challenges arose during the project?

The main challenge came with explaining Responsive Design.

JIRE was used to "pixel-perfect precision" which just isn't a reality with Responsive Design.

Explaining that 10 pixels of spacing may look great on a 1280x720 screen, it may be too little on a much larger screen.

We had to educate them to get them out of the static screen mindset.

Also, we faced a very short deadline when considering we basically had to re-do the entire front-end of the site.

Technical

What was the technical approach to the project?

PWAs lean heavily on JavaScript through the service worker infrastructure, so this was a heavily intensive JavaScript project.

This meant implementing caching and asset optimization (i.e., redirecting requests to mobile optimized images) via the service workers.

Converting to Responsive Design also meant we needed a Design Framework, so we turned to Bootstrap to provide that framework.

We also created two separate environments for us to test and demo the site on, which were launched as Elastic Beanstalk environments on AWS.

Management

What was the project management approach to the project?

We took an Agile Scrum approach to the project.

We were well-versed on PWAs and Responsive Design with Bootstrap and the work was pretty straight forward, so we didn't need Research Sprints.

We got bogged down in the middle of the project with some pixel-pushing.

We communicated with the client that this was jeopardizing the deadline, so we should save "perfection" until the end.

This helped us meet our deadline using one-week iterations and still left two full iteration for pixel-pushing modifications at the end.

Lessons

What did you learn from working on this project?

Pixel-pushing is a form of scope-creep and needs to be managed carefully.

While Agile is all about client participation, if the client is going to threaten the imposed deadline, that needs to be communicated as quickly and directly as possible.

We find that, almost always, the pixel pushing is best left until after all the functional requirements have been implemented and accepted.

Benefits

How did this project benefit the client?

We decreased unprimed load times by more than 55% and primed load times by nearly 80%.

Additionally, JIRE had a site that adapted itself to all types of screens, including desktops, laptops, tablets, phones and even televisions.

Finally, JIRE got the most important aspects of a native app (cacheing, home screen icon) without any of the negatives.

Why Gunner?

Why was Gunner selected for this project?

Gunner has been building PWAs since Google first coined the term.

We're well versed in the nuance and possibilities of PWAs.

We know how to future-proof PWAs so, as more features become available to different devices, our PWA automatically supports it.

Additionally, JIRE had been a client since 2013 so we had trust built up.

Proficiencies

What tools, techniques and methodologies were used on this project?

[object Object]

Adobe Photoshop

Photoshop is Adobe's photo editing, image creation and graphic design software.