Interactive Design - Project 02: Website Redesign Propotype
20/11/2024 - 07/12/2024 | Week 09 - Week 11
Koh Sher Wei | 0353816
Interactive Design | Bachelor of Design in Creative Media
(MIB) Instructions :
Task :
The objective of this assignment is to transform your website redesign
proposal into a functional prototype that visually and interactively
represents the proposed changes from (Project 01: Website Redesign Proposal). Building on our previous work, the prototype should demonstrate our
ability to apply design principles and UX strategies effectively,
showcasing the visual design improvements and user experience
enhancements in a tangible and interactive format.
Proposal Writeup:
As per instructed, I developed the prototype for Home page, and Contact
page, as well as Product page. The website is an e-commerce platform,
hence I felt it would be beneficial to develop the product
page.
To break it down, here are a few things I focused on while designing my
prototype:
COLOUR SHEME
Before starting on the page design, I had to determine the aesthetic and
overall vibe of the website. In my initial proposal from project 01, I
chose a colour palette that just didn't work very well with the aesthetic
I had in mind. Although it was closer to the original website's colour
theme, I found that it was a very difficult palette to incorporate into
modern designs.
Initial colour palette (left), New colour palette (right)
Instead, I opted for a different palette with some bolder, but lighter
shades of yellow and blue. In the new palette, I had a wider range of yellow
to work with, as well as a more solid blue tone for contrast.
TYPOGRAPHY
As mentioned in my proposal, the original website used typefaces that I
felt were unsuitable for an art supply website. So my goal was to choose a
font that is nice and sleek but is not overbearing. "Tuffy" was the font I
chose because it looked simple, clean but not too formal. Additionally, I
also used "Belleza" font in the hero section to give off a chic vibe to
drawn attention.
"Tuffy" font (left), "Belleza" font (right)
LAYOUT
The layout for my homepage is arranged in a way that showcases the
identity of the website. So the hero section is large and displays texts
that helps users better understand the purpose of this website. Followed
by a category section to make navigation fast and easy for users that are
looking to find products. Below is a banner that spans across the width of
the website to prompt new users to sign up for updates. This plain banner
also gives users a break from all the images, to reduce overwhelm. Then,
we have another section that allows users to browse through recent
favourites, just as any e-commerce platforms would provide
recommendations. Below is a standard footer.
The product page on the other hand, is simply separated into 2 sections
(left and right). A smaller section of categories is provided on the left
for convenient navigation, while the products are displayed in rows of 3 on
the right, with a "view more" button. Again, this is to not overwhelm users
with too many products in the initial impression.
As for the contact page, it just contains a simple and direct box that
allows users to fill up a form for any questions and enquiries.
KEY FEATURES
Menu Bar:
- The menu bar provides easy navigation between pages on the left, with the "Contact", "Stores", "Products" button.
- A logo in the middle to navigate to Home page.
- Icons for shopping preferences "Profile/log in", "language", "Country", "Cart", and "Search" on the left.
- It also stays on top of the page while scrolling, so users don't have to scroll up every time.
Hero Section:
- A carousel that switches between images with different texts.
Category Section:
- Is also a carousel display with arrows for back and forth navigation.
Interactive elements:
- There are boxed buttons like "shop now" and "stores" with hover actions that changes the colour of the box, and click to navigate to other pages.
- Search icon can be clicked to prompt a search bar, with a cancel button.
- Language and Country buttons have dropdown lists.
- Product page has hover action for each product, allowing users to quick add an item.
Footer:
- Contains details about the website that users might want to know.
- Text details have hover actions.
CONCLUSION
I aimed to design a prototype that conveys to users through its aesthetic
appearance. The main issue as stated in my proposal, is that the original
website has a cluttered layout and is generally not pleasing to look at.
This is a huge problem considering they sell art supplies and is catered
to a majority audience of artistic individuals. Hence, the overall
aesthetic should be pleasing to look at, and comfortable to browse. Which
is why, using a soft yellow for the background is necessary. The imagery has also been updated with better looking photos, to improve
the overall aesthetic of the website.
Furthermore, the original website contained a lot of unnecessary and
extra navigation buttons/steps that is frustrating to use. So my solution,
is to simplify the navigations as much as possible, by including a
"Product" page for users to browse through a variety of items, without
having to sort through specific categories. This is also a strategy to get
users to add more items to cart, as they may come across items that might
not have been in their initial list of purchase but realised that they
need.
As for the section with just the brands in the homepage, I've decided to
remove it completely. It just feels like an unnecessary clutter that users
would most likely ignore. I have yet to implement a space for the brands,
but It will just be a small section that is displayed in the "stores"
page.
