25/11/2024 - 7/12/2024 (Week6-Week11)
Amber Tan Jing Jing (0372746)
Interactive Design / Bachelor of Design in Creative Media / Taylors University
Project2 / Website Redesign Prototype
Table of Contents
1. Lectures
2. Instructions
3. Project2 / Website Redesign Prototype
4. Reflection
Lectures
Lectures have been completed in Exercises.
Instructions
Project2
Website Redesign Prototype
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.
Building upon our previous assignment (Website Redesign Proposal), we are now required to develop a prototype of the redesigned website. This prototype should reflect the proposed visual design and user experience improvements, providing a tangible representation of the final product.
Based on the wireframe I created in Project 1, I developed a prototype using Figma.
Figure 1.1 Project 1 Wireframes Screenshot
I made some changes while I was creating the prototype, .
Figure 1.2 Prototype Process, Week10 (27/11/2024)
Feedback from Mr. Shamsul (Week11): The Contact Page feels a bit empty, you could add a map or address, phone number and email to provide more information. For the Outlets page, the hero section can be moved up so that the images of the outlets are more visible.
Besides, I would like to add a card animation to the images of the juice and outlet images to make them more interactive and visually appealing, rather than just displaying static images.
Figure 1.3 Prototype Process (add card animation), Week11 (4/12/2024)
Lastly, I added links to their social media profiles on the Facebook and Instagram icons.
Figure 1.4 Links to social media profile, Week11 (4/12/2024)
Below are the screenshots of my prototype layouts.
Figure 1.5 Home page Layout
Figure 1.6 Menu page Layout
Figure 1.7 About page Layout
Figure 1.8 Outlets page Layout
Figure 1.9 Contact page Layout
Website Redesign Prototype link:
A Brief of my Prototype:
Key features of the prototype
The overall design style of the prototype is aimed to be simple yet modern. The main color of my website is red. This is because red color is the main color of the Juicy Juice brand so I kept it. The background color is pink because I think white background is monotonous. For the hover state of the buttons, I used orange, which creates a vibrant contrast with the main red theme. These color highlight the lively and enthusiastic brand character of Juicy Juice. For the fonts, I chose sans serif typefaces: Oswald and M Plus Rounded 1c. These fonts were selected for their clean and easy to read. The layout also balance text and the image. For example, in the hero section, I placed the image on the left and the title on the right. The image is the best features the best selling juice and its colors align with the primary theme of my design—red.
Design decisions made during development
First of all, I would like to introduce my navigation bar. It includes Home, Menu, About, Outlets, Contact and a logo of the brand. My navigation bar is "sticky" at the top of the page. It means when you scroll down, the navigation bar will fixed at the top of the page. So that the important links are always easily accessible. Besides, I also added a hover state to the buttons which changes their color to orange when hovered over. So, the users can identify the page they are currently on and this makes the navigation bar more visual appealing.
The images are find from Juicy Juice social media platforms, google search and the Grab Food app. For the images of the juices, I find them from Grab Food app because its images already have a red background, which aligns with the brand's main color. This approach saves my time on editing.
How the prototype addresses the objectives set in the redesign proposal
As I mentioned in the Proposal (Project1), the original website only gives a few images of juices. Menu part only gives the juice name. No image is very boring and unattractive with just text. To improve visual appealing, I added images to enhance visual appealing. Besides, I added card animation to the images of the juice and outlet images to make them more attractive, rather than just displaying static images.
Besides, the original website “Menu” section was not intuitive enough, and users needed to click button to see specific content. So I added a "Best Sellers" section to the main page to display pictures and names of several best selling juices. Users can see the main drink selections as soon as they enter the page. If they want to see more selections, they can click on the button to view more content.
In addition, the original website "Home" page, the images size are not the same size. Some big and some small. So I choose the picture which are the same size make it look more balance.
Furthermore, the navigation bar in the original website is on the left which block some of the images. So I decided to put the navigation bar top of the page and it didn't block any images, features and text. Besides, It is easy for user to navigate too.
ReflectionThis was my first time using Figma, so I spent some time getting familiar with it. I watched some tutorials from Youtube and followed them step by step. Gradually, I became more familiar with the platform. I first create home page based on my wireframe. The other pages were conceptualized through my imagination.
By doing the prototype I have some idea of my final project. This process helped me visualize how the design will translate into a functional website. While I was working on the card animation, I found that I couldn't simply copy and paste the entire card and change the text and images. If I do so, the copied card wouldn't maintain the same functionality as the original one. I need additional adjustments to ensure consistency. I spent some time while doing the card animation because I had to work with multiple images.
Overall, creating the prototype make me understand better of my design and provided references for my final project.
Comments
Post a Comment