26.05.25 - 22.06.25 (Week 6-9)
Celine Christabelle Patricia / 0374872
Interactive Design / Bachelors of Design (Hons) in Creative Media / The Design School
Project 2
Table Contents
- Instructions
- Prototype and Rationale
- Feedback
Instructions
Prototype
Key Features of the Prototype
The prototype introduces several improved features aimed at enhancing user experience, clarity, and accessibility. The overall structure of the website was simplified to avoid visual clutter, making the browsing experience more intuitive. The color palette applied across all pages are consistent to ensure visual harmony and reinforce brand identity. In total I have made 4 pages, 1 of them with dropdown menu. The home page with promotions and brief information of the store, about page with a dropdown menu to the shops, member, and career page, help page for further questions, and contact page for the store feedbacks.To keep the cheerful and playful essence of the brand’s identity, I incorporated mascot illustrations on selected pages, which add a friendly and engaging touch. Breadcrumb trails was on the pages to help users, understand their location within the site structure, especially those who are mobile users. Interactive elements such as buttons were enhanced with hover effects that provide immediate feedback and guide users during navigation. I also added a “Back to Top” link on longer pages, enabling users to scroll up with ease. Moreover, external links, such as links linking to social media or recruitment emails, were configured to open in new tabs, allowing users to explore additional content without losing their place on the original site. Lastly, larger button sizes were introduced to improve visibility and ease of use, particularly on touch-screen devices.
Design Decisions Made During Development
During design development, several decisions were made to align with both the visual and functional goals of the redesign. One of the first adjustments involved correcting the wireframe layout, which was initially not proportionally scaled in terms of width. Furthermore, to maintain a sense of consistency throughout the website, I applied a uniform layout format across all core pages. To preserve the brand’s identity of being joyful and vibrant, I included mascots on the website pages. For interactivity, hover effects were added to all buttons and clickable elements to enhance usability by providing feedback and making interactions more responsive. Accessibility was another key factor in the design choices; buttons were made larger and more prominent to improve ease of use for users with varying needs, and all elements were designed with sufficient contrast for better readability. Additionally, external links were set to open in new tabs to keep users connected to the main site while allowing them to explore related content easily. These decisions reflect a balance between preserving brand identity and improving user experience.
How the Prototype Addresses the Objectives Set in the Redesign Proposal
The primary objectives outlined in the redesign proposal were to simplify the user interface, enhance visual consistency, improve navigation, and retain the brand’s joyful identity. The prototype effectively meets these goals in several ways. By simplifying the layout and removing unnecessary visual distractions, the new design makes it easier for users to find information and navigate through the site. The use of a consistent color palette, layout format, and typography throughout the pages strengthens the overall coherence and professionalism of the site. Addition of back to top button, breadcrumbs, consistent layout, creating a home page and lessen the amount of core pages from 7 to 4, has been the attempt to enhance this webpage.
Feedback
Week 8
I had trouble making the prototype because my link did not work and asked Mr Shamsul for feedback. He said that linking buttons cannot be done in the component, must be done in the button that is in the frame.
Week 9
Add promotions for the homepage so it looks more engaging, do not blur the pictures. Make the font size smaller and add a contact page for users to contact the store. There is no need to add shadows or border in the webpage, just make it plain.
Comments
Post a Comment