Interactive Design - Project 2

 

|| 10/17/2024 - 11/03/2024 (Week 4 - Week 6)

|| Bertrand Alden Gani / 0370471

|| Interactive Design

|| Bachelor Of Design In Creative Media

|| Project 2

INSTRUCTIONS

PROJECT 2

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 ONE core page (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.

The process:

First, I looked at my proposal for Project 1, trying to remember the idea that I had.

Then, I opened the Figma website and started to create a rough wireframes. 

Fig 1.0 First Attempt

In the process, I also decided to make some changes to the design especially the header and the layout because I find it look better than the original proposal idea.

Fig 1.1 Home Page Wireframe

Fig 1.2 News Page Wireframe

Fig 1.3 About Us Page Wireframe

Fig 1.4 Contact Us Page Wireframe

After that I added the images.

Fig 1.5 Adding images

Finally, I arranged the prototype interaction between pages and components.

Fig 1.6 Arranging Prototype Interactions

Submission:

Here is the final pages, in total there are 4 pages (Home, News, About Us, Contact Us).

Fig 1.8 Final Result

Figma link: link

Prototype brief :

Berkshire Hathaway is a prominent multinational conglomerate holding company known for its diverse portfolio of subsidiaries across various industries, including insurance, energy, retail, and manufacturing. Its website serves as a key resource for investors and the public, providing comprehensive information about the company’s operations, financial performance, and strategic initiatives.

My redesign prototype consist of 4 pages, including:

• Home Page

This page contains features such as live stock chart, latest news and short info about the company. The goal is to keep the users stay updated about the company and market stocks. There is also a contact button at the end of the page where the user will be directed to the Contact page.

• News Page

This page is where user can find news and information about the company. It is divided to three parts. "Latest news" contain the most up to date news, while in "Important news" you can find important information such as meeting schedule, event, etc. and lastly "Letters" compile all the letters and messages. There are also a search button feature where the user can quickly access the information simply by clicking the button and typing what they are searching. When the user click on the "Read More" button, it will direct them to the pfl file of that news.

• About Us Page

This page contains information about the company such as Goal&Purpose, Introduction and Commitment. 

•  Contact Us Page

This page is where user can connect with the company through submitting info such as name, email and inquiry. The company can reply back through submitted email.

 

During development, I decided to remove the original header part idea to make it look more neat and trendy. I also separated the original idea to few pages and made some adjustment to the design. The purpose is to avoid overloads of information in one pages and to make it look more up to date to current design trend.

The overall design perfectly address my proposal objective which is "to improve usability, modernize the visual appearance, enhance brand alignment, and create a more engaging user experience". I improved the usability by preventing overload of information in one page and adding feature such as live chart, search button, contact page, etc. I modernize the visual appearance by making some design changes to better suit the current trend design while also trying to keep the company identity. Ultimately, the redesign will significantly enhance the user experince and engagement, improving the user target scope, especially to younger generation.