Role: Graphic Designer
Target Audience: College Students
Skills: Web Design
What was the project?: I was tasked with choosing a website that had a bad user interface and ultimately fixing the problem that the site has. The problems that a bad interface can have is a bad layout, lack of use of brand esthetics, etc. In order to fix the problem I had to conduct a series of user tests, card sorting, wireframes, and many more.
What was the problem?: The problem with the original website is the arrangement of information was overwhelming for the viewer. Also, there was a lack of brand ascetics to the site, which made the site look very unpleasing.
What was the purpose of this project?: The purpose of this project was to get me in the habit of designing based off of user feedback on their experience of using a product.
Original Home Page Layout
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/a2c2d227-b099-4484-b8e1-532e6fae1056_rw_1920.png?h=ba7aa7c8e7279959cb01b6bc8a1d8069)
Home Page Redesign
For the home page, I really wanted to simplify the way that the information is laid out on the page so it can be easier for the person to read it. For the breaking news section, I made that information go on the top of the page, have an image in the background, and have the display text over the image so it can tell the viewer what is important. Then, below that, I have the rest of the information below it to separate the two sections.
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/23c3ac6c-7626-4619-930d-c49fc9407680_rw_1200.jpg?h=9a96a94b7c7fb7a105c3cdd360d4e934)
Home Page
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/ec07fe98-b597-4469-b91e-4718dd6bd257_rw_1920.jpg?h=63181a6978652331f6c33eb5d2180b99)
Home Page Mockup
Original Drop down Menu
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/51c2abaf-720b-4295-bf12-eb6963a9a207_rw_1920.png?h=21356069d3a8123815fbac6ecf0acbaa)
Drop down Menu Layout Redesign
Then moving on to the drop-down menu, I really wanted to add more brand aesthetics to it. The original drop-down menu really made it hard to distinguish the subheading from the normal text because of the white color of the type. To fix this problem I added a red line underneath the subheading to add more brand esthetics to the page and to better distinguish the subheading from the normal text.
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/f77b76c7-2a79-4155-a6a5-638fe879f3eb_rw_1200.jpg?h=5c91346199ab4212dd38a0aa15affbd3)
Drop down Menu
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/bbcb88ae-32a3-4625-ac14-97f65128064b_rw_1920.jpg?h=1e98e99ef75675ba954c92f7b0571910)
Drop down Menu Mock up
Covid-19 Article
If you go back to the home page and click on one of the articles relating to covid-19 it will take you to this page. There were really no major changes to this page, I just add a red line under the title information to utilize more brand esthetics.
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/f192998c-9b50-457d-8e7f-88af68270eb9_rw_1200.jpg?h=8b9663be526aded495036743c4cfac17)
Life during the pandemic article
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/ada7ab85-1c5f-4f04-8048-14eb2e282246_rw_1920.jpg?h=ebb564c624a9c545f972bbb97300496c)
Life during the pandemic article Mock up
US Tab
Then if you click on the US tab in the drop-down it will take you to this page. The major thing I changed to this page is adding a red block, right along with adding some text to show that it is important. Then for the rest of the information on the bottom, I basically made it the same as the info on the bottom of the home page.
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/9904f8e9-86a2-4a04-a957-7d6794219d5a_rw_1200.jpg?h=9a7c15a19aa9b15ec996ff1e3ce2ab26)
US Info
![](https://cdn.myportfolio.com/bdea8e42-c295-4a31-991d-601374dbf669/5b66ead7-2a20-444c-8f9e-ff8aadc61fe2_rw_1920.jpg?h=95fcd5de13fe1fecc662a93eb1730080)
US Info Mock up