Gen X Ray App
Hand coded website using HTML and CSS for a Ski Resort. Whether accessed from a desktop computer or a mobile phone, the website delivers an immersive experience, seamlessly adjusting to different screen sizes and resolutions.
Role
- Sole UI/UX Designer
- Sole Coder
Tools
- Dreamweaver
- Figma
- Adobe Illustrator
- Photoshop
Duration
- 4 Months
- 12 hours a week
Overview
I developed a hand-coded, responsive web page that seamlessly adapts to various screen sizes, including desktop, laptop, tablet, and phone. The focus was on creating a fresh, modern design, using Dreamweaver to build the entire site from scratch. This platform serves as a comprehensive resource for skiers to access all the essential information they need.
Background Research
In the beginning research stages, user interviews and additional background research shed light on crucial aspects of people’s ski resort web page preferences:
Target Audience Analysis:
Age Group:
Our primary target audience for Copper Summit Ski Resort ranges from 16 to 50 years old. This diverse age group reflects the broad spectrum of individuals who enjoy skiing and other winter activities. Understanding the preferences and needs of this audience is crucial for designing an inclusive and engaging website.
Preferences and Interests:
- Adventure Seekers: Catering to the younger demographic (16-30), focus on portraying the thrill and excitement of skiing and other adventure activities available at Copper Summit.
- Family-Oriented: For the age group of 30-50, emphasize family-friendly features, such as family packages, childcare services, and a range of activities suitable for all family members.
Design Approach:
Simplicity and Ease of Navigation:
- User-Centric Design: Prioritize a user-centric design approach, ensuring that visitors of all ages can easily find the information they need. Implement intuitive navigation menus and clear calls-to-action.
- Mobile Responsiveness: Recognizing that users may access the site from various devices, prioritize a mobile-friendly design to enhance accessibility.
Simplicity and Ease of Navigation:
- Visual Aesthetics: Employ a clean and modern design aesthetic to appeal to the sensibilities of a contemporary audience. Use high-quality imagery and visually appealing elements to evoke the excitement and beauty of the ski resort.
- Consistent Branding: Maintain a consistent brand identity throughout the website, using a cohesive color palette, typography, and imagery. This helps in creating a professional and memorable user experience.
Sketches
Hand-drawn sketches are essential for quickly figuring out and refining UI screen layouts in the Copper Summit Ski Resort web design project. They cut through the complexity, turning abstract ideas into practical designs, allowing for creative exploration and iterative improvements. These sketches simplify UI elements, making it easy to communicate design concepts and incorporate meaningful feedback early in the project. The UI, focusing on functionality and user engagement, benefits from this straightforward approach, ensuring a practical and user-friendly design.
Usability Studies
Participants and Methodology:
I conducted a usability study on a low-fidelity prototype with a diverse group of individuals within the target audience range of 16 to 50 for the Copper Summit Ski Resort page. Participants were asked to perform specific tasks to evaluate the website's user interface (UI) and overall usability.
Task-Based Questions:
- Navigation Test:
- Participants were instructed to find information about ski pass prices and booking procedures.
- Goal: Evaluate the intuitiveness and efficiency of the navigation system.
- Booking Simulation:
- Participants were asked to simulate the process of booking a ski pass and accommodation.
- Goal: Assess the ease of use and clarity in the booking process.
- Event Information Search:
- Participants were tasked with finding details about upcoming events and activities at Copper Summit Ski Resort.
- Goal: Measure the accessibility of event-related information.
- Mobile Responsiveness Check:
- Participants were instructed to access the website from a mobile device and perform a task of their choice.
- Goal: Evaluate the responsiveness and user-friendliness of the mobile interface.
Results
- Navigation Test:
- 80% of participants found the navigation intuitive, with clear menu options for ski pass information.
- 20% encountered minor confusion, suggesting a need for slight improvement in labeling.
- Booking Simulation:
- 90% of participants successfully completed the booking simulation, indicating a straightforward and user-friendly booking process.
- 10% faced minor challenges in locating specific accommodation options, pointing to a potential enhancement opportunity.
- Event Information Search:
- 85% of participants easily located information about upcoming events, highlighting good information accessibility.
- 15% suggested that a dedicated events section could enhance the user experience.
- Mobile Responsiveness Check:
- 95% of participants reported a positive experience with the mobile interface, emphasizing its responsiveness and ease of use.
- 5% noted minor formatting issues, suggesting a need for optimization in certain mobile scenarios.
HTML and CSS Coding
The Copper Summit Ski Resort website was coded entirely from scratch using HTML and CSS. This direct approach ensured a seamless translation of the design into functional web pages.
HTML Structure:
- Utilized semantic markup for a structured layout.
- Integrated content, including ski pass details, accommodations, and event information.
CSS Styling:
- Styled HTML elements to match the clean and modern design.
- Implemented responsive design using CSS media queries for optimal viewing on various devices.
- Ensured cross-browser compatibility for a consistent user experience.
This coding approach provided a customized and performance-optimized website, meeting the design standards and catering to the target audience aged 16 to 50.
Final Design
In the final design I took what I learned from my usability studies and applied them to my design to get these final designs.