Started

NAME: Miao Xinjun

STUDENT I.D: 0379525

Interactive Design Project1

WEBSITES

REDESIGN

PROPOSAL

TABLE OF CONTENT

1. Topic Selection
2. Website Analysis
3. Redesign Goal
4. Design Proposal
5. UX Enhancement
6. Moodboards - References
7. Wireframes

1.0 TOPIC SELECTED:

The eggShad

Designed by Chickens (c) 2024

Topic Selected

The Egg Shed @Little Verzons Farm is a specialist food production unit based in Herefordshire, UK.

​

The website is designed to promote handmade food services and venue rental.

​

Page 2

Project 1

Interactive Design

Page 3

2.0 WEBSITE

ANALYSIS

2.1 CURRENT DESIGN EVALUATION:

​

• Layout
• Color Scheme
• Typography
• Imagery
• Overall Aesthetics

2.3 FUNCTIONALITY - WEBSITE’S PERFORMANCE:

​

• Load Times
• Interactivity
• Compatibility Across Different Devices and Browsers

2.2 USER EXPERIENCE (UX):

​

• Assess the site’s usability
• Navigation
• Accessibility
• Responsiveness

2.2 User Experience

2.0 WEBSITE ANALYSIS

Page 4

2.1

Current Design Evaluation

2.1 CURRENT DESIGN EVALUATION:

​

• Layout
• Color Scheme
• Typography
• Imagery
• Overall Aesthetics

2.1 Current Design Evaluation

Page 5

Layout

- Current Design Evaluation

2.0 WEBSITE ANALYSIS

There are certain irrational aspects in the layout of this website's homepage. As the first page users see when entering the site, the homepage directly shapes their initial impression of the website's functions and content. Therefore, the homepage layout needs to enable users to quickly grasp the website's theme. In the website "The eggShed", the homepage layout fails to meet the above requirements:

​

• First, the elements distributed evenly on the left half of the page do not highlight key information in the text. Similarly, the headings do not help users understand the page content at a glance. Users have to read multiple paragraphs to figure out the main content of the page and the website's theme.
• The images on the right are not aligned with the text; they seem to be randomly placed to the right of the text and do not help improve the page layout.

One advantage is that the navigation bar is concise and located in a position easy for users to find. The problem lies in the navigation content—it fails to allow users to intuitively understand the general content structure of the website and does not help enhance the user experience.

For Other Layouts

Regarding the layout of pages other than the homepage, one shortcoming is that many pages intended to convey introductory information to customers contain overly lengthy text. These pages lack typography design to highlight key information, and they also fail to consider how whitespace and information module layouts impact the overall visual aesthetics of the page.

This makes it difficult for users to quickly scan and locate the key information they want to focus on. It may cause them to lose patience while browsing the website, easily miss some content, and ultimately have a negative impression of the website.

​

2.0 WEBSITE ANALYSIS

Layout

Page 6

2.1 Current Design Evaluation

Page 7

Color Scheme

- Current Design Evaluation

2.0 WEBSITE ANALYSIS

The website uses green as its primary color tone. Its overall color palette is made up of two low-saturation greens—light green and dark green—paired with dark gray and off-white. The site designer chose a warm, low-saturation green (symbolizing "nature and vitality") as the main color. Compared to warm yellow (a color often associated with food), this green tone has unique advantages: it effectively showcases the favorable natural environment of the food production facility, thereby conveying to customers that the handmade food uses natural, high-quality ingredients.

​

Most of the text on the website uses white font against dark backgrounds and dark font against light backgrounds. This effectively enhances the contrast between text and background, ensuring the text is readable in terms of color matching.

Deficient:

​

1. A slight shortcoming is that the designer included three shades of dark gray (with no distinct color undertones) in the site’s color scheme. When users scroll down parts of the webpage, they will suddenly see large blocks of gray at the bottom—colors that clash with the warm green (the site’s main tone). This may leave users with a negative impression of the website’s visual effect. If these grays were replaced with light gray and dark gray with warm undertones, the overall color coordination of the webpage would be much more harmonious.

​

1. While browsing the homepage, I noticed that some text is placed on top of images or uses light gray blocks overlaying the images as backgrounds. Although these images have reduced their opacity, the contrast between the text and the images remains unimproved. This lowers the readability of the affected text and hinders users from reading and accessing information. Additionally, within the text sections with light gray backgrounds on this page, the title text uses white font. These titles are significantly larger in size than the body text, yet their poor readability—caused by the color combination—means they may go unnoticed as users browse the web page, which is unreasonable.

​

2.1 Current Design Evaluation

Page 8

Color Scheme

2.1 Current Design Evaluation

Page 9

Typography

​

- Current Design Evaluation

After browsing all pages of this website for the first time, I felt that many different font families appeared in my view during the process, which caused a certain sense of visual clutter.

​

To verify this, I organized the fonts used on the homepage and three pages under the first navigation section. After sorting out, I found that the website designer used more than four font families across these four web pages—including different font styles within each family. Moreover, from the overall perspective of the website, the probability of using the same font across different web pages is relatively low, indicating that the website adopts a variety of font families as a whole.

​

• The advantages and disadvantages of this approach are quite obvious:

​

While using more than four font families can add a certain level of artistry and expressiveness to the website, and in some scenarios of this site, they effectively distinguish between different types of information and adapt to various design needs.

​

However, it is equally clear that the excessive use of font types throughout the website is likely to cause visual interference to users' reading, distracting their attention while browsing. This not only reduces the user experience to a certain extent but also affects the overall visual effect of the website.

2.0 WEBSITE ANALYSIS

2.1 Current Design Evaluation

Page 10

Imagery

​

- Current Design Evaluation

2.0 WEBSITE ANALYSIS

Images should be one of the elements that clearly highlight a website’s theme and style in its overall design. They not only enhance the website’s visual appeal but also work to attract users.

​

Overall, the images on "The eggShed" website are clear with distinct themes, and they have a clear connection to the content the site intends to convey to users. However, some images lack refinement and aesthetic appeal—they are not highly engaging for users, nor do they do much to boost the website’s professionalism and credibility. Additionally, some images placed side by side have inconsistent sizes, resulting in an untidy layout of images on the page.

​

Based on the above analysis, I believe the website lacks a bit in overall aesthetics and seems to have no standout elements that are impressive enough to leave a lasting impression on users. While the various elements of "The eggShed" website are generally consistent with its theme, factors such as page layout and font typesetting prevent them from coming together to form a website with excellent overall aesthetics.

2.0 WEBSITE ANALYSIS

2.1 Current Design Evaluation

Page 11

Overall Aesthetics

​

- Current Design Evaluation

2.0 WEBSITE ANALYSIS

Page 12

2.2

USER EXPERIENCE

2.2 USER EXPERIENCE (UX):

​

• Assess the site’s usability
• Navigation
• Accessibility
• Responsiveness

2.2 User Experience

2.0 Functionality

Page 13

2.2 User Experience

Assess the site’s usability

​

• User Experience

Strengths:

​

1. "The eggShed" does not include excessive operational steps or complex interactions. The overall user flow of the website is simple and easy to understand—users do not need additional tutorials, making it easy to learn and less prone to errors. This may help users maintain sufficient patience while using the website.

​

1. The number of quick-access buttons on the website is not excessive. Although some buttons are less prominent due to layout issues, they are not unreasonably hidden within the webpage. Additionally, their size is appropriate, making them easy for users to click and operate.

Weaknesses:

​

1. First, it is worth noting that irrational font typesetting and page layout cause key information on the homepage to lack emphasis. As a result, users cannot quickly and intuitively locate or access information about the website’s functions when they first enter the site. This is not conducive to helping users use the website efficiently to achieve their goals.

​

1. As a website designed to promote handmade food services and venue rental, one shortcoming of "The eggShed" is the lack of a quick access button for a booking platform—specifically for users who want to reserve its services. While this missing quick access is not strictly essential for users to use the website, adding it would make the site more convenient and easier to learn for users, simplify the operation process, better help the website fulfill its functions, and facilitate transactions. Of course, the position and layout design of the quick access button also need to be properly considered.

2.0 WEBSITE ANALYSIS

2.2 User Experience

Page 14

Navigation

​

• User Experience

Strengths:

​

1. The content of the top navigation and bottom navigation is clear, allowing users to easily read the text of each section in the navigation.

​

1. The navigation has a reasonable layout and is placed in positions on the page that are easy for users to find.

Strengths:

​

1. While a small number of simple navigation options can make the website more concise and easy to learn, the lack of side navigation and breadcrumb navigation limits the website’s convenience to a certain extent.

​

1. The names of the navigation sections are not specific enough. This may cause some users to struggle to understand the specific content corresponding to each section just by its name, making it difficult for users to quickly locate the page they need to visit.

"The eggShed" features two types of navigation: top navigation and bottom navigation.

Top Navigation

Bottom Navigation

2.2 User Experience

Page 15

2.0 WEBSITE ANALYSIS

The "The eggShed" website is very easy to operate, and users do not need to make complex or quick responses during interactions.

To gain a more specific understanding of the detailed content of accessibility in website design and the main user groups it serves, I searched for relevant information on Google Chrome. Through my research, I learned that accessibility emphasizes that a website must be accessible and usable by all users, including people with disabilities, the elderly, and other special user groups. Next, I will conduct an analysis focusing on three main user groups that have relatively high accessibility needs for the website.

For users with mobility impairments

For users with visual impairments

For users with color vision deficiencies

Accessibility

​

- User Experience

Page 16

2.0 WEBSITE ANALYSIS

For users with mobility impairments

For users with visual impairments

For users with color vision deficiencies

Strengths and Weaknesses

• Accessibility

The buttons on the website are not unreasonably placed in hidden areas of the page. They are moderately sized and easy for users to spot. The number of buttons is also relatively small, which prevents users from feeling overwhelmed by an excessive number of options while browsing or using the page—avoiding them missing any content.

​

Apart from the top and bottom navigation, the only link in the main pages is embedded within a block of text. Due to its low contrast with the background and lack of visual prominence, users who don’t have the patience to read all the text may overlook it during their first browse. This minor flaw can have a certain negative impact on the website’s accessibility.

Additionally, after inspection, all images (excluding backgrounds) on "The eggShed" have been assigned alt attributes, but no descriptions of the images’ content have been added within these alt elements. This means that while screen readers can detect the images, they cannot help users with visual impairments understand what the images depict. As a result, these users will be unable to access some information on the website, which reduces the site’s accessibility and may even cause it to lose some users.

The primary need of users with color vision deficiencies is to clearly distinguish between text and background. However, on some pages of "The eggShed", the contrast between text and background is weak, making the text hard to read. This will prevent users with color vision deficiencies from telling text and background apart, creating barriers for them when reading the website and accessing information. This fails to meet the website’s accessibility requirements.

2.0 WEBSITE ANALYSIS

2.2 User Experience

Page 17

Strengths:

​

1. The mobile page is convenient for one-handed operation.

​

1. Some buttons that are not prominent on computers are enlarged and placed in the middle of the mobile screen, greatly facilitating users’ ability to locate and operate them.

​

1. On mobile screens, compared with the font layout on computers, most text becomes easier to read because its size and layout adjust according to the mobile screen size.

​

​

The Homepage in Mobile Phone

Responsiveness

​

- User Experience

Responsive design requires a website to automatically adjust the display of various elements on the page based on differences such as screen sizes across different devices. I compiled the page displays of this website on computers and mobile phones as the basis for analysis. These two devices differ significantly in screen size and resolution, which can effectively demonstrate how the website appears on different devices.

Page 18

Responsiveness

​

• User Experience

Weaknesses:

​

Taking the homepage as an example, when the website is displayed on mobile phones, some elements that exceed the mobile screen size clearly do not undergo automatic size adjustment to fit the mobile screen:

​

1. Some images and title text are not set with percentage units. This causes the images and text to be directly compressed due to the narrow mobile screen, making them look unappealing on the page. The title text even overlaps and misaligns, rendering it unreadable.

​

1. Some text and their backgrounds extend beyond the mobile screen size, requiring users to swipe left and right to view the full content. This not only goes against user operation habits but also results in incomplete display of such information on mobile phones, making the page layout clearly unreasonable.

​

1. Additionally, in the bottom navigation section, there seem to be images that fail to display properly both on computers and mobile phones.

​

Based on the above analysis, the website has issues with its responsive design and cannot fully meet users’ needs when accessed on different devices.

​

2.2 User Experience

2.0 WEBSITE ANALYSIS

Page 19

2.3

FUNCTIONALITY

2.2 FUNCTIONALITY:

​

• Load Times
• Interactivity
• Compatibility Across Different Devices �and Browsers

2.2 User Experience

Page 20

2.0 WEBSITE ANALYSIS

Load Times

​

• Functionality

To better analyze the performance metrics of "The eggShed" website, I used PageSpeed to test it. The results show that the website’s overall performance data across all metrics is not impressive, whether accessed on mobile phones or computers. This may cause users to lose patience while waiting for the page to load (due to slightly longer loading times), leading them to leave—and the website will consequently lose some users as a result.

The Detection Result of The Website on PageSpeed

2.0 Functionality

Page 21

2.2 User Experience

Interactivity

​

• Functionality

The website features common interaction methods. For example, when the mouse hovers over a section in the navigation, the navigation section can expand and collapse; the logo on the left side of the top navigation and the text in the navigation are all clickable; the homepage includes text links and buttons, and scrolling the webpage is also one of the site’s interaction methods. These interaction settings are very common and easy to understand, which aligns with most users’ habits and expectations for operating a website.

​

Strengths and Weaknesses::

​

1. During interaction, users receive clear feedback when the mouse hovers over interactive elements—such as changes in button patterns or text color. This is an effective way to let users know that these elements are interactive.
2. However, the issue is that when users click on these interactive elements, there is no dedicated feedback for the "click" action. Combined with the website’s slow loading speed, this may result in users knowing which elements on the page are interactive, but failing to receive obvious click-effect feedback. This can disrupt users’ operations on the website and lead them to form a negative impression of the site’s performance.

The Screen Recording About Website Interactivity Design

After testing, the website can be used on mobile phones, tablets, computers, and several common browsers (e.g., Chrome, Safari, etc.). However, the various existing issues of the website identified in the previous analysis still persist.

2.0 WEBSITE ANALYSIS

2.3 Functionality

Page 22

Compatibility Across Different Devices and Browsers

​

• Functionality

Project 1

Interactive Design

Page 23

3.0 REDESIGN � GOALS

Page 24

3.0 Redesign Goals

1. Improve the readability of text information:

Ensure there is sufficient contrast between text and background to avoid unreadable situations, allowing even users with color vision deficiencies to easily distinguish text from background.

​

1. Enhance font typesetting on webpages:

Use different fonts, font sizes, and typesetting to create a sense of hierarchy between text modules of varying importance—highlighting key information and adding appropriate white space. At the same time, reduce the number of font families used across the website and unify the fonts for various types of information on different pages. These adjustments will help users browse and read more smoothly.

​

1. Optimize page layout:

Improve the placement of elements such as text modules and images on webpages to enhance the visual appeal of the layout, making the page cleaner and more aesthetically pleasing.

​

1. Enrich the website’s interactive design:

Refer to excellent similar websites and further expand the site’s interactive design based on existing interactive elements. Add necessary function buttons and essential interaction feedback to help users use the website more conveniently and improve the user experience.

​

1. Boost the website’s accessibility:
• For users with mobility impairments: Highlight clickable text links within text information and optimize button positions.
• For users with visual impairments: Add descriptions of image content to the alt attributes of images on the website. Ensure screen readers can detect and convey image content to visually impaired users, helping them gain a more comprehensive understanding of the website.
• For users with color vision deficiencies: Improve the readability of text information by ensuring sufficient contrast between text and background to prevent unreadable situations, allowing users with color vision deficiencies to easily distinguish text from background.

​

1. Refine the webpage’s responsive design:

Adjust elements such as adding percentage units to webpage images. This will enable the website to automatically adapt its layout based on different screen sizes and resolutions when displayed on various devices. Avoid issues like image distortion or disorganized text arrangement when the website is viewed on different devices.

​

Page 25

3.0 Target Audiences

1. Food Halls & Delicatessens:

Establishments such as restaurants or cafeterias that need to restock raw food ingredients, including raw meat and eggs.

​

1. Food Retailers:

Stores that need to replenish food inventory and purchase ready-made fresh deli items like sausage rolls and quiches.

​

1. Event Organizers:

Clients who need to rent venues and book catering services for events such as family dinners, outdoor parties, or weddings.

​

1. Outdoor Enthusiasts:

Visitors who enjoy having afternoon tea in natural settings or are interested in participating in events hosted by "The eggShed," such as outdoor music workshops.

​

Project 1

Interactive Design

Page 26

4.0 �REDESIGN

PROPOSAL

Page 27

Visual Design Concepts

1. Ensure good readability of text information:

​

• Remove the background images behind some text and retypeset the text, or replace the background images with ones that create strong contrast with the text (e.g., high-quality images with simple, uncluttered content, ample white space, a certain aesthetic appeal, and suitability for overlaying text).

​

• Ensure text on light backgrounds is dark and text on dark backgrounds is light, making it easy to read.

1. Improve font typesetting:

​

• Reduce the number of font families and unify the website’s overall fonts, while confirming which fonts correspond to different types of information. Standardize the size and line spacing of text at different hierarchy levels across the entire website.

​

• Highlight key information and clickable text links through typesetting to help users quickly locate critical content on the page.

​

• Increase the sense of hierarchy between different text blocks to avoid large chunks of text being clustered together, which would diminish users’ reading interest.

​

I searched for three fonts on Google to use for the website’s overall redesign:

​

Playfair Display - Designed by Claus Eggers Sorensen:

For Heading: Playfair Display - Designed by Claus Eggers Sorensen:

Sub-heading: Bentham - Designed by Ben Weiner:

For Main Text:

and

Text Link:

Page 28

Visual Design Concepts

Enhance page layout:

​

• Refer to the layouts of excellent websites in the same category to redesign this website’s layout and rework the arrangement of elements (such as text blocks, images, and buttons) on the page.

​

• Revamp the website’s current simple and dull layout to boost its design appeal.

​

Page 29

Visual Design Concepts

Enrich the website’s interactive design:

• Add essential buttons (e.g., quick-access buttons that directly take users to pages dedicated to bookings and purchases);

​

• Supplement necessary interaction feedback (when users click on elements like buttons or links to interact, the webpage should display a "clicked" effect as feedback to the user);

​

• Refer to Savor’s webpage interaction design to make text blocks appear in an orderly, layered manner as users scroll down the screen—helping users browse the website more smoothly and engagingly.

​

Page 30

Visual Design Concepts

Improve the website’s accessibility:

​

• For users with mobility impairments: Highlight clickable text links within text content and optimize button positions.

​

• For users with visual impairments: Add descriptions of image content to the alt attributes of images on the website. Ensure screen readers can detect and convey image content to visually impaired users, helping them gain a more comprehensive understanding of the website.

​

• For users with color vision deficiencies: Enhance the readability of text by ensuring sufficient contrast between text and background to avoid unreadable situations. This will allow users with color vision deficiencies to easily distinguish text from background and browse the website smoothly.

​

Refine the webpage’s responsive design:

​

• Add percentage units to elements like images and text on webpages, enabling them to automatically adjust based on screen size and resolution across different devices—ensuring the website adapts well when displayed on various devices.

​

• Ensure that when the website is viewed on devices with significantly different screen sizes and resolutions from computers (such as mobile phones), no extra webpage content extends beyond the device’s screen. This prevents issues like missing content in the display or the need to swipe left and right to view the full page.

​

Project 1

Interactive Design

Page 31

6.0 �MOODBOARD� / REFERENCE

6.0 Moodboard / Reference

Page 32

Moodboard / Reference 1: Savor

Savor is making delicious fats without harming the planet or compromising on taste. Savor’s new platform brings their vision to life, celebrating science, sustainability, and the joy of delicious food.

As a website focused on promoting its own brand of handmade pastries, it features smooth, high-quality interactive design—one of the most impressive design elements of the entire site. Elements like text and images on the page appear one by one as users scroll down continuously. This not only makes the page layout and typesetting easy for users to browse and read, but also elevates the website’s overall visual appeal, leaving a strong positive impression on users. It also does much to enhance the brand’s professionalism and credibility.

6.0 Moodboard / Reference

Page 33

Moodboard / Reference 1: Gusteau WordPress Theme

Gusteau is an elegant food, restaurant or coffee bar WordPress Theme with powerful features such as really nice parallax effect, easy booking with..Opentable? Various menu & gallery types.

This is a website that provides theme templates for food-related businesses such as restaurants and cafes. The theme websites showcased on this platform all have excellent page layouts and text typesetting, which has earned it many positive reviews from users—proving that these templates are highly useful for users. I selected one webpage design from them that is most suitable as a reference for "The eggShed." Like "The eggShed," it also uses numerous text blocks and various images as page elements and backgrounds. However, compared to "The eggShed," it has a well-executed page layout and typesetting: these images and text blocks seamlessly integrate into the webpage’s aesthetics, with a clear and concise layout and good readability. Moreover, it delivers a comfortable visual experience to users, helping them maintain sufficient patience and interest while browsing—far more effectively than dense text clusters. This is exactly what "The eggShed" needs.

INTERACTIVE DESIGN - SEC 2

Project 1

Page 34

THANK YOU