Website: further improvement after feedback

This week we focused on improving our websites that we have created throughout this term. To receive feedback, I have created a google form and created a separate section on my website where anyone could access the feedback form. 

I have created a feedback form with 10 different questions asking about the design of my website and the navigation. I was also wondering, how can people view my website on different screens and what are the issues I could work on. 

The first question I have asked was about the homepage, and what got me worried, was that someone clicked "okay", that means, the page needed improvement. I went into the individual responses tab and saw that the person, who clicked "okay" was displaying my website on a mobile device. Then I knew my mobile website needed improvement. 

In my google form I have created a separate question asking, if you clicked okay/bad in any of the questions, what was the problem? This one person submitted this answer: 

Sadly, this is a very general information and it did not give me a lot of detail of what did this person find problematic or unclear. I decided to look more at other mobile phone users answer my questions. In my google form, I have created a section for additional comments, and there, a person pointed out that a header in my mobile version is too big. 

This was a very helpful comment, because I knew exactly what to change to make my website more appealing. 

This is how the website looked on the mobile phone:

The header was indeed a lot too big and there was a button missing on the header. I opened wix and started working on this. 

After placing the button, I wanted to make the header smaller, to do that I have dragged it up. This definitely helped and made my website look better. 

Here is a screenshot of how it looks on a phone:

Another thing I have asked is how did the user feel about my contact form. 

Not everyone clicked great, therefore there were things to improve on. At first I was not sure what to change to make it better, therefore I decided to call my family, where my sister pointed out to me, that I have made only the email required. That could mean, someone could possibly send me just empty messages and clutter my inbox with them. This was a very interesting comment and I decided to make the name, last name, email and message required. I have also attended the drop in session with my tutor to get even more feedback, and my tutor advised me to add a subtitle underneath the word "contact" therefore it is more welcoming anyone who would like to contact me somehow. 

This is how it looks after my improvements. I think I did a good job improving this part of my website. 

The next question that did not have only positive feedback is my question about navigation. 

25% of the people who filled out my form said that the website was not very easy to navigate. Navigation is very important to me, therefore I decided to look into it more. I asked a friend what could have possibly created a confusion or issues and the thing she mentioned was very interesting. My friend mentioned that when she clicked on a tab in my menu, and it was directing her to that side of the page, the view was cut, as if I had the settings to show the side of the page, too high. This was an easy problem to solve and I hope that this makes my navigation process smoother and more intuitive. 

One more thing about the navigation that my sister pointed out is that maybe on my home page, the "see portfolio" text and the arrow should create a button together that would also display on the mobile version. 

I was consulting all my changes with my sister and her fiance and they were looking at the website on their phones to give me more feedback. On Wix, it seemed like everything was displayed right, however my sister showed me that on her phone the vector art (the stripes) are too big and take too much of her screen, therefore I made it smaller. 

This is how it ended up looking and I am very pleased by this. 

In the next question, I saw there were some problems with my "about me" text. Once again, I consulted that with my sister and she brought to me that I have been inconsistent. I titled the page "About me", but throughout the text I write about myself in the third form. To solve this problem, I have decided to change "about me" to "about Daria". I think this creates consistency and looks more professional. 

Next thing I noticed with my sister is that when scrolling down my page, the header would disappear and the words from the menu were just floating. There would be nothing wrong about it if it was not for the "About Daria" text, where the letters would mix with each other and it looked very unpleasing and messy. I decided to freeze the header.

However, when the header was frozen, and I would scroll down, it would cut out elements of my drawings and that looked highly unprofessional. To solve this problem, I decided to make the header half transparent. The transparency fixed some of my problems, but not all. When I was scrolling while on the "About Daria" page the words in the menu would still be unreadable because of the background. To solve this problem I decided to make them bold. 

At first I was scared that bolding words would cause my website to look less modern and fresh. I was wrong. In my opinion it looks even more professional and now when scrolling down, the words are readable and that was my goal. 

During the drop in session with my tutor, I have also gotten feedback to change the Digital Portfolio to Animation Portfolio to show my progression route even more. I think it is a good idea, therefore I decided to do so. 

My sister and I looked at the mobile version of the website a lot because it is important for the website to display right on mobile devices since most people nowadays use them instead of desktops. I was changing the slightest things to look great in the editor, but then when we looked at our phones it did not look as planned. I wanted to make sure my website is presentable on many screen sizes, not only my screen size. To see how I can see my website on other devices I have opened my site, clicked anywhere with the right mouse button or two finger click on MacBooks and clicked "investigate". 

After clicking "investigate" it opens a lot of code on the right hand side, which is not needed for what I am planning on looking at.

On the top of the page where it says "Responsive" I could click on the drop down menu and see different devices I could check the responsiveness for. For example a small screen of an IPhone 5 or a bigger screen of an IPhone X. It was very important to me to check if my design is responsive to different screen sizes (RWD - Responsive Web Design).

When I made sure everything is working how I would want it to work, I was done and I think my website now is ready for me to put my final project on it and to be assessed.