A New Look at Account Settings & Performance 👀

TL;DR: A new Account Settings experience for learners continues our investment into development infrastructure and reusable components. As noted before, we spent 36% less development time on Account Settings when compared to the Learner Profile effort, largely from recently added infrastructure improvements. We also spent some time making observable the performance of our micro front ends through a tool called SpeedCurve. With SpeedCurve we were able to identify and eliminate about 50% of the page load time for our micro front ends. Moving forward we hope this tool can help support other performance monitoring and optimization.

Open

Release date: June 3rd, 2019

Product owner: @Marco Morales (Deactivated)

What is it?

A new account experience can be seen at http://account.edx.org, and can be accessed by learners though the account dropdown shown to them in the learning experience (courses.edx.org) and our marketing site (edx.org). As part of the effort we continued to improve our reusable component library, and of particular note was our performance observability work, which helped us identify ways to dramatically speed up the page time for learners.

Key talking points for customers:
Why work on this page?

This page is a core learner page with interactivity even more complex than the Learner Profile. Learners can reset their password, add recovery email-addresses, connect social accounts, and delete their account from this page. Many of these experiences require validation, workflow messaging, and other details that helped us introduce or update patterns within our (in-progress) pattern library of reusable page components.

Who will notice the change, and where?
For learners there are some minor changes to their experience, largely that we have combined the Account Settings & Linked Account areas onto one page. A scrolling sidebar on the left will also grow over time to include new settings areas as the platform changes in the coming year. Additionally learners will now more quickly load micro front ends across our site, and we hope future investments can continue to speed this up further for our learners.

What impact will it have on learners?

We have already mentioned above the improved product delivery time driven by the use of development runways and reusable components. We hope to continue to drive development speed gains, even though true quantitative comparison across projects of different complexities is a difficult measure to normalize.

From a performance stand point, our efforts resulted in the reduction on about 75% of the HTML assets and 50% of the CSS assets delivered down to the browser. With basic 3 run test averages of page load times we saw a 40-60% reduction in various page load time measures. Some efforts (such as loading fonts a different way) had mixed results, but we are now able to see this and use it to make decisions about future investments or optimization work.

Results:

• Dev Speed: In summary, we spent 36% less development time on Account Settings when compared to the Learner Profile effort, largely from recently added runway improvements.

• Performance Gains: With SpeedCurve we were able to identify and eliminate about 50% of the page load time for our micro front ends.

Credits: Thanks to the Architecture Squad / aka #ArchSquid - @Albemarle (Deactivated) (Project Tech Lead), @Robert Raposa , @Nimisha Asthagiri (Deactivated) , @Douglas Hall (Deactivated) , @Adam Butterworth (Deactivated) , @David Joy (Deactivated) , and @Darren Domingos (Deactivated) .