Project 2: Website Redesign Prototype
Write up
This write-up outlines the key features and design decisions made for the redesigned website. The goal was to improve user experience, enhance visual appeal, and better reflect the brand’s rustic and handmade identity. Below outlines the key features of the prototype, any design decisions made during development, and how the prototype addresses the objectives set in the redesign proposal.
Key features
1. Carousel
An interactive carousel is featured prominently at the top of the website, allowing users to scroll through key content. Navigation is made simple with two side arrows for sequential browsing and clickable dots at the bottom for direct access to specific slides.
This component adds dynamic movement to the site and engages users visually, while also providing an efficient way to highlight multiple seasonal offerings or announcements. The carousel ensures that important content is showcased without overwhelming the page, maintaining a clean and organized layout.
Fig 2.1 - Website carousel
2. Navigation bar
The redesigned website includes a sticky navigation bar that remains at the top of the screen as users scroll. This ensures quick and consistent access to key pages no matter where the user is on the website. The navigation bar also includes hover effects, which improve user feedback by visually confirming which option is being selected.
3. Interactive features
Various sections of the website now include interactive hover effects. When a user hovers over buttons, section headers, or clickable areas, the element changes colour or style, encouraging interaction. This not only guides users toward clickable elements but also adds visual interest to the page, making it feel more lively and intuitive to use.
Fig 2.3 - Website section selection bar
Design Decisions Made
Layout -
In the redesign, the websites layout is slightly rearranged to ensure everything is aligned and arranged properly. Each section is now clearly divided using different coloured sections to help guide the user’s eye and distinguish content blocks. This not only enhances readability but also ensures that no part of the page feels visually cluttered. The use of consistent padding and margin spacing gives the layout a more polished look.
Typography -
The same typography from the website is reused as it aligns with the handmade aesthetic and rustic feeling of the farm brand. Headings are styled with a slightly more pronounced size to establish a stronger visual hierarchy across the site.
Colour -
Warmer tone colour was chosen for the background as they are easy on the eyes and gives off a more welcoming vibe as compared to the original white background of the website. Desaturated shade of red and green that decorated the website were selected to maintain the rustic feeling of the brand.
Interactivity -
Interactivity was enhanced with subtle animations. Nothing overly flashy—the animations serve to draw the eye to a new section or confirming a hover action. This keeps the site feeling responsive without overwhelming visitors.
Decorations -
To decorate the bottom part of some webpage so that it does not look too empty and dull, I have made fir tree shapes that were styled to match the brand logo to decorate the webpage. They are lightly desaturated, so they do not overpower the main content.
Objectives achieved
Updated Look & Feel: The updated layout, consistent spacing, and improved visual hierarchy give the website a cleaner, more modern appearance. It feels more professional while retaining the brand’s authentic charm.
Increased Interactivity: The addition of animations and hover effects increases user engagement and makes navigation feel smoother and more fun for the user to navigate through the site.
Enhanced Brand Alignment: The logo is used for as the home page button. The same color palette is applied throughout the site. Seasonal motifs (Christmas Trees) tie together the holiday theme while reinforcing the farm’s identity.
Improve Usability: Added Features like the fixed navigation bar, clearer layout divisions, and responsive carousel contribute to a better overall user experience, especially for first-time visitors.
Fig 2.9 - Website prototype in Figma
Feedback
Week 9
- Website a bit too plain, but overall not bad.
- Can add words to the logo on the homepage
- Carousel can change
Reflections
Throughout this project, I learned how to use Figma to design and prototype a website. It was my first time using this tool, and I gained hands-on experience in creating layouts, adding interactive components like carousels and navigation bars, and applying consistent design elements. Understanding how to link pages and create a working prototype also helped me appreciate how designers plan user flow and interactions. YouTube tutorials has been a big help by teaching me how to make the interactive components.
I also realised that designing a website is much harder than I initially thought. It’s not just about making things look good—it involves balancing functionality with visual appeal, ensuring a smooth user experience, and making thoughtful decisions about layout, colour, and typography. This project gave me a better understanding of the work that goes into web design and taught me the importance of planning and testing every design choice.
Comments
Post a Comment