Interactive Design - Project 2
14/11/2024 - 5/12/2024 / Week 8 - Week 11
Tay Yue Chern / 0373215
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 - Website Redesign Prototype
TABLE OF CONTENTS
1. LECTURES
2. INSTRUCTIONS
3. PROCESS WORK
4. FEEDBACK
5. REFLECTION
1. LECTURES
Week 2 - Week 6 lectures and practical documented in Interactive Design - Exercises 1 & 2
Week 7 lecture documented in Interactive - Exercise 3
Week 9 - Box Model
Fig 1.1 Week 9 Slides
Week 10 - Position
Fig 1.2 Week 10 Slides
Week 11 - Introduction of Bootstrap & Feedback session on Project 2
2. INSTRUCTIONS
3. PROCESS WORK
Project 1 - Website Redesign Proposal
The objective of this assignment is to translate our website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating our ability to apply design principles and UX strategies effectively.
Interactive Prototype: Develop a clickable prototype that includes key pages and features of the redesigned website. The prototype should allow users to navigate through the site and interact with essential elements.
Key Pages to Include:
1. Homepage
Present the main design elements, including navigation, hero section, and key content areas.
2. Core Content Pages
Develop prototypes for at least ONE core page (e.g., About Us, Services, Products) to showcase how the content is organized and presented.
3. Contact Page
Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.
Brief Summary of the Prototype and Design Process
The Penny Juice website is designed to serve childcare providers, preschools, and daycare centres across the country. It offers high quality, easy-to-use fruit juice concentrates for children. The website's primary goal is to provide a platform for customers to explore the product range, understand the benefits of Penny Juice, and place hassle-free orders.
 |
| Fig 3.1.0 Website Redesign Objectives |
1. First Attempt
After analysing the website in Project 1, I began designing the prototype by organising the content collected from the original website and exploring the overall visual design.
 |
| Fig 3.1.1 First attempt |
2. Preparation
I reorganised the information and content collected from the original website according to the 5 pages I planned for the final project (the original website only consisted of 3 pages - Home page, Order page, Product Details page).
For the prototype, I decided to focus on 3 main pages - Home page, Order page and Contact page, based on Mr Shamsul's suggestion.
 |
| Fig 3.2.1 Content collected from the original website |
 |
| Fig 3.2.2 Final colour scheme decision |
I have redesigned the logo for the website using the typeface I created in another module, as I think the design aligns well with the website's intention.
 |
| Fig 3.2.3 Redesigned Logo |
Before starting the actual prototype, I created a separate page to design the interactive objects, as it was more efficient and more organised.
 |
| Fig 3.2.4 Interactive objects |
3. Home Page Design
 |
| Fig 3.3.1 Home page overall design |
The navigation and footer design is consistent across all pages. I kept the overall design clean and clear, making it easy for user to skim through and identify the information they need. I spent quite some time searching for a suitable image for the hero section, as I wanted an image that felt both 'healthy' and 'lively'.
I added the 'Order Now' call-to-action button in the centre of the hero section, and also placed it at the bottom of the page in the 'How To Order' section. When pressed, the button directs the users to the Order page.
 |
| Fig 3.3.2 Interactive elements |
I had planned to add four interactive elements in the 'Discover Our Flavours' section, featuring four fruit icons that would enlarge upon hovering. However, I felt this looked a bit odd and unnecessary, so I decided not to pursue this idea.
 |
| Fig 3.3.3 Interactive element - cherry icon |
However, I kept one of the icons in the prototype. I designed an enlargement effect (while hovering) for the cherry icon, and by pressing it, the user would be directed to the Product Details page, but this wasn't functional in the prototype as the page hadn't been developed yet.
After the feedback session in Week 11, Mr Shamsul suggested darkening the image in the hero section to help the text stand out.
 |
| Fig 3.3.4 Image adjustment |
 |
| Fig 3.4.1 Contact page overall design |
The original website doesn't have a proper contact page. I extracted the four main contact methods and placed them at the top of the page.
The contact form was created using the typical elements of a feedback form. I added an option for users to select the type of inquiry, incorporating a dropdown menu to make it easier for the users and also to categorise different types of feedback for the website / business owner.
 |
| Fig 3.4.2 Interactive drop down menu design |
 |
| Fig 3.5.1 Order page overall design |
 |
| Fig 3.5.2 Original Order Form |
The Order details section at the top was created based on the original form from the website. I organised the options into two main categories and created quantity selectors for each option. While I was still experimenting with ways to make it functional, after consulting with Mr Shamsul during Week 11, he suggested simply maintaining the form of the quantity selector without making it interactive or functional in this prototype.
Final Outcome
Prototype Link: https://www.figma.com/proto/BwEH2kaOi95gHHYhbQLLuw/ID-Project-2?t=BOD4tNSLyDPKqQcN-1
4. FEEDBACK
Week 10
The design now looks more like a pure healthy juice website, needs to be more colourful and playful.
Week 11
Overall good, the image in the hero section can be darker, the quantity selector don't have to be working.
5. REFLECTION
Overall, I enjoyed this project a lot. It was both fun and challenging to deeply analyse a website, identify its weak points, and think of ways to enhance it. In this project, I learned how to use Figma, which was very fun and useful. I really enjoyed exploring different ways to create layouts and design interactions. Although I believe my current design still has room for improvement, I am pretty satisfied with the outcome at this moment.
Comments
Post a Comment