IXD304: Updating my Website

My website

With the deadline quickly approaching, I have been working on my Apollo Flights website and making it stronger. I have made some pretty big changes and improvements which I will talk through in this blog post.

In our final critique session, I was given some last-minute suggestions on how I could improve my website. One of which was increasing the size of the flight heading on the home page. Previously, this heading was quite small and didn’t stand out. Therefore, I increased the size to 200px and placed it within the blueprint to give it more space.

I decreased its opacity so it was less harsh on your eyes, especially since this would be present on every flight page. I do prefer this heading as it’s bold and tells the user clearly what flight they are reading about. Since I made this heading much bigger. I had to make some adjustments to the background image so there was space for it, but this was easy enough.

Before:

After:

 

Next, it was time to tackle the read more page. This is where I felt I had to make the most improvements. This is what it looked like before:

This is how it was laid out in my prototype, so I tried to do the same in web flow. However, as you can see in the second image when the website was published, the sticky note effect didn’t work as it didn’t stay as a perfect square and would become distorted. There were also issues with the background rocket images being cut off when displayed on a bigger screen.

As much as I liked this design in my prototype, it was very difficult to make this design function properly on web flow, so I decided to redesign some of the layout.

Redesigning the “read more” page

Firstly, I updated the layout when you arrive at the read more page. I decided to increase the size of the Apollo Flight title, so it takes up most of the screen. You can see a lot of narrative websites doing this and I think it works well. Below this you then have the date, the time it took off and how long it lasted. The user can then scroll down from here but there is also a call-to-action arrow button to bring them to the next section in case they don’t know to scroll.

I think this is a much better introduction to the information about the flight. It also feels more like the user is following a story rather than just scrolling through a website.

Once the user scrolls down, it brings them to the mission section. This used to be displayed in a small post-it-note but I think this gives it more room to breathe. This also allowed me to increase the size of the heading without making it feel overcrowded. I kept the rocket illustrations as it makes it more engaging and brings the some of the style from the home page into this page.

Further down, we have the facts about the Apollo flight. Above the facts, you can see the bottom of the rockets from the mission section, I think this flows nicely and guides the user nicely to this section.

As you can see, the facts still have the post-it-note effect. I wanted to do this, so it still has some elements of my prototype in it. However, this works much better than my other attempt in web flow. This is much bigger so you can see the information more clearly. I also added icons to visualise the facts information. You can read more about the process of creating these icons in my previous blog post.

 

Other than these changes, this page didn’t change much. I just increased the size of the headings for the flight duration and crew sections. This way, it is consistent with the rest of the site. I like having bigger headings as they make each section stand out better and its easier to find what you are looking for.

 

You can now access references through a button on the bottom of the home page:

 

Overall, I am happy with how my website has turned out. I will update this blog post should I make any changes before the deadline. I enjoyed improving the read more page as it feels more like a story, and I think the layout works much better. Everything is cleaner and feels less crowded. I also like that it is a bit different than my prototype as it shows 2 different approaches.

 

Leave a Reply

Your email address will not be published. Required fields are marked *