The client had told the team that the purpose of the site was to primarily to bring in adventurists and travelers that are new to the down of Dolores to stay at their hostel and enjoy the activities and amenities that the town of Dolores, Colorado has to offer. From doing a usability report, we created a fake persona based on the information that was given, and from that, we saw that the average user that is directed for Dolores Bike Hostel was between 25 and 35 years old, has low to moderate tech savviness, needs outdoor interaction, is eager to meet new people, and is seeking adventures and challenges. ​ Secondly, we found some issues with the accessibility and design of the website: Inconsistent font and capitalization Blocks of text Odd choices of color Basic and poor menu navigation No integrated booking page online No amenities or activities page From here, we decided to focus on 3 key factors: 1. Integrate the booking page into the website. 2. Overhaul the website with a fresh and modern design. 3. Add sections for amenities and activities to do in the hostel AND Dolores.

Our first step was to sketch out some designs for improved usability and incorporate a new layout for the website. Although this is not your traditional sketch, we used a program called Freeform, which allows you to place objects around a giant infinite canvas, to make this flow model of a basic new layout for the website.

Right after we got done sketching out a layout, we designed wireframes using Figma to place the design elements more precisely and get a better sense of how our sketched ideas would look on a web page. Check out the Lo-Fi Prototype Section to see our Wireframe. Feedback: The feedback we got from the wireframe was that we needed to create a simpler layout than what we had imagined in our sketches. Some of the recommendations we got included adding a review section, where it showcases customer reviews of the Hostel that is interactive. We also got suggestions to create drop-down question and answers for the clients FAQ's page and adding hovering elements to create engagement.

Using information gathered from the wireframes and the sketches, we moved into producing a prototype. Since we wanted it to be interactive, the group and I decided to continue using Figma and refining our previous wireframe. Lo-Fi and Mid-Fi Prototype Feedback Since we were using Figma, we were recommended to try and add more interactive elements knowing that Figma is limited in the way to use their program. We also were told to fix the layout of the home page, amenities page, and activities page to include simple and precise information that is easy to follow for new users. Hi-Fi Prototype Taking the feedback from our peers, we made the corrections and created an hi-fi interactive prototype of our redesign for our client. Home Page Getting inspiration from other websites and getting insight from the client himself, the design of the home page is laid out very similar to how he had it before, but with a modern twist. We incorporated his current colors of orange and black throughout the website with a more western font. The "Crafted for an unforgettable stay" section was redesigned to include pictures that looked like it was taped to a board, similar to how polaroids are hung. We kept the current description that the client already add. The "Fun and relaxation awaits" section is more-so the same as the section above it, but replaces the previous "The southwest awaits", which gets replaced into the activities page. We also incorporated an event calendar that showcases the upcoming events for the hostel. The client was very heavily requesting this feature as he currently holds many events surrounding Dolores, Colorado and his hostel. Amenities Page This is a new page for the clients website that showcases what kind of amenities that the hostels provides for customers. This was originally a small section in the FAQ's page and on the home page. In the amenities page, we wanted to make sure that each amenity included a easily visible picture and description explaining why its valuable and where to find it. Activities Page This is another new page for the clients website that showcases the different activities that users can experience within the city of Dolores. Since his main target audience is for adventurers who likes nature and going out and about, we included a bunch of different locations that are around the Dolores area that users can click on to learn more about them. Booking Page The client requested this feature the most, as his current booking page takes their users to a brand new website. The feature the client wanted the most was incorporating the current booking system into his already made website, in which we accomplished that task using HTML code applications from the Wix App Store. Contact Us Page Rather than e-mailing the hostel directly, people can contact the hostel through a simple form they fill out. Because the clients previous contact page was very similar to this, we decided to keep the layout but matched the theme of the hi-fi prototype and made it match the new-found esthetic of the website.