TABLE OF CONTENTS
2. Project
4. Reflection
INSTRUCTIONS
The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.
PROJECT
Week 6-8 / Prototype
Using the contents of my proposal as a reference, I began developing the prototype by following the wireframe I had initially created. However, once I started laying out the actual content, I quickly realized that the original layout wasn’t going to suit the information as well as I had hoped. The content from the original website didn’t align neatly with the structure of the wireframe, especially in terms of how much text there was and how the visuals were used. Because of this, I had to revise the layout multiple times throughout the process and find out what works best to display all the information.
|
| Fig 1.1 Figma Board / Week 8 (17/06/25) |
I started by designing the Navigation Bar. The original website had too many links, so I condensed the navigation to just five main buttons (six if you count the logo). These include Home, Activities, Contact Us, FAQs, and a Book Now button, with the logo acting as a clickable link back to the homepage. I added simple hover effects to all buttons so it is more responsive. The “Book Now” button leads directly to Ash End’s actual booking website, while the other buttons (excluding FAQs) link to the respective pages in the prototype.
Fig 1.12 Navigation Bar / Week 8 (17/06/25)
Next, I moved on to the Homepage, beginning with the hero section. One challenge was finding appropriate visuals, as the existing website’s images were low in quality, so I opted to use free stock images instead. I paired the hero image with a warm introductory message and a clear Call to Action (CTA) button that directs users to the booking platform.
Fig 1.3 Hero Section / Week 8 (17/06/25)
After that, I created a section to present general information about the farm. Originally, the website was very text-heavy, so to avoid overwhelming visitors, I broke this information into three parts, each paired with an image. I added hover effects so that when users move their cursor over each image, a short description appears.
|
| Fig 1.4 Farm Information / Week 8 (17/06/25) |
To give users a quick overview of what they can do at the farm, I added a carousel featuring a summary of the main activities. This section includes a hover zone on the bottom half of each image, which reveals a caption and a “Learn More” button that leads to the Activities page.
|
| Fig 1.5 Carousel Setup / Week 8 (17/06/25) |
For the reviews section, I wanted to make it more current and trustworthy. The original website mostly featured outdated reviews from 2020 and Facebook only. To improve this, I pulled in more recent reviews from Facebook, Google Maps, and Tripadvisor. I displayed actual star ratings and gave users the option to click on each logo to see more reviews from that platform. I also added a fun CTA button that changes on hover from “Convinced Yet?” to “Book Now!” to make it feel more personal.
|
| Fig 1.6 Reviews Section / Week 8 (17/06/25) |
In the Footer, I included an interactive map that you can scroll around in, contact details, social media links, and another CTA button that takes users to the contact page. This CTA button is also more fun, as it invites viewers who might want to know more by changing from "Still Curious?" to "Let's Talk." I also reused one of the farm’s original graphics, which I found quite charming. It helped reinforce the family-friendly and welcoming tone of Ash End’s identity.
|
| Fig 1.7 Footer / Week 8 (17/06/25) |
On the Activities page, I expanded the content by giving a more detailed description of what’s included in the visit. Since this page serves multiple types of visitors, I also added a section that allows users to explore the specific experience that applies to them. Each category is clickable and has a hover effect that highlights the card when you move your cursor over it.
Fig 1.8 Activities Page / Week 8 (17/06/25)
Lastly, the Contact Us page was fairly straightforward. I included their contact information and a contact form where users can send their inquiries. I also added a submit button with the usual hover effects for better feedback.
Fig 1.9 Contacts Page / Week 8 (17/06/25)Prototype Link - Figma
FEEDBACK
Week 8
Other design section versions look better than the current one,
so use that one instead. Otherwise, most of the design already
looks good. Also, complete the other pages of the prototype.
REFLECTION
This project surprisingly took a lot of time to finish, mostly because redesigning the layout was more challenging than I expected. Throughout the process, I focused on making the site more engaging by simplifying text, improving visuals, and adding clear calls to action. Overall, this project helped me better understand how thoughtful design decisions can make a website more usable, enjoyable, and effective.