Bright Pink

Bright Pink helps to save lives from breast and ovarian cancer by empowering women to know their risk and manage their health proactively. One way they achieve this is through the quiz at assessyourrisk.org, this was the primary focus of their initial engagement.

Goal

For AssessYourRisk, we set out to:

• Define quick wins and optimize the assessyourrisk experience
• Expand reach to women
• Increase assessment completions
• Improve access to data & insights

Process

As the developer staffed on this project, my two primary objectives going into it were to:

• Ensure all frameworks were upgraded to their latest versions and set up for quicker code changes in the future. All while mitigating any potential issues inherent with upgrading and refactoring code.
• Take the redesign as an opportunity to modernize the frontend code and address performance and accessibility concerns.

Preparation

Before making any code changes, we had to first understand the codebase as much as possible. Questions I asked myself were:

• What dependencies are we dealing with?
• What are all the endpoints being consumed and how?
• Whats the general upgrade paths for all frameworks and dependencies?

After some initial investigation, I came to realize that the codebase itself was several years old with many "versions" intermingled, leading to some sizable duplication in code and many endpoints no longer in use. With that, I started by documenting every route and investiagted whether it's still in use. Any questions were investigated further and clarified. From there, I researched the upgrade paths for Laravel and Vue to ensure I understand the potential pitfalls and what changes will need to be made to support the latest versions.

With a better understanding of the code currently critical to the function of the site, and a clear path to upgrade the frameworks it relies on, I made the difficult decision to start a fresh codebase rather than trying to taking the more error prone path of upgrading and mitigating issues in the existing legacy codebase.

Upgrade and Refactor

I started with a fresh install of Laravel and Vue, then individually installed all packages I had identified earlier as mandatory and confirmed that it was all working as expected. Then, I copied over all routes and associated code that was identified as mandatory. There were several updates needed for this code to work with the latest versions of Laravel and Vue, so at the end of this process I then confirmed that all parts of the site worked as expected before moving on.

This process was rather painstaking, but in the end this fresh start was just what we needed. I'd estimate about half of the legacy code was weeded out, and we had the latest and greatest of the underlying frameworks!

Modernization

While it's true we had a pretty great fresh start after the upgrades and refactors of the necessary code, the work was really only half done. I then set out to apply the wonderful fresh design that the Bounteous XD team created. Luckily, the layout of the application itself was relatively staightforward so I made the decision to start fresh here too. Not a call to make lightly, but I felt the performance and accessibility improvements we could make this way outweighs the risks of starting over.

Outcome

Performance Improvements

From a purely technology perspective, the differences were even more compelling than we were hoping. The stats speaks for themselves:

• 115 requests down to 50
• Pageload decreased from 7.8MB to 2.3MB

I would consider this the result of "quick wins" and adhering to best practices, I think it could improve more with some additional effort down the road.

Before/After

Results Page

Feel free to get in touch with me with any questions, corrections, or takedown requests.