Iceworld Website

Web development and UX design project.
Web Development
HTML
CSS
JavaScript
UX/UI Design
Responsive Design
The Challenge
As part of my Information Technology degree, I designed and developed my first website from scratch as part of an extended Website Development project. Following the brief to create a website for an 'imaginary resort,' I conceptualised Iceworld, a fantastical snow resort set in the Ice Age, offering activities like skiing, ice skating, and snowboarding. This challenging yet rewarding project provided a strong foundation in HTML, CSS, and JavaScript.
My Role
  • Designed and built a fully functional website using HTML, CSS, and JavaScript (solo project)
  • Leveraged user testing methodologies, including card sort, task observation, and qualitative interviews, to gather insights and refine the design.
  • Crafted an engaging UI with intuitive navigation and visually appealing elements.
Skip to:
Phase 1 - Ideation and Content Architecture PlanningPhase 2 - Prototyping and Development Phase 3 - User TestingPhase 4 - The WebsitePhase 5 -  Project Outcomes and Future ConsiderationsReflection

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.

Iceworld style-guide colour palette
Content architecture planning

Phase 2 - 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:

Sketch
Digital
Medium-fidelity
High-fidelity

Phase 3 - 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.

Card sort in action
Card sort prep
User test in action (high-fidelity)

Phase 4 - 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 5 -  Project Outcomes and Future Considerations

Instagram page

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. In addition, 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.
Home