I spent a few months working with Guru to improve their customer-facing product (and to brush up on my React skills!) Here is a taste of just some of the things I did:
A better on-boarding experience 👋
I added useful information and brand personality to many “inbox-zero” pages that were previously blank. For new users, this helps with on-board by explaining what each section of the site is used for, and for existing users, this gives them something nice to look at!
Accessibility improvements ♿️
I created an internal guide on creating React components with accessibility best practices in mind, highlighting the importance of semantic code and keyboard navigability. As an example, I implemented a checkbox as Guru’s first fully accessible component, with (hopefully) many more to come!
Here are screenshots of keyboard navigability in action thanks to focus states:
Additionally, I worked on other various improvement for users with Reduce Motion and Increase Contrast enabled in their accessibility settings.
Profile pictures 🙍♀️
I worked on improving profile pictures across the site with a new default avatar system based on user initials.
I also revamped how avatars are uploaded on the site. Here are some before and after screenshots:
A ton of other tiny things 🥇
I also worked on other various internal tools and improving development workflow, including, but not limited to:
- Getting React Developer Tools to work inside Chrome’e extension sandbox!
- Fixing an issue with
- Debugging Electron apps!
- A new content sharing workflow!
- And more!