ReImagining SFMoMa
UI/UX | Art Direction
2023
My Role
I worked on the website graphic design to update the artistic direction and brand identity.
The site map was studied and changed to make content finding more efficient.
I worked on the website graphic design to update the artistic direction and brand identity.
The site map was studied and changed to make content finding more efficient.
Targeted Message
A website to help people get involved with the contemporary art community and showcase SFMoMa’s previous and current exhibitions.
A website to help people get involved with the contemporary art community and showcase SFMoMa’s previous and current exhibitions.
Flaws with Original Website Design
- Site heirarchy is hard to navigate, hard to find simple facts like museum hours.
- Rounded shapes and bright colors make the website feel playful and inconsistent with their exhibitions.
Goal for New Website Design
This redesign aims to use line imagery and sharp corners to modernize the overall look. It also creates more complex visuals, yet easier website navigation.
This redesign aims to use line imagery and sharp corners to modernize the overall look. It also creates more complex visuals, yet easier website navigation.
Tools Used 🛠️ : Adobe XD, Illustrator, and Photoshop.
Featured in Juried Art Show, 2023
![](https://freight.cargo.site/t/original/i/7aeda3f1b4ce3ee34c6f9df694fda27b0c5d738cc6f2b77db2fd07b1e28fe764/Mockup.jpeg)
Design Process
![](https://freight.cargo.site/t/original/i/c5394e465538a03757337e7e193cd6ce993716be34e4bb0d4b8ff42e4a65b99d/moma-logo.png)
![](https://freight.cargo.site/t/original/i/dfd441f79b62fe3459a6ce8c7592b1a5781256867bfffff6cee0c88036d61c89/color.png)
Moodboard
Wireframes
![Moodboard Goal ︎︎︎ Use bright colors and geometric imagery.](https://freight.cargo.site/t/original/i/711bef62112696e7d91d9a24f708e3aefe3b1aec94482e85bd040cd7dddf5ac2/moodboard-copy.jpg)
![Wireframe Goal ︎︎︎ Each page has a different visual layout.](https://freight.cargo.site/t/original/i/f226a9bf16e0316a34868ae656c0c73da1da44a1b549ec46b8478588a269f1b1/wireframe-copy.png)
Final Design
![](https://freight.cargo.site/t/original/i/c5cc59427f59033e68ed1a15e64549eec36ecf4ee14eb76f325e6b4b46ee2fcf/moma-all.jpg)
![](https://freight.cargo.site/t/original/i/3d277173309c304dcf162eb5ecbb78dd2a539829b95a1276f9dc4d03d466b2d7/home.png)
![](https://freight.cargo.site/t/original/i/3c589f5a89237de9491b35aaeadafc5d1597c1467da92e48dd536eee9ea0e1bb/membership.png)
![](https://freight.cargo.site/t/original/i/9caa9b33a395bbd255aa2d4ec9e74a78f790ba319e10e4767c18ee272514c1f8/archives.png)
![](https://freight.cargo.site/t/original/i/aa9d71a54c1fefb65a0e87b0401285746f86000ab158b95a2e9b5cd07facd689/visit.png)
Takeaways
This website redesign pushed me to think outside the box in using line work and imagery to create a modernized look.
My main design goal was for each subpage to have a different visual feel, while having a similar theme. By keeping certain imageries consistent throughout the pages (like the border box style & title numbering), I was able to experiment with the remaining stylistic choices.
Because most of my projects were very product design and consumer product focused, I liked that I was able to experiment with making the web design look current and more fun!!
ReImagining SFMoMa
UI/UX | Art Direction
2023
My Role
I worked on the website graphic design to update the artistic direction and brand identity.
The site map was studied and changed to make content finding more efficient.
I worked on the website graphic design to update the artistic direction and brand identity.
The site map was studied and changed to make content finding more efficient.
Targeted Message
A website to help people get involved with the contemporary art community and showcase SFMoMa’s previous and current exhibitions.
A website to help people get involved with the contemporary art community and showcase SFMoMa’s previous and current exhibitions.
Tools Used 🛠️ : Adobe XD, Illustrator, and Photoshop.
Featured in Juried Art Show, 2023
![](https://freight.cargo.site/t/original/i/7aeda3f1b4ce3ee34c6f9df694fda27b0c5d738cc6f2b77db2fd07b1e28fe764/Mockup.jpeg)
Design Process
![](https://freight.cargo.site/t/original/i/c5394e465538a03757337e7e193cd6ce993716be34e4bb0d4b8ff42e4a65b99d/moma-logo.png)
![](https://freight.cargo.site/t/original/i/dfd441f79b62fe3459a6ce8c7592b1a5781256867bfffff6cee0c88036d61c89/color.png)
Moodboard
Wireframes
![](https://freight.cargo.site/t/original/i/711bef62112696e7d91d9a24f708e3aefe3b1aec94482e85bd040cd7dddf5ac2/moodboard-copy.jpg)
![](https://freight.cargo.site/t/original/i/f226a9bf16e0316a34868ae656c0c73da1da44a1b549ec46b8478588a269f1b1/wireframe-copy.png)
expand on process
redo color pallete : get in to tracking, font weights, different hover states, etc
redo visit section
export final design in to better quality
Final Design
![](https://freight.cargo.site/t/original/i/c5cc59427f59033e68ed1a15e64549eec36ecf4ee14eb76f325e6b4b46ee2fcf/moma-all.jpg)
![](https://freight.cargo.site/t/original/i/3d277173309c304dcf162eb5ecbb78dd2a539829b95a1276f9dc4d03d466b2d7/home.png)
![](https://freight.cargo.site/t/original/i/3c589f5a89237de9491b35aaeadafc5d1597c1467da92e48dd536eee9ea0e1bb/membership.png)
![](https://freight.cargo.site/t/original/i/9caa9b33a395bbd255aa2d4ec9e74a78f790ba319e10e4767c18ee272514c1f8/archives.png)
![](https://freight.cargo.site/t/original/i/aa9d71a54c1fefb65a0e87b0401285746f86000ab158b95a2e9b5cd07facd689/visit.png)
Takeaways
@Lydia Kim 2023
@Lydia Kim 2023