Assignment 02: Website Redesign Prototype

Assignment Brief

The objective of this assignment is to translate your website redesign proposal into a functional prototype. This prototype should visually and interactively represent the proposed changes, demonstrating your ability to apply design principles and UX strategies effectively.

Building upon your previous assignment (Website Redesign Proposal), you 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.

Prototype Development:

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.

Tools: Use prototyping tools such as Adobe XD, Figma, Sketch, or any other relevant software to create the prototype.

Key Pages to Include:

Homepage: Present the main design elements, including navigation, hero section, and key content areas.

Core Content Pages: Develop prototypes for at least two core pages (e.g., About Us, Services, Products) to showcase how the content is organized and presented.

Contact Page: Include a prototype of the contact page, demonstrating how users can interact with forms or other contact methods.

User Experience (UX)

Considerations:

Usability: Ensure the prototype reflects a user-friendly design, with clear navigation, intuitive interfaces, and accessible features.

Interactivity: Implement interactive elements (e.g., buttons, hover states, form fields) to provide a realistic user experience.

Submission: 

A fully functional prototype ACCESSIBLE via a SHAREABLE

link or as a DOWNLOADABLE file.

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.

A recorded walkthrough video (3–5 minutes)

demonstrating the prototype and explaining its features.

Progress

Prototype before consultation:

Wireframe:

        

Complete version:

             

I start with wireframe, confirming the layout and test with my colour palette that I set before in assignment 1. I then started to choose a cleaner font for my prototype. I have done two pages for the wireframe and 1 full complete page with information.

After having a short consultation session with our lecturer, we have discovered that the sidebar is not able to be created by using only html, it needs Java Scripts to create it. Thus, I need to figure out another way to add in the menu. I decided to do it the usual way, I put it on the top of the page. Then, the pages are quite compact with all the information. So, I need to add more whitespace for it. I also need to align the text but don't justify it. Overall, my design is not bad but it can be improved. 

I have a small discussion with my fellow classmates too, I asked for their opinion and my font is a little bit to decorative in their opinion, so I took some time to choose again my font. 

I then continue to explore more on the layout and finally come out with a version that I think it is better and can be used. 

Some version: 

   

Prototype after first consultation:

      

I have another consultation with our lecturer with this prototype, and I received some very constructive feedback from him. First, I need to reduce the curve for the curvy element in here, which is mostly the background for the content. Then, I need to change the menu alignment to make it cleaner and nicer to look at. I then need to make sure the margin, the spaces between each element are well aligned and are consistent throughout the pages. There are still some more comments givens too which I follow and adjust the layout. Even there are quite a lot of improvement need to do; I did feel relieved when my lecturer said that my design looks consistent and it's not bad. 

Final version

  

  

Copy the link to view the prototype:

https://www.figma.com/proto/Ebzr9yKq1wz7As6JzUcltF/ID-Prototype?node-id=188-580&t=Nf8zfIjuzAVM2eNB-1

Explanation for the design

Besides the compulsory pages which is landing/homepage and contact page to do, I choose 2 core content pages to design too, which is the book details page and my cart page. The reason I choose these two contents is because they have very important function in this book-selling website. 

I try to use the concept for the design which is art nouveau but soon I realized it is way too complex and hard to do so with my limited ability. Thus, I only added a little bit of the elements at the background, which is the flower print, it also brings out a vintage vibe which is very suitable for a second-hand bookstore in my opinion. At first, there are more colour used, but I then realized too much colour is way to distractive especially with all the book colours and other images going on on the website, so, I resulted it into using mainly green and white colour. 

The curve design is also help with soften the website design, brings out a more elegant and softer vibe to it. For the objectives of design, I think I did achieve some of it. Firstly, the clean and organized layout, compared to the original website, I think I did clean up the layout a lot and reduce a lot of unnecessary content in it. I also use less colour to create a cleaner visual. 

In the original website, the interactive element in it is very confusing and not that user-friendly. I now made the button and content more responsive with hovering action and motion. The button or cotent will change colour or in bigger size when users hovering on it. I hope this helps to better the user experience and makes the website more alive. 

For the fun elements in this website, I do not think I have the ability to do it in a very impressive form. But I try to make the interaction between the user and the website more alive, more interactive and responsive. I also try to design a cute and elegant design which helps to add a little bit nice visuals for the user to enjoy while browsing. 

1. Landing/Homepage

The menu is sticky on top of the page as usual, it is easy to locate and access whenever the user wanted to. In the menu section, it has 'Home' which is the homepage/landing page, 'Book Categories' where users can find categorized section of books in the page, 'Accessories' is where the store sells bookmarks, bags and such, 'Blog' is where users can find blog posts from the store, 'My Cart' is where users find all the books they added to cart and wanted to buy, 'Donate/Sell' is where users can donate or sell their second-hand books, 'FAQ' is where users can find some common facts and questions asked in the store, 'Contact' includes location and some contact information for users to contact the store. 

Besides the menu, I also add the logo and name of the store, and a search bar, which allows the users to access to it whenever they needed it. There is also a profile at the top right corner which allows user to go to their profile pages with their personal information. But I did not include a profile page in this prototype, so there will be transfer of pages for it. 

The first content users see will be a short welcoming from Books n Bobs, below it is updates from the store. I put these on top because the users should feel welcome to the store and get an immediate and newest update from the store. Then, we have several booklists followed by, so users can get a little peak about what the store have, they can click explore/browse/more to see more each of the contents. Next, we have a little review section from the customers to let our users know that this store has a good reputation, and their service is good too, so the users will be confident about their products. 

In the booklist, the user can slide through it, add to cart by clicking the button or add to wish list by clicking the heart button. In the actual website, the user can click right and left arrow to actually swipe the carousel but for this prototype, we can only swipe it manually. 

2. Book Details page

After the user select a book, they will be direct to a book details page which includes all information needed for the book. The book details book included a short description for the book, book condition, published date, author and etc. Below the book details is a recommendation list of books for the user, it depends on the book they select and buy to recommend. 

3. My Cart page

This is just a very simple listing page for user to view and check what they added into the cart, that they want to purchase. It has a common and simple layout that everyone must have very familiar with it. Users can check the price, total price, apply coupon, add or reduce the book they want to purchase. I keep the layout simple to make sure the process of checking can be fast and clear. 

4. Contact page

There is a big box which allow users to fill in their personal details and enquiry. Then, at the bottom, there are details for actual store like address, phone number and emails for the users to contact the store, if they want to contact them immediately.