ARTD 318: Interaction Design
In this class we went through the process of redesigning a website as well as looking at user flow.
First we had to pick a non-profit organization of our choosing, I went with the seed of life foundation.
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_1.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/Ellie-Lee-1-1024x768.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/Ellie-Lee-2-1024x768.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/Ellie-Lee-3-1024x768.jpg)
Then we did a benchmark analysis of the original site.
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_01-1024x576.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_02.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_03-1024x576.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_04.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_05-scaled.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_06.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_07-1024x576.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_08.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_09-1024x576.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/EllieLee_BenchmarkAnalysis_Page_10-1024x576.jpg)
After, I did a user flow check with 3 users.
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserE-CardSorting-1024x650.png)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserE-Q1-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserE-Q2-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserE-Q3-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserM-CardSorting.png)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserM-Q1-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserM-Q2-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserM-Q3-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserT-CardSorting-883x1024.png)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserT-Q1-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserT-Q2-1024x768.jpeg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/UserT-Q3-1024x768.jpeg)
Then we did information architecture based on our feedback as well as created a moodboard for what we envisioned the site to look like.
![](http://www.eleelee.com/wp-content/uploads/2022/11/Info-Architecture-1024x576.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MoodboardTrees-1024x594.jpg)
Next, we did high and mid fidelity prototypes for a mobile and desktop version of the website.
Mobile Mid Fidelity
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_02-212x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_03-215x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_04-195x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_05-357x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_06-357x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_07-357x1024.jpg)
Mobile High Fidelity
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_2-212x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_3-222x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_4-222x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_5-357x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_6-357x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_7-357x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_8-473x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Mobile_Page_9-473x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_01-473x1024.jpg)
Desktop Mid Fidelity
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_08-473x1024.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_09.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_10.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_11.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_12-scaled.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/MidFidelity_Page_13-scaled.jpg)
Desktop High Fidelity
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_1.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_2.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_3.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_4-scaled.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_5-scaled.jpg)
![](http://www.eleelee.com/wp-content/uploads/2022/11/High-Fidelity-Desktop_Page_6-1024x576.jpg)