INTERACTIVE DESIGN FINAL COMPILATION & REFELCTION

24.04.2024 - 03.08.2024 / Week 1 - Week 15

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media 

Interactive Design / GCD60904 / Section 04

Final Compilation & Reflection

TABLE OF CONTENTS


EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN

TASK 1: PROTOTYPE DESIGN

TASK 2: WORKING WEB PAGE

FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION


TASK 1: EXERCISES


EXERCISE 1: WEB ANALYSIS

WEBSITE #1

DIRTY DOG BEAUTY CLUB 

source/reference: https://www.awwwards.com/sites/dirty-dog-beauty-club

Fig E1.1 Overview/home page of DDBC website

PURPOSE AND GOALS

DDBC (Dirty Dog Beauty Club) is an e-commerce website primarily sells carefully crafted beauty care products for dogs and merchandise. These products are developed by pet owners, veterinarians, and beauty industry experts who aim to improve the lives of dogs and their owners. Additionally, DDBC is dedicated to supporting Service Dogs and destigmatizing Mental Health.

The homepage prominently features their bestselling product with the tagline "Vet-formulated grooming essentials for your best friend", accompanied by an intuitive navigation bar for easy exploration of product offerings and website purpose.

Overall, the website effectively communicates its purpose, fostering a community of dog owners and promoting pet well-being through intuitive navigation and engaging content.


VISUAL DESIGN & LAYOUT

Fig E1.2 home page of DDBC website

Fig E1.3 Tags of the website


DDBC website uses playful and vibrant colours, striking a balanced visual aesthetic that is both colorful and appealing. The use of solid colour to the background helps users focus better on the information, a noticeable improvement compared to the beginning of home page. 
The layout maintains a fun appearance without overwhelming complexity. Additionally, the inclusion of images enhances visual appeal, with cute puppy images evoking a sense of happiness and health, which aligns well with the products being sold. Typography is thoughtfully chosen, featuring large, easy-to-read text, clear hierarchy, and an organized layout, all contributing to a clean and user-friendly design.

Fig E1.4 home page of DDBC website

As shown in the image, the tagline is being blocked by the product placement, only becoming visible when scrolling down the page. Therefore, this issue could be improved by either adjusting the placement of the product or relocating the tagline to a different position.

Fig E1.5 displayed products

There are no issues with this layout; the hierarchy is clear, and the use of bold for the product names is effective. Arranging three products in a row creates an easy-to-follow design, and the colours look like they belong together.

Fig E1.6 Screenshot from DDBC SCIENCE page

The website effectively utilizes negative space to showcase information and graphics, allowing them to stand out without feeling cluttered. Nevertheless, in the 'why clean products matter' section, incorporating infographic elements or statistical graphics could further engage users and encourage them to delve deeper into the content.

Fig E1.7 Footer

The footer layout is tidy, divided into two sides, with additional details aligned to the left and the subscription aligned to the right, creating a balanced and visually appealing alignment.


FUNCTIONALITY & USABILITY

The website provides a simple and straightforward navigation bar, allowing users easy access to categories and information. Two icons represent options to sign up or log in, and access the shopping cart. In the footer, users can find additional details such as contact information, delivery and returns policies, and the option to make a donation (giving bark), etc.

However, there is a minor issue with the buttons on the navigation bar; when "about us" or "DDBC science" is clicked, there are no visual changes indicating that the button has been activated. Additionally, the page fails to reflect that the button has been clicked, which may lead users to accidentally press different buttons under the impression they are on a different page. In certain sections, they should include a 'back' button.

Fig E1.8 Home button(left) , Navigation Bar/Menu(right)
Fig E1.9 Footer


DDBC website uses quite an amount of Interactive elements, adding a fun and interesting touch while users are browsing. By relating myself as a user and customer, I had tried the interactions in the website.

Fig E1.10 Homepage parallax

The changes of cursor turns to a sad face when placed at the more negative side while it turns to a happy/smiley face when placed at the good side. 
Fig E1.11 cursor changes from smiley face to sad face

Interactive elements were used in the product section. By placing the cursor on a specific item, it creates a slightly zoomed-in effect to show the product 'popping out' of the box.
Fig E1.12 product enlarges when cursor is placed

Fig E1.13 Interactive buttons of ingredients

Fig E1.14 Puppy postcards with appreciation notes


CONTENT QUALITY & RELEVANCE

DDBC's organization into pages is skillfully executed for showcasing its content. Each page is thoughtfully curated to highlight relevant information and products, ensuring a seamless and engaging user experience.

ABOUT US:

Fig E1.15 'ABOUT US' page

This page displays the product team and their information, along with details about donations. 

I personally think that the details of the team members was a little too much, such as the positions were not really necessary to be mentioned.

DDBC SCIENCE:

Fig E1.16 'DDBC SCIENCE' page

This page shares knowledge while promoting their brand by explaining why 'good' products matters.

I believe that instead of using a paragraph to explain the reason of why clean products matter, they could make them into point forms/incorporating infographic elements or statistical graphics could further engage users and encourage them to delve deeper into the content.


SHOP NOW:

Fig E1.17 'SHOP NOW' page

Categories of Products are shown in labels. The purchasing page provides simple, well-organized and clear details in order for users to read faster and add items to cart.

In the purchasing page, detailed product information is presented alongside graphical elements to enhance visual appeal, potentially increasing users' desire to purchase the products. Reviews are also included below for buyers to gain insights from others' experiences with the product, aiding in their decision-making process.

Fig E1.18 checkout/product page

Fig E1.19 product reviews



RESPONSIVENESS AND COMPATIBILITY

Fig E1.20 Compatibility on different devices

The website is really responsive, fast loading time and smooth. However, the compatibility on the tablet device, in vertical view, could be improved.


WEBSITE #2

DRYROBE

source/reference: https://www.awwwards.com/sites/dryrobe 

Fig E1.21 Overview/home page of  dryrobe website

Fig E1.22 Home page of dryrobe website 

PURPOSE AND GOALS

Dryrobe® is an e-commerce website known for their original weather-proof change robe. It has pioneered a new category of clothing, establishing itself as a leader in premium-quality, versatile, and highly functional changing robes. The team is passionate about getting active outdoors. Through the dryrobe® Warmth Project, they are proud to support charities and non-profit organizations that share their values of promoting wellbeing through outdoor activity and protecting the environment. 


VISUAL DESIGN & LAYOUT

Fig E1.23 Layout and Design of homepage

Fig E1.24 Tags of the website

The website features a minimalistic layout predominantly using black and white colors. However, it avoids appearing plain and dull by incorporating images of athletes in natural settings, which imbues a sense of nature and real-life vibrancy. Thoughtful use of color in the images ensures alignment with the overall theme, creating a cohesive look. The balance between negative space and images is well-maintained. Notably, the photography featuring robes on models stands out, as the brighter colors of the robes contrast beautifully with the more subdued nature background

Fig E1.25 Layout of homepage
While the layout of the images and the color scheme of the photography were satisfactory, enhancing the Call to Action (CTA) buttons could further improve user engagement. Using a different color that contrasts more prominently with the background can make the buttons stand out, thereby increasing their visibility and encouraging users to take action.


Fig E1.26 Layout of Stories in homepage
Enhancing the visibility of text on the first image of the stories can be achieved by changing the cover of the image to a darker color. This adjustment would create a stronger contrast, making the white-colored text stand out more effectively and improving readability for users.

Fig E1.27 Layout in "Warmth Project"

Fig E1.28 Layout in "Warmth Project"



FUNCTIONALITY & USABILITY

Dryrobe's website design prioritizes user navigation by placing the search bar and navigation bar at the top of the page. Clicking on their brand logo in the middle conveniently directs users back to the main page, ensuring intuitive navigation. Additionally, in the footer, users can access further details such as contact information, FAQs, delivery and returns policies, and about them section, enhancing user experience with comprehensive accessibility.

Fig E1.29 Overview/home page of  dryrobe website
The "Shop Adults" and "Shop Kids" CTA buttons are prominently displayed and clearly labeled to direct users to the shopping page for adult and kids' products, respectively.

Fig E1.30 Product listing shown in main page

To enhance user experience, incorporating arrow buttons for navigation while viewing products could be beneficial. These buttons would simplify the process of exploring various options, enabling users to seamlessly move through the available selections. By providing intuitive navigation tools, the designer can ensure a smoother browsing experience, ultimately improving user satisfaction and engagement with the platform.

Fig E1.31 Quick preview of product

Incorporating a quick preview feature on the main page enables users to efficiently explore products without clicking into each one individually. This streamlined browsing experience facilitates comparison shopping and ensures relevance by displaying products based on selected categories. By enhancing usability and personalization, this feature empowers users to make informed decisions more easily.

Fig E1.32 Footer


CONTENT QUALITY & RELEVANCE

Dryrobe has effectively organized its categories and curated compelling content, providing users with clear clarifications and highlighting key features to enhance their browsing experience.

Fig E1.33 Menu- key features


Fig E1.34 "Our story" page
"Our story" page shows the story on how this brand was created, with wide and large images fills up the negative space and bringing a short description under every year.


Fig E1.35 "Sustainability" page
For this page, the content showcasing their dedication to taking actions that make a positive difference for the planet is displayed. However, I believe the amount of text could be shortened to make it more interesting.

Fig E1.36 Partners


RESPONSIVENESS AND COMPATIBILITY

Fig E1.37 Compatibility on different devices

The website is overall responsive, minor issues mentioned earlier was the cursor not being able to move to the side (in Fig E1.29). The website is also compatible with all devices.



EXERCISE 2: REPLICATE A WEBSITE 

Fig E2.1 Final Outcome for Bandit Running Website, Week 3 (08/05/2024)

Fig E2.2 Final Outcome for Ocean Health Index website, Week 3 (10/05/2024)

Fig E2.3 Final Outcome for  Bandit Running & Ocean Health Index



EXERCISE 3: CREATING A RECIPE CARD

Fig E3.1 HTML codes for recipe card in Dreamweaver

Fig E3.2 CSS codes for recipe card in Dreamweaver

Fig E3.3 Final CSS codes for recipe card


TASK 2: WORKING WEB PAGE


Link to webpage.
Fig T2.1 Final Desktop View

Fig T2.2Final Desktop View in PDF

 Fig T2.3 Responsive design screen recording



 
Fig T2.4 Final Phone View


Fig T2.5 HTML

Fig T2.6 CSS


FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION


Final website here !

Fig T3.1 Final webpage design for Tasty Chicken Rice


REFLECTION


Experience

Engaging in the tasks of creating a Figma CV, coding a personal webpage, and designing a single-page website provided a valuable learning experience. Each task presented challenges, from mastering new software and design principles to applying HTML and CSS. Through iterative design, problem-solving, and feedback, I enhanced my technical skills and design thinking. This journey emphasized the importance of planning, attention to detail, and adaptability, deepening my understanding of web design and user experience. These insights and skills will be invaluable in future projects and professional endeavors.


Observations

Throughout these tasks, I observed that effective web design requires a delicate balance between aesthetic appeal and functionality. User feedback and iterative design processes are crucial for refining and enhancing the final product. Including multimedia elements and ensuring the website is responsive greatly improves user engagement and accessibility. The attention to detail, coupled with a willingness to continuously learn and adapt, is essential for creating a successful and user-friendly website.


Findings

The process of creating the single-page website underscored the importance of simplicity and relevance in content selection to maintain user interest and serve the website's purpose effectively. Incorporating multimedia elements like videos and interactive maps enriches the user experience, while responsive design is crucial for accessibility across various devices. This project emphasized that balancing visual appeal with functionality is key to effective web development and highlighted the need for continuous practice and learning to achieve optimal results.


QUICK LINKS



EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN

TASK 1: PROTOTYPE DESIGN

TASK 2: WORKING WEB PAGE

FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION

FINAL COMPILATION & REFLECTION





Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION

Image
24.04.2025 - 15.05.2025  / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Task 1:  App Design 1 Self-Evaluation and  Reflection TABLE OF CONTENTS 1.  INSTRUCTIONS 2.  EXERCISES 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION  For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
Read more

INFORMATION DESIGN EXERCISES

Image
03.02.2025 - 17.02.2025  / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4.  FEEDBACK 5.  REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
Read more

APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO

Image
11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
Read more