Iceworld Website

Web development and UX design project.
Web Development
HMTL
CSS
JavaScript
UX/UI Design
Responsive Design
Project Overview
I undertook an extended Website Development project in the first year of my Information Technology degree, where I designed and developed a website from scratch. As this was the first website I ever created, this was a challenging and rewarding project, and gave me a strong foundation for proficiency in HTML, CSS, and JavaScript.

As per the design brief to create a website for an 'imaginary hotel', I had the idea to create a website for a resort which I named Iceworld. The fantastical resort Iceworld is located in the Ice Age and is the ultimate snow resort, which features a range of activities for guests to participate in, notably skiing, ice skating and snowboarding.

Phase 1 - Ideation and Content Architecture Planning

The first phase of the project included brainstorming both the aesthetic and functional features of the website. I undertook market research and became familiar with a range of existing hotel and resort websites, which inspired and informed my own project. 

I also brainstormed colour palettes, as well as the architecture and content of the Ice World website. Through design research and planning, I decided on a sleek, minimalist aesthetic, featuring a cool colour palette to reflect Iceworld's winter theme.

Phase 3 - Prototyping and Development

Prior to building the website, I undertook various stages of prototyping, with each stage undergoing user-testing. Prototypes ranged in level of fidelity and  included:

Phase 4 - User Testing

Throughout the prototyping phase, I undertook a range of user tests:

After undertaking testing, I would make changes to my website prototype based on user feedback. As can be seen from the prototype iterations above, Iceworld underwent a range of changes based on this user feedback. Some of the more significant design alterations I made included:

1. Making greater use of the navy colour in my interface. Based on feedback, I wanted to create higher contrast and add visual interest. I balanced this with the addition of some warmer tone images, which created a more inviting feeling.
2. Creating a new format for the navigation bar after users found the initial prototype confusing to navigate.
3. Incorporating greater use of interactive elements such as slideshows and forms, to add depth to the Iceworld site.

As with my other projects I took an Agile approach, whereby I continuously improve each aspect of the project by undertaking user testing, iterating on the prototype and then repeating.

Phase 5 - The Website

After creating prototypes of various fidelities, I began to develop my website, whilst continuing to conduct user testing on various features as I developed the site. With VS Code I incorporated HTML, CSS and Javascript, ensuring that accessibility and responsive design of the website were also incorporated.

I really enjoyed this project due to the open-ended, creative nature of the brief, and I loved telling the story of Iceworld through the creation of the website. Below is a slideshow of various pages from the final product of the Iceworld website:

Phase 6 -  Project Outcomes and Future Considerations

If this fantastical snow resort were to become a reality, there are a range of metrics that could be considered in order to measure the success of the project: 

1. User Engagement and Conversion: Tracking page views, session durations, resort booking rates, and newsletter signups would allow me to gauge user interest and effectiveness of the call-to-action elements on the website.

2. Feedback and SEO Metrics: Conducting surveys, monitoring reviews and leveraging SEO tools such Google Analytics would be effective channels to monitor user satisfaction and organic search rankings.

3. Social Media and Technical Performance: Complementary to the website (and a personal extension challenge outside of the assignment brief), I established an Instagram account for Iceworld, which is accessible via a direct link on the site. In a real world situation, this page would create a social media presence for Iceworld, and would channel traffic back to the website. Simultaneously, I would ensure that the website maintains rapid load times and is fully responsive across all devices, and optimise user experience both on social media and the main website.

Reflection
Over the course of the project, I developed and improved in a range of areas:
One area of this project that I found challenging was incorporating responsive design. Despite the project's success, on reflection I could have devoted more time to improving this aspect of website development, and I have used this as a learning experience that has shaped my approach to other projects.