INTERACTIVE DESIGN - PROJECT 2: WEBSITE REDESIGN PROTOTYPE
Nicole Ng Ying Yan 0382412
GCD60904 Interactive Design
Project 2: Website Redesign Prototype
1.0 INSTRUCTIONS
2.0 WEBSITE REDESIGN PROPOSAL
2.1 Prototype
Figma Link: https://www.figma.com/proto/ma52rpb4a7NIzewqlVkOyW/SLA-Website-Redesign?node-id=0-1&t=cKkqcArbIfw30uAM-1
Fig. 1.1 Prototype
Main feature of the prototype
The redesigned website uses a blue, grey, and white colour scheme to highlight the credibility and gain the trust of potential customers. The high-contrast blue is to increase the readability of the font and to convey calmness and trustworthiness. A sans-serif font - "Inter" is used with contrasting thickness to build a clear visual hierarchy. Professionally taken images were used to replace the low resolution ones from the original website. Modular cards were used to organise and group relevant information together. Interactive buttons and form are created
A layout grid of 10 columns were used as a guide to ensure clear layout of the page. All page uses a full-width banner for the hero section. The HOME page uses a problem-solution flow approach by addressing the pain points of the target audience first, then present the solution and benefits of choosing this company. The PROGRAM page uses a two-card layout to simplify decision-making by clearly differentiating private vs. group lessons. The ABOUT page display stats, background of the company, and their values to establish credibility. The CONTACT page include direct and clear contact information, an interactive form, and a map to show their location. A FAQ section is also included to answer common questions upfront.
Design decisions and development process
The prototype was developed based on the wireframes created previously. However, some layout changes were made along the way to provide a more interactive and visually appealing user experience.
The first and most important thing I changed is the navigation bar. The original design was confusing as 2 headings were highlighted differently on every page that is clicked into. I changed it into a very minimalistic and simple navigation bar to help users indicate their page location clearly.
Fig. 1.2 Navigation bar
For the HOME page, cards were rearranged into a cleaner and more interesting layout. The dome shape for the testimonial section was changed to a simple rectangle as suggested by Mr. Shamsul to ensure consistency and tidiness.
Fig. 1.3 Home Page layout revision
I also noticed a lack of icons that were used in the original website, hence icons were included in every page for better storytelling and to provide graphic support to the text. All icons were imported from the Iconify plugin in Figma.
Fig. 1.4 Icons used
During the 2nd feedback session, Mr. Shamsul advised to maintain a consistent corner radius across all the buttons. To match them, I changed the corner radius of the "Book A Lesson" button from 20% to 40% to match the corner radius of the "Enrol Now" button.
Fig. 1.5 Buttons corner radius
For the CONTACT page, I improved the form and FAQ section to be more interactive and responsive by adding hover and clicking effects to indicate the actions taken by the target audience. Links were also added to all CTA buttons to simulate a more realistic usability testing.
How the prototype achieved the redesign goals
- Enhance credibility and professional appeal: Through a cohesive colour palette, layout with proper hierarchy, and organised testimonial cards, the website appears established, trustworthy, and reliable.
- Improve navigation and reduce page count for simplicity: By reducing unnecessary highlights of text and shapes, the navigation bar becomes clearer to navigate. Pages with similar content were combined into one page to avoid confusion and saves time for all users.
- Modernise visual design for better user engagement: Interactive hover effects, muted-colour backgrounds, and card-based layouts creates an engaging, comfortable and dynamic user experience.
- Enhance usability by improving content organisation: By having a clear navigation bar, scannable content blocks, and a problem-solution framework, it helps users reduce decision paralysis and guides users naturally to conversion.
3.0 REFLECTION
Overall, I really enjoyed this task as I get to be hands on and customise the design that I want. Although I was a bit lost when navigating through Figma, but I got more familiarised with the software along the way. I also got stuck halfway when certain animations weren't working, but I felt really accomplished after the issue is fixed and the prototype is able to run smoothly.
Comments
Post a Comment