summary
A Fully Responsive Website for a High-End Travel Agency
The final project mandated in the Intro to HTML and CSS course at Des Moines Area Community College centered around the fundamental concept of responsive design while demonstrating proper HTML and CSS syntax.
Throughout the project, students were expected to dive into the intricacies of fluid layouts, flexible grids, and media queries, and were encouraged to infuse designs with personal flair and unique solutions to real-world challenges. The project challenged me to incorporate best practices in user experience (UX) design, emphasizing intuitive navigation, legible typography, and optimized imagery.
Ultimately, this final project served as a testament to the my growth and proficiency in HTML and CSS, showcasing my ability to translate theoretical knowledge into practical, responsive web solutions that meet the demands of today's digital landscape.
project overview
Updating a Website to Enhance User Experience
The course project I chose was for Adventure Travel, a family-owned boutique business specializing in all-inclusive national park vacations. They already had a website but it needed an update to provide an enhanced user experience.
Students were not provided with much background knowledge so I reached out to ChatGPT to help guide me with real-world goals. A simple prompt asking for common reasons to update an outdated website led me to reach the following goals:
Enhanced User Experience: An outdated website can frustrate visitors with slow loading times, poor navigation, and outdated design elements. By improving navigation and speed to relevance, it can ultimately lead to more bookings.
Mobile Compatibility: With the high usage of mobile devices, having a website that is optimized for mobile can lead to a gain in traffic and potential customers.
Improved Brand Image: Given the prestigious accolades Adventure Travel earned from top travel publications like Travel + Leisure and Conde Nast Traveler, it's crucial that the website reflects the same level of excellence and elegance to maintain credibility and attract discerning travelers.
By updating the website with a focus on providing a seamless user experience, modern design elements, and compelling content, I believe we could increase booking completion rates.
problem
User Needs, Business Needs, and the Problem to Solve
Given that we lacked context of user needs or pain points at the project's outset, I kicked off the project by making a journey map to understand how users book vacations.
By carefully mapping out each step, from when they first search for the vacation to when they book it, I found places where users have positive emotions as well as where users might have trouble. This exercise made me feel more connected to their experience.
Thinking through problems users might face, I gathered insights such as areas of opportunity to build trust, providing the right level of detail at the right time (funnel approach), and simply be easy to deal with.
While I haven't finalized the problem statement, I did think of a few ideas in the process including reviews, transparent pricing, and high-quality imagery as possible design enhancements. It's crucial to document these ideas to prevent them from slipping through the cracks. These improvements could build trust among users and they align with our overarching business goals.
Just as the journey map focused on the user, an impact map focuses on the business, as seen below. This tool serves to establish a direct link between design decisions and their corresponding customer and business outcomes.
Effectively communicating the impact of our design efforts isn't always straightforward. However, by connecting the dots from project objectives to customer outcomes, then to broader business goals and financial results, I can articulate the significance of my contributions more effectively to stakeholders.
This comprehensive approach provides a clear pathway for illustrating how design efforts directly contribute to the success of the business.
Utilizing design thinking methodologies, I meticulously collected and synthesized contextual information pertaining to both the user and the business. This comprehensive understanding provided me with perspective, enabling me to delineate a more refined vision of the objectives.
In crafting the problem statement, I distilled the complexities learned during the exploration phase into a concise and actionable framework.
solution
Learn Insights & Themes from Competitors
Competitive teardowns serve as a powerful tool for UX designers to gain insights into competitor approaches and learn about common patterns within the business category. I browsed many high end travel sites and picked 3 to conduct a competitive teardown.
This process gave me a benchmark to evaluate my own design decisions. Through it, I was able to identify a couple themes such as high quality imagery, the significance of reviews, and pricing transparency, all of which were uncovered during the journey mapping exercise as well. This solidified my decisions to utilize them on the website.
I was ready to start the layout process in low fidelity wireframing. Because I wanted the imagery to have a strong impact, I started with desktop configurations first in order to identify the viewport height that would give the user an immersive feeling.
Through various high quality imagery tests, I decided to work with 50vh for a strong impact while not preventing the user from reaching relevant content quickly.
Once I mapped out all the pages for both desktop and mobile, I started programming in VS Code. I learned early on in class that I could move much faster through the process with 2 resources:
Predefined components (such as Bootstrap5 components)
ChatGPT
ChatGPT served as a valuable resource for me, as new programmer, by providing support, guidance, and assistance throughout the coding process, ultimately helping me to write code faster and more efficiently.
All this code translated to the website images seen below. My final project and class presentation on my approach reached a perfect score! I couldn't be more happy with the progress I made this semester and I'm excited for where it will lead me.
View Live Website
What's Next?
Lessons Learned and Next Steps
As I wrapped up my first semester in web development, I reflected on the lessons learned. There's one in particular which stands out above the rest.
Content informs design.
Designing website layouts to be fully responsive for all devices was extremely difficult when I didn't have the real copy I wanted to use. Predesigned layouts would break almost every time due to the text being too long or too short or not equal lengths as the other cards.
When I learned to write the copy first, or when it was provided for me instead, I felt the message on each webpage was much more clear and engaging.
Writing copy first drove me to choose images to support the story instead of trying to write a story around the images.
It made me much more efficient as there was a clear architecture of how I would drive the user to bounce through cross links from one page to another.
Additionally, I learned of the versatile capabilities of the Bootstrap5 framework. Embracing its responsive grid system, extensive component library, and intuitive utilities, I empowered myself to build sleek and modern interfaces with ease.
This journey equipped me with technical proficiency and instilled in me a deep appreciation for the artistry of web development. With each line of code written, I gained a deeper understanding of how to blend creativity with functionality, paving the way for well-rounded digital experiences.