INTERACTIVE DESIGN - PROJECT 2
INTERACTIVE DESIGN - PROJECT 2
26/05/2025 - 15/06/2025 / Week 7 - Week 9
Begimbaeva Aidina / 0380489
Interactive Design / Bachelor of Design (Honous) in Creative Media
PROJECT 2
TABLE OF CONTENT
LECTURES
Week 7
Box Model
During this week’s session, we focused on understanding the Box Model and the display property in CSS, which plays a fundamental role in structuring and organizing web layouts. Mr. Shamsul explained how the display property affects how elements are rendered on the page—whether they appear inline, as blocks, or in other layout models like flex or grid.
We learned that mastering the box model is essential for controlling spacing, padding, borders, and margins around elements. By experimenting with different display values such as block, inline, inline-block, flex, and none, we explored how content flows and behaves inside containers.
This session helped build a strong foundation for layout control in web design, and it gave me practical tools to create more responsive and visually structured web pages.
PROJECT 2
Chosen Website: Barnes & Noble
I began working on Project 2, which involves redesigning an existing website to enhance both its visual appeal and user experience. For this project, I chose the Barnes & Noble website. I found that while the site contains a lot of useful content, its interface feels outdated, cluttered, and not fully optimized for modern user needs — especially on mobile devices.
3.1 Prototype Home Page
In Project 1, I created a proposal for the redesign of the Barnes & Noble website. The proposal included a visual concept, layout ideas, and suggestions to improve user experience and modernize the overall design.
Before starting to create a prototype website, I prepared a basic visual system. First, I designed a frame using a grid to structure the layout and ensure that the elements are aligned neatly.
Then I selected a color palette that matches the style and mood of the brand. I also adjusted the font sizes and shapes to create a clear visual hierarchy and ensure the readability of the content. This preparatory work helped set the direction for further design and make the interface more holistic and thoughtful.
In typography, I used the Kaisei Tokumin headset, Kantumruy Pro:
Headings: 32 pt, bold, 120% line spacing.
Subtitles: 24 pt, Medium.
Main text: 16 pt, Regular, line spacing 150%.
Auxiliary text (for example, descriptions or buttons): 14 pt, Regular.
When choosing a color palette, I decided to use more calm and neutral shades so that they match the atmosphere of the book site and do not distract attention from the main content — the covers and titles of books.
After setting up the visual system, I moved on to creating a prototype book website. The first step was to build a low-fidelity wireframe to define the structure of the pages and the logic of user interaction.
I started from the main page, placing the main elements: a logo, a top menu with book categories, a banner with promotions, book collections (for example, "New", "Bestsellers", "Recommended for you") and a footer with contact information. The main goal was to create user-friendly navigation and structure the content so that the user could easily find the book of interest.
I paid special attention to the banner ad on the main page. Instead of using a standard promo image, I decided to adapt the ad to the overall design of the site so that it fits harmoniously into the composition and does not stray from the visual style. I changed the color scheme of the banner, adjusted the typography and added interface elements in a single style, which made the promo block more integrated and visually appealing.
This approach helped to preserve the integrity of the design, and also enhanced the user's perception of information without overloading the visual space.
After finalizing the visual style and key screens, I continued working on product cards, in this case books. I have developed a universal card template that includes the book cover, title, author, price, and the "Add to Cart" button. To ensure visual cleanliness, I used neat margins, a grid and a uniform design of the typography.
Then I went on to work on additional pages, such as:
Book categories where users can filter by genre, author, or price.
A page of the book containing a detailed description, rating, reviews, and a purchase button.
Shopping cart and checkout, where I tried to simplify the user's path and minimize distracting elements.
This palette helps to create a visually balanced interface where books remain the center of attention, and the design only complements the user experience without overloading perception.
- Book categories where users can filter by genre, author, or price.
- A page of the book containing a detailed description, rating, reviews, and a purchase button.
- Shopping cart and checkout, where I tried to simplify the user's path and minimize distracting elements.
After completing work on the main page and footer, I moved on to designing the next pages of the site. These include category pages, book cards, and a page with detailed information about the book. I tried to maintain a consistent style and structure to ensure convenient navigation and a holistic user experience at all stages of interaction with the site.
3.2 Prototype Core Content
After completing the visual design of all the main pages, I moved on to creating an interactive prototype in Figma. I've connected all the basic interface elements, including the navigation menu, buttons, book cards, and forms. This allowed us to test the user's path — from the main page to viewing the book.
After completing the main page, I moved on to creating interactive prototypes for the rest of the pages. I linked the design of the category pages, book cards, book description pages, shopping cart, and checkout pages. The main goal is to show how the user will navigate the site and interact with the main functions.
I focused on the key transitions to create a logical and user-friendly path while maintaining visual and stylistic integrity.
3.3 Final Outcome
Link: Figma Presentation
Prototype Page Breakdown
My interactive prototype for the Barnes & Noble website includes basic pages that cover the entire user experience, from book search to checkout. When designing, I tried to keep a clean, modern style with an emphasis on ease of reading and navigation. All pages are designed in a single visual style using a calm color palette and a structural grid.
1. Home Page
The main page opens the website with a large banner highlighting current promotions or new items. Below are collections of books: "Novelties", "Bestsellers", "Recommended". There is also a newsletter subscription section and links to key sections. The entire structure is built on a grid, ensuring cleanliness and visual balance.
2. Book Categories (Product Listing Page)
On the categories page, books are presented in the form of cards with the cover, title, author, and price. The user can easily scroll through the offers and select books of interest. I've provided filtering and sorting (by genre, price,) to simplify navigation.
3. Book Page (Product Details Page)
This page displays detailed information about the selected book: an enlarged image of the cover, description, author, rating, price and the "Add to Cart" button. Below are reviews and recommendations for similar books.
4. Contacts (Contact Page)
The contact page includes a feedback form, address, phone number, and email. I designed it in a minimalistic style so that nothing would distract from the main action.
5. The Style Guide (Typography & Style Guide)
At the beginning of the prototype, I added a block with the main elements of the style: the color palette, the fonts used, the sizes of headings and texts. This helps to maintain a single visual language on all pages.
REFLECTIONS
Experience
Working on the redesign of the Barnes & Noble website was a valuable learning experience. I was able to apply what I’ve learned in class about visual hierarchy, grid systems, and user-centered design. Building the prototype step-by-step — from wireframes to high-fidelity design — helped me understand the importance of structure, consistency, and clear navigation. I also developed my Figma skills further and learned how to create smoother user flows.
Observations
While analyzing the original Barnes & Noble website, I noticed that the content was rich, but the visual design felt outdated and cluttered. The typography was inconsistent, the layout lacked clear spacing, and the overall experience on mobile devices was less user-friendly. I also observed that key actions like “Add to Cart” and category navigation were not as intuitive as they could be. These insights guided many of my redesign decisions.
Findings
Through this project, I found that small design changes — such as improving the visual hierarchy, using more whitespace, and simplifying navigation — can significantly improve user experience. I also realized the importance of balancing aesthetics with usability. My final prototype offers a more modern, clean, and accessible interface while still reflecting the identity of a large bookstore. This redesign process reinforced the idea that good design is not just about how it looks, but how well it works for the user.
.gif)
Comments
Post a Comment