Notion Website Redesign
Website Design, System DesignThe Notion website redesign was a project undertaken to update the website's messaging, design, and product representation. I collaborated with co-designer, web developer, copywriter, and illustrator to develop the design system, illustration library, and landing page for the existing site.
![](https://freight.cargo.site/t/original/i/68a6bcc76bcbe8b41b97eda47a5e51ee4a2ed0c8257d82963f5df86a17dc4579/Color-themed-product-pages.png)
Product pages
![](https://freight.cargo.site/t/original/i/0dcd46b1d71355261a7436c508fcf5370b75b7485e1fd8df4c249f527c148546/browser-bar.png)
![](https://freight.cargo.site/t/original/i/d37a90597f9f3b296619cf70a978816a838eac78164789ab5c1d5ca64a728be6/browser-bar-1.png)
![](https://freight.cargo.site/t/original/i/3f12a67f2c29d5254941f1a98b9568ab00c49ad975be5f2970ee0c12f4c48f7c/browser-bar-3.png)
![](https://freight.cargo.site/t/original/i/a1baf978bd525a9128584197d67e377705e9a098c1149cf1090b80bc0dc8146d/browser-bar-2.png)
Homepage
![](https://freight.cargo.site/t/original/i/e548c04133191d7813ab6289f0d6382ff81c3412b47b3658b174db0d588d614f/Frame-4287.png)
![](https://freight.cargo.site/t/original/i/b1d70176fa2ee223c6e18e793dfbbca592022de69353763eb3ad51d4c14e04a2/Frame-4289.png)
![](https://freight.cargo.site/t/original/i/5d8f27c48c95fb43a6a9dbaf7e9b8f374a2bf233bac26a4b0a844cc38f5c7d84/Frame-4288.png)
![](https://freight.cargo.site/t/original/i/4627df13962733fb390d06de64a6f9015239325bd797eb98687ebb4e22b1e796/Frame-4290.png)
Design System
![](https://freight.cargo.site/t/original/i/56b1ef4adf2650cd0569886430ee44d128bc906ce3cd13f7dba0d1fbfe9885fc/system-1.png)
A set of modular illustrations covering a range of poses, intended for snapping to and interacting with content
![](https://freight.cargo.site/t/original/i/c8996674b7462e35adc241f0de6878096d8e5c7d512621172bd8100a8a3a5717/Screenshot-2024-01-10-at-12.13.36AM.png)
Illustration guideline
![](https://freight.cargo.site/t/original/i/e782ff17f0c1eaa792ca5285d74c550852e735e427e9e5975b3d9ef7f29f3ef6/image-4.png)
Responsive + variable typography system
![](https://freight.cargo.site/t/original/i/46777cdbd58bd019ad9e6ae6a6ba4c7b7fe8d822c7ea97dfac21e12d482e89d1/Spec-4.png)
Interaction principles