Russell Orchards Responsive Redesign

Practice the workflow of redesigning a simple website. Identify design flaws of an existing website, and recreate a more effective, responsive website design.

The layout of a website is critical for effectively conveying information to a user. In this project, I will analyze and redesign the web page for Russell Orchards, a popular farm and apple orchard in Massachusetts. Their website details sufficient information about the orchard, but the website has many usability problems and can more effectively convey information in a different format. My redesign will focus on simplicity and enhancing usability.

I chose to redesign the website for Russel Orchards because I found the website difficult to interact with when I tried to plan a trip to the farm; it took me too long to find information about pricing and time for apple picking. An image of the website is shown below.

Finding Problems

Usability 👥

How easy and pleasant the features are to use

The logo for the website disappears when the user scrolls down. When the user returns to the tab, it is not immediately clear which website they are viewing.
The menu selection is on the side, which isn’t very intuitive.
There is too much text all at once. The entire webpage is displayed to the user at all once, and there is no interactive scrolling. There is no section of text that summarizes the goal of the website.
The background is very distracting and makes it difficult to read text.

Memorability 💭

When users return to the design, how long will it take for them to establish proficiency?

Many of the categories on the menu bar can be grouped together. Having too many is overwhelming for the user.
In the top right corner, under “Pick Your Own”, a portion of the website is in a different highlight and text color, falsely indicating there may be a hyperlink or interactive portion
Social media is presented at the top right corner, as well as the bottom left corner.
There is repetitive information:
- The types of available apple are described twice on the page
- Hours for the farm are listed three times across the website.

Learnability 💡

How easy is it for users to accomplish tasks the first time they encounter the task?

There are blank squares at the bottom right corner, which may confuse the user
Under “In the Store Now”, the phrase “zero food miles” is vague. A user may not know what that is.
Font sizes, color, and text style (ex. Bold or italics) are not consistent with any theme.

Accessibility ⚙️

Can people with disabilities use the website and its tools?

The logo is missing alt text.
Under “Pick Your Own”, the green text on a purple background has low contrast, making the text hard to read.
There are inaccessible links. The blog leads to a page with “forbidden access”. At the time when I started the assignment, the links under the “Recipes” section were also inaccessible, but the issue has since been fixed.
There is an inaccessible event handler. The time on the top left corner of the website is only accurate when the page is launched. It is not updated consistently and can be misleading to the user.

Visual Redesign

After identifying issues with the website, I will redesign the home page to address these issues. Throughout the redesign process, there are two points that I kept at the forefront of my mind:

I assumed that the goal of this website is to draw as many customers to the farm as possible. This point is critical to many of the features that I changed on the website.
I tried to maintain as much content from the original website as possible. There are some items (ex. Blog and recipes) that I personally did not find critical, but I assumed the owners of the orchard are passionate about these points and would like for them to remain present on the website.

First, I created three wireframes using Balsamiq to address the issues I found.

The logo and menu bar should be pinned to the top of the page to provide users convenient access throughout their experience.
The menu bar has been moved to the top of the page because I found it to be more intuitive. I grouped the following categories together to streamline selections for the user:
- “Store” now includes the Bakery and the shop.
- “Events” now includes Winery, School Tours, Farm Animals, and Calendar
- “Contact” now includes Employment and Contact.
I removed the background image and plan to include a dynamic slideshow of images from the farm. This enables the user to see image without hindering readability of text.
I added a slogan to catch the eye of the user. This draws the user into this section of the website, which should provide a brief description about the farm. If the user only reads one portion of the website, it should be this block of text.
I included a dynamic button. The goal of the website is to draw as many users to the farm as possible, and this button should be the item that pops out most to the user.
Short description with hyperlinks of events/features that make this apple orchard unique from others.
I designated a larger portion of the website for the location. The location should be made evident to the users in order to draw them to the farm. The hours for the farm are all listed in one place.
Social media is blocked together in one portion of the website.

I created a visual design style guide to document specific details about the website. The guide documents interactive elements I have on my website, specifically with the buttons along the menu bar.

I then used Figma to create high-fidelity prototypes of what the website will look like, taking into account responsiveness of the website.

Responsive Redesign of Website

Finally, I created a website using HTML, CSS, and Bootstrap to demonstrate my high fidelity prototype. Given that that is my first project with HTML, there are a few issues that should be noted:

The menu bar has a margin that is not intended to be there. The margin is not present in Figma prototypes, but due to the Bootstrap template I am using, I was unable to remove it.
I used Bootstrap to create interactive buttons. Because there are limitations with Bootstrap, I was unable to provide all the buttons with the same intended design as provided in the visual design guide. Hypothetically, the website should stick with the color and theme as indicated in the visual design guide.

My final website design can be found here

Conclusion

The design of a website is critical to its effectiveness in conveying information to the user. Every website has a different goal (ex. Selling a product, providing information about an event, etc.) The goal of Russell Orchard’s website is to draw users to the farm by providing information about the opening hours, occurring events, as well as access to the farm.

This assignment has taught me the principles of design, as well as technical skills in HTML, CSS, and Bootstrap. I have learned the importance of designing a website around its central goal.