Labels

Interactive Design Project 1: Website Redesign Proposal

24/09/2025 - 4/12/2025
Ameera Rihana binti Remy Ansara
Bachelor of (hons) in creative media
Project 1

INSTRUCTIONS


Project 1: Website Redesign Proposal

Week 5
Recap

The objective of this assignment is to develop a comprehensive proposal for the redesign of an existing website. The proposal should demonstrate your ability to critically evaluate a website’s design and functionality, and to propose design solutions that enhance user experience, aesthetics, and performance. 

You are required to select an existing website which you feel has several design and UX issue and prepare a detailed proposal for its redesign. The proposal should address the following key aspects:
  • Current Design Evaluation
  • Functionality
  • Redesigned Goals
  • Target Audience
  • Design Proposal
  • UX Enhancements
__

Website Analysis
We are to choose a specific existing website that consists issues in terms of design and performance and make a thorough analysis.


The purpose of the website is to acquaint visitors with Little Bitty Burger Barn, showcasing its longstanding presence of over 15 years within the local community. It highlights the restaurant’s acclaimed reputation featured in notable media outlets and recognized for serving some of Houston’s best burgers while encouraging visitors to connect, visit, or explore its offerings. The site embodies the brand’s core values of quality ingredients, delicious simplicity, and strong community ties.

1) Current Design Evaluation

a) Layout
The layout is relatively simple and linear. The content flows vertically from hero image to testimonials to “Who We Are” section to contact info. Simplicity aids clarity, but the page could benefit from more visual hierarchy for an example distinct section breaks, varied grid layout to reduce visual fatigue.

b) Color Scheme
The palette uses typical burger-shack tones (dark nav bar, white background, red/orange “highlights” in food imagery). However, accent colors are subtle and inconsistent because there is little contrast between content sections which can make reading blend together.

c) Typography
Heading fonts are clear and legible. Body text is readable but could be improved by more line spacing or differentiation such as using a more distinctive font between headings and body. Some text like 'testimonials' is overlayed on images and sometimes lacks sufficient contrast for easy reading.

d) Imagery
The use of large, close-up burger and food images works well to trigger appetite and establish brand character. However, many images on different pages appear compressed or low resolution, which can weaken perceived quality. Also, more consistent image style like lighting, angles and framing would strengthen brand identity.

e) Overall aesthetics
The site gives a friendly, local “burger shack” vibe which aligns with the brand’s messaging family friendly and hand-crafted burgers. Yet the design feels slightly dated and could benefit from small enhancements to elevate the look.

2) User Experience (UX)

a) Usability
Users can access key information such as menu, contact and hours quickly which is good. The testimonial section is visible without scrolling too far. However, the “Submit” form fields are small and basic; there is no indication of validation or response time, which may hamper form usability.

b) Navigation
The menu bar lists 'Home', 'About', 'Feedback', 'Menus', 'Menus (New)', and 'More'. It is straightforward, but duplicated menu items like 'Menus' and 'Menus(New)' may confuse users. The 'More' dropdown is unspecified thus clearer labeling would improve navigation.

c) Accessibility
Overlay text on images may have poor contrast that could hinder readability for users with bad vision. The site lacks visible alt text descriptions for some images and the large hero image does not appear to have ARIA labels or descriptive captions for screen-readers.

d) Responsiveness
On desktop the site appears fine. However, the description “Use tab to navigate through the menu items” in the code suggests some awareness of keyboard navigation, but testing on mobile reveals the text sometimes overlaps or becomes cluttered. 

e) Areas for Improvement
Duplicate for navigation items can confuse users. There is poor contrast in some overlaid-image text sections that can reduce readability. Image load time might take some time due to large file sizes and optimizing them could improve the performance. The menu page is very long and static, adding filters or category tabs might improve the user journey. Accessibility can be enhanced with descriptive alt text, better contrast, skip to content links for desktop users.

3) Functionality

a) Load Times
On desktop, the homepage loads reasonably quickly, with the hero image and navigation appearing promptly. However, the large food-photography hero image and multiple full-width images further down the page may delay load time on slower connections. On mobile networks or older devices, users may experience a slight delay with image rendering and scroll lag due to high resolution assets and the long vertical layout.

b) Interactivity
Navigation links work and contents scroll smoothly. However, some interactive elements could improve when the form fields are basic and there is no visible loading indicator or progress feedback when submitting which may leave users uncertain if their action succeeded.

c) Compatibility
On desktop browsers, the site displays correctly with functioning navigation and layout. On mobile devices, the layout responds and rearranges elements vertically, which is good, but some sections appear cramped or the navigation menu becomes long and less manageable. 

d) Areas for Improvement
  • Image Optimization: Large high resolution images slow initial load and may impact mobile users. Therefore, optimizing and using responsive image formats would help.
  • Form Feedback & Validation: Providing clearer interactive feedback such as loading spinner and error messages will enhance trust and usability for forms.
  • Mobile Navigation & Layout: On smaller devices, the long vertical page and navigation duplication may confuse or overwhelm users. Implementing collapsible menus or sticky headers could improve experience.
4) Redesign Goals

a) Objective
The main goal of the redesign is to create a more modern, user-friendly, and visually cohesive website that better reflects the brand identity of Little Bitty Burger Barn while improving the overall browsing experience for users.

b) Improved Usability
Simplify navigation and site layout to make information such as menu, contact details, and online ordering easier to find. This includes organizing sections logically, enhancing mobile responsiveness, and ensuring accessibility for all users.

c) Modernize Visual Design
Update the color scheme, typography, and layout for a cleaner, more contemporary look while maintaining the restaurant’s casual, fun brand personality. Consistent visual hierarchy and better spacing will improve readability and aesthetic balance.

d) Enhance Brand Alignment
Reinforce the restaurant’s identity through imagery, tone, and design elements that reflect its unique local charm and high-quality food. Integrating authentic photography and consistent branding will help build stronger recognition and trust.

e) Increase Engagement
Encourage users with clear to call action such as 'Contact Us', 'Order Now' and 'See Menu'. Additionally, adding simplified forms for reservations or inquiries.

f) Optimizing Performance
Compressing images, reduce unnecessary scripts and optimizing code for faster access across devices.

5) Target Audience
The website mainly caters to local diners, casual food lovers, and families looking for a relaxed dining experience with quality burgers and comfort food. The audience includes both new customers discovering the restaurant online and regular patrons seeking menu updates, promotions, or online ordering options.

6) How the redesigns meet their needs?
  • Improved Navigation: Easier for users to find menus, hours and contact information without confusion.
  • Clear calls to action: Simplify the process for customers who want fast service or directions.
  • Enhance visuals and typography: to showcase a better atmosphere and menu of the restaurant to make it look appealing for first timers and food lovers.
  • Consistent branding and engaging visuals: strengthen trust and make the restaurant more memorable among competing local eateries.
7) Design Proposal


Fig 1.1 Mood board


Fig 1.2 Visual References


Fig 1.3 Wireframes


Fig 1.3 Typography

Rationale

Mood board: The mood board establishes the foundation of this concept through bold, flavorful visuals and a vibrant palette. The color palette mainly consists reds, oranges, yellows and greens that evoke freshness, energy and enthusiasm that often associated with fast food and dining experiences. These hues communicate warmth and friendliness that fits the tone of the chosen website.

Visual references: The visual references further support this direction by showcasing contemporary brands and websites that reinterpret retro aesthetics through clean layouts, structural grids and dynamic photography. These references guide the balance between vintage inspiration and modern execution to ensure visual harmony, readability and a strong identity suitable for digital platforms and prints.

Typography: Poppins Extrabold is used for headers, giving a bold, geometric and confident look that matches the design’s energetic tone. Nunito Sans complements it for subheaders and paragraphs with its smooth, readable style. Together, they create a clear, approachable and playful typography hierarchy that reflects retro food theme.

8) UX Enhancements

a) Simplified Navigation
  • Implement a clear, consistent navigation bar with concise labels for example (Home, Menu, About, Order, Contact).
  • Add a sticky header while scrolling for easier access.
  • Merge the duplicated links to avoid confusion (Menus, New menus).
b) Better content organization
  • Structure information in logical sections, placing key details (hours, location, contact info) in visible spots like the homepage and footer.
  • Introduce an FAQ or “What’s New” section to improve transparency and engagement.
  • Group menu items under easily scannable categories with appetizing visuals and short descriptions.
c) Enhanced Interactivity
  • Include clear call-to-action buttons like “Order Online” and “View Specials” to drive user engagement.
  • Add hover animations and subtle transitions to make browsing more dynamic without overwhelming the user.
  • Improve form usability by adding visual feedback such as confirmation messages and error indicators.
d) Improve Visual Hierarchy
  • Use consistent typography and spacing to enhance readability.
  • Incorporate a modernized color scheme that aligns with the restaurant’s fun, casual identity while maintaining visual harmony.
Final Compilation of Redesign Website Proposal
P1 interactive design by Ameera Rihana


Project 1: Website Redesign Proposal, PDF

Labels:

Comments

Post a Comment