Interactive Design — Project 2: Website Redesign Prototype

19.05.2025 - 22.06.2025 / Week 5 — Week 9

Chan Zhi-Ren Zenndan / 0369069

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 2: Website Redesign Prototype

1. Instructions


Document 1.1 Module Information Booklet (22/06/2025).

For this assignment, we were asked to turn our website redesign proposal into a functional, interactive prototype. The goal is to bring our design ideas to life by showing how the new site will look and work, focusing on visual design and user experience improvements.

1.1 The Prototype

Fig 1.1.1 Prototype view in Figma (22/06/2025).

The website prototype can be seen by clicking here.


1.2 Writeup of the Prototype

This prototype was created using Figma as a continuation of my website redesign proposal. The main goal was to clean up the original site by improving navigation, fixing the footer, and enhancing button interactivity, all while maintaining a minimalistic look. I also focused on sticking closely to the brand’s three-color palette and reinforcing key UI details like hover effects and consistent call-to-action buttons.

I designed five pages in total: the Homepage, which also works as the About page, Athletes, Schedule, Athlete Info, and Contact Us. The homepage gives a quick overview of Team Time and its history, and as you scroll, it shows their achievements in a clean, scroll-friendly layout. The Athletes page lists all the current athletes, and I added a new “Info” button that lets users click to view more details about each person. The Schedule page shows upcoming training sessions, which is useful for both current and potential members. The Athlete Info page is where those “Info” buttons lead, offering more specific content. For the Contact Us page, I added clickable buttons that follow my CTA style, even though I did not implement actual text fields. Across all pages, the footer stays consistent with clickable but non-functional social media icons like Instagram, Facebook, TikTok, etc. These were included just to show visual intent since full functionality was not required in the brief.

For the typeface, I used a font called Amiamie, which I originally came across in a web designer’s portfolio while doing the earlier web analysis assignment. It had the clean and structured look I was going for, and it fit well with the minimal style of the site. The color palette is limited to three main colors: pink, white, and black. I applied these across different areas like the CTA buttons, background gradients, footer, and header to keep things visually unified. The overall layout is minimal, grid-based, and clean, with plenty of white space. Since the original website source was taken down, I used a mix of stock images and screenshots from my earlier proposal to fill out the visuals. For icons like Instagram, Facebook, and TikTok, I used Figma plugins to pull in clean vector versions. I kept everything consistent by sticking to a minimal approach, trimming excess elements, and closely following the structure outlined in my redesign proposal. The result feels a lot more spacious, especially after taking into account feedback given during Week 9.

A big part of this prototype was making sure it felt smoother and easier to use compared to the original website. I focused on making navigation clearer, buttons more interactive, and the layout more user-friendly. Things like hover effects and consistent button styling were added to create a more polished experience overall. The site feels lighter and easier to move through, which was something I wanted to fix from the start. Even though the brief only asked for three pages, I chose to build all five so that I could test the full user flow early and make sure the whole site works well as a complete experience.

(510 words)

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1: Exercises

Image
23.09.2024 -27.10.2024 / Week 1 - Week 5 Chan Zhi-Ren Zenndan / 0369069 Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1 TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. FEEDBACK 4. REFLECTIONS 5. FURTHER READING 1. LECTURES Week 1 Typo_0_Introduction Typography is a fundamental aspect in any design studies discipline. Typography has evolved over 500 years: calligraphy > lettering > typography Calligraphy: refers to the writing styles, such as Blackletter and Round hand. Lettering: refers to the drawing of letters, such as drawing out the circumference of the letter. Typography:  the art and technique of arranging type to make written language legible, readable, and appealing when displayed. Font: refers to the individual font or weight within the typeface. Fig 1.1 Fonts. Typeface: refers to the entire family of fonts/weights that share similar styles. Fig 1.2 Typefaces. Typo_1_Development The Greeks changed the direction of writing w...
Read more

Typography - Task 2: Typographic Exploration & Communication

Image
21.10.2024 - 17.11.2024 / Week 5 - Week 8 Chan Zhi-Ren Zenndan / 0369069 Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 2: Editorial Spread TABLE OF CONTENTS      1. LECTURES      2. INSTRUCTIONS                  3. FEEDBACK      4. REFLECTIONS     5. FURTHER READING 1. LECTURES Week 5 Typo_5_Understanding The uppercase letter shown in Fig 1.1 suggests symmetry but, in fact, is not symmetrical. Baskerville Easy to see the two different stroke weights Each bracket connecting the serif to the stem has a unique arc. Univers It may appear symmetrical, but upon closer inspection, the width of the left slope is thinner than the right stroke. Fig 1.1 Letter 'A' in Baskerville (left) and Univers (right). The complexity of letterforms can be neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces—Helvetica and ...
Read more

Illustration & Visual Narrative - Task 1: Vormator Challenge

Image
25.09.2024 - 11.10.2024 / Week 1 - Week 3 Chan Zhi-Ren Zenndan / 0369069 Illustration & Visual Narrative / Bachelor of Design (Honours) in Creative Media / Taylor's University Task 1: Vormator Challenge TABLE OF CONTENTS 1. LECTURES 2. INSTRUCTIONS 3. VORMATOR PROCESS 4. REFLECTION 1. LECTURES Week 1 : Since there was no lecture, Mr Hafiz informed the students to review the material uploaded to Google Classroom. Week 2: The Bezier Game was introduced to the students, which is basically a game to practice using the pen tool. We were also taught how to use a few other tools and shortcuts in Adobe Illustrator, which would come in helpful in our Vormator exercise. Week 3: We learned about shape psychology and how each shape carries unique meanings. We had to see what shape our Vormator carries and try to incorporate its meanings into our design. We also learned and practiced using the shape builder and pathfinder tool, which would help us create patterns for our vormator. Back to...
Read more