Interactive Design - Project 2
Interactive Design - Project 2 Web Prototype Redesign
26/5/25 - 18/6/25 (Week 6 - Week 8)
PAN RUINING (0378138)
Interactive Design / Bachelor of Design (Honours) in Creative Media
Project 2: Web Redesign Prototype
CONTENT
LECTURES
Week 9 Lecture Slides
INSTRUCTION
PROJECT 2 - WEBSITE DESIGN PROTOTYPE
Objective:
- The goal of this project is to transform our website redesign proposal into a functional and interactive prototype. This prototype will visually represent the proposed changes while demonstrating the effective application of design principles and user experience strategies.
- Building on the foundation of our earlier proposal, this phase focuses on turning ideas into a tangible, clickable prototype that reflects the intended aesthetics, structure, and functionality of the redesigned website.
Selected Website: https://www.sparkella.com/
This website, created by Hollywood actor Channing Tatum to promote his
children’s book The One and Only Sparkella, was chosen due to issues with
its color scheme, missing navigation bar, and layout design.
Website Redesign Prototype:
First, I took a closer look at the website and noticed that it contains
very limited content. So I decided to create a prototype in Figma with five
pages: Home, Books, About, Contact, and Shop.
Fig 1.1 Initial page design
After creating three pages, Mr. Shamsul gave me feedback saying that my design looked outdated. He told me not to limit myself to the original look of the website and encouraged me to redesign it. He also showed me some reference websites for purchasing kids’ books, which inspired me a lot.
Fig 1.2 Reference
This time, I decided to create the Home, Shop, About, and Product details pages, and place
the Contact section at the bottom of the Home page. I also included the
three pages that are linked by the "Buy Now" buttons on the Home page.
Here is the screenshot of my figma process for the new 6 pages:
Fig 1.3 Screenshot of figma process
I used the 'Interaction' tool to connect pages and elements by dragging a
link from the button to the target page or section. Additionally, I used the
same tool to create hover effect animations for a more interactive
experience.
Fig 1.4 Screenshot of figma process
Fig 1.5 Screenshot of figma process
Fig 1.6 Screenshot of figma process
Final Outcome：
Final Working Prototype Link: Website Redesign Prototype
Website prototype introduction：
Website prototype brief introduction:
This website, originally created by Hollywood actor Channing Tatum to
promote his children’s book The One and Only Sparkella, was chosen for
redesign due to several usability and design concerns. The original
website had issues with its color scheme, lacked a proper navigation bar,
and had a layout that felt outdated and visually inconsistent. These
weaknesses may lower user engagement, especially among parents or young
readers who expect a more intuitive and visually engaging browsing
experience. Since the target users include both adults and children, a
visually friendly and organized design is crucial.
Main functions of the prototype:
This redesign focuses on four main pages: Home, Shop, About, and multiple Product Detail pages. A Contact section is also integrated at the bottom of the Home page to enhance accessibility and improve the overall information structure.
During the design process, I began by restructuring the website’s navigation system. The original navigation bar lacked clear categorization and showed inconsistencies in placement across different pages. To address this, I created a reusable navigation bar component and defined a consistent structure: “Home / Shop / About”. This not only improves the visual and functional consistency across pages but also simplifies future updates and maintenance.
On the Home page, I redesigned the Hero section by selecting a more visually appealing background image and pairing it with a prominent title and clear “Buy Now” buttons to increase user engagement. Product displays are arranged in card-style layouts, with each card linking to its corresponding Product Detail page, allowing users to quickly access essential information.
The Shop page presents all products in a clean grid layout, enhanced with hover effects to improve interactivity. The About page uses a minimal and straightforward layout to convey the brand’s values and help establish user trust.
In the Product Detail pages accessed through the “Buy Now” buttons, I combined high-quality images, key product descriptions, and clear CTA buttons to guide users through a smooth browsing-to-purchase process. Throughout the prototype, I maintained consistent color schemes and layout logic to improve the overall coherence, usability, and professional appearance of the interface.
Development process:
The development of this prototype began with a thorough analysis of the original Sparkella website. I first identified several key issues, such as inconsistent navigation layout, scattered content modules, and a weak information hierarchy, which made it easy for users to get lost while browsing.
Based on these observations and by referring to similar website designs, I started the interface design process using Figma. My initial step was to create the navigation bar as a reusable component, which effectively avoided position inconsistencies across different pages and improved overall design consistency. Using Figma’s Auto Layout and Grid systems, I ensured that spacing throughout the pages was well-structured and responsive.
Visually, I adopted a modern and clean style while retaining the original brand’s lively and playful character. The homepage’s hero section was enhanced with larger, more prominent titles and call-to-action buttons. Product and event information were arranged using a card-based layout, making it easier for users to quickly scan and understand the content.
I also repeatedly tested the “Buy Now” button flows to guarantee that users could smoothly navigate to the product detail pages. Throughout the design process, I continuously refined font styles, padding, and element spacing to improve alignment and visual clarity.
This project helped me realize the importance of balancing creativity with practicality, and it strengthened my skills in layout planning, component reuse, and user experience design.
FEEDBACK
Week 9:
Mr. Shamsul said that my website design is outdated and needs to be
redesigned. He gave me some reference sites and emphasized that the
website should look clean and tidy. He also said that the fonts and images
should be smaller to make the user feel more comfortable when
browsing.
REFLECTION
Experiences
Project 2 was my first time learning how to use Figma to design a prototype. At the beginning, I felt a bit worried because our class missed two lessons during the holiday, which made it harder to keep up with the course. However, the online tutorial videos shared by Mr. Shamsul helped me learn the basics of creating pages, building frames, adding interactions, and designing in Figma. I went through two rounds of redesign, and with Sir’s advice and support, I gained deeper insights and a better understanding in the latest version of my design. Through these two rounds of design work, I gradually developed a clearer understanding of website design and modern design concepts. Overall, this project was a valuable learning experience for me.
Observation
I observed that clear navigation, a clean layout, and interactive
elements such as hover states and clickable buttons play an important role
in enhancing the user experience. In addition, I realized how much the
size of fonts and images, as well as the use of white space, can affect
how comfortable and enjoyable the browsing experience is for users.
Finding
I found that all UIUX design cannot be achieved in one go. It requires
continuous adjustment and previewing from the user's perspective to
understand their browsing experience. A good sense of aesthetics should
not be limited to a single style. Instead, it is important to explore and
learn from a variety of outstanding design works. Only by doing so can one
become a good designer.
Comments
Post a Comment