Interactive Design | Project 2: Website Redesign Prototype
5/11/25 - 26/11/25 (Week 7 - Week 9)
Kimberly Miaw Jya Nee | 0366836
Bachelor of Design (Honours) in Creative Media | Taylor's University
Interactive Design
Project 2: Website Redesign Prototype
[Table of Contents]
1.
Instructions
2.
Project
3.
Feedback
4.
Reflection
5.
Quick Links
[Instructions]
[Project]
In our second project, we were required to develop a prototype of our chosen website based on the website redesign proposal in Project 1. We have to use Figma to create the prototype.
Key Pages to Include:
1. Homepage
2. Core Content Pages (at least 1)
3. Contact Page
The website I’m redesigning is for
Woo! Cafe. In
Project 1, I prepared a
proposal
detailing my analysis, research and ideas for the redesign.
Process Work
Note:A brief writeup in your E-Portfolio of (500–800 words)
outlining the key features of the prototype, any design decisions made
during development, and how the prototype addresses the objectives set in
the redesign proposal.
Research
Woo's original website only has 4 pages, which is Home, Career, Menu and Services.
Pages:
1. Home
2. Our Story
3. Menu
4. Services
5. Find Us
Fig. 1. Website Design References - Home Page
Fig. 2. Website Redesign References - Our Story Page
Fig. 4. Website Redesign References - Services Page
Fig. 5. Website Redesign References - Find Us Page
Figma
I began doing the website prototype in Figma.
I started doing the homepage, added the floating header which is my favourite detail of the entire website.
The next page is the Our Story page, where I showed more about Woo’s background that many people might not know. I felt their journey was worth highlighting, especially since they’ve been part of the coffee scene in KK for quite a while.
Fig. 7. Website Prototype Process in Figma #2
For the Menu page, I showcased the different food categories to highlight the wide variety of items Woo! Cafe offers. Visitors can find a button at the bottom of the page that leads to the full menu. For the top section of this page, I designed it similarly to the homepage, using an image background to keep the visual style consistent.
Fig. 8. Website Prototype Process in Figma #3
For the Services page, it was the one I spent the most time rearranging, since I was trying to figure out the best way to present the services.
Fig. 9. Website Prototype Process in Figma #4
Lastly, for the Find Us page I included their address, detailed opening hours, contact informations and also an embedded map.
Fig. 10. Website Prototype Process in Figma #5
Final Figma Prototype
[Feedback]
Week 7 (5/11/25)
General Feedback:
We continued CSS coding exercise using Dreamweaver in class this week. Mr
Shamsul taught us how to add text boxes, background images into our
website.
Specific Feedback:
N/A
Week 8 (12/11/25)
General Feedback:
[Online Class] We learned how to do dropdown menu.
Specific Feedback:
N/A
Week 9 (19/11/25)
General Feedback:
Continued working on Project 2 in class.
Specific Feedback:
N/A
Week 10 (26/11/25)
General Feedback:
[Submission Week] Feedback from Mr Shamsul during tutorial. He
mentioned the title typeface could be better, find something more
rounded. More negative space, the images are quite crowded.
Specific Feedback:
I changed the typeface, and also rearranged the layout to make it more spacious.
[Reflection]
Experience
Overall, this project was quite fun since we could finally visualise our website redesign ideas. It was also my first time using Figma, so it took me some time to get used to the tools and understand how everything works. There was a lot of trial and error at the start, but completing this project helped me become more comfortable with the software as I went along.
Observation
I realised that composition and flow are very important in web design. A well organised layout makes the website more visually pleasing and helps guide the viewer’s eyes naturally from one section to another. When the flow feels comfortable and intuitive, visitors are more likely to stay longer and explore the site instead of feeling overwhelmed or confused.
Findings
Good design is not just about making things look nice, but also about how everything works together. Small details like spacing, alignment, consistency in fonts, and colour usage can make a big difference in the overall experience.
[Quick Links]
Back To Top
Interactive Design: Final Project
Thank You
Comments
Post a Comment