Image for post
Image for post

Redesigning Ithaca’s Apple Harvest Festival Website — A UX/UI Case Study

Redesigning for Cornell students who have never been to the festival

Jack Wang
Jack Wang
Jan 13, 2019 · Unlisted

About Ithaca’s Apple Harvest Festival

Apple Harvest Festival, or Apple Fest, is an annual three-day celebration in downtown Ithaca. It attracts thousands of visitors each year, from local farmers and residents to students from nearby college campuses. There is a plethora of vendors selling food, drinks, pottery, clothing, and even sculptures. There are also performances from local bands and groups.

Task

In my INFO/CS 1300 course, Introductory Design and Programming for the Web, I had to redesign the current Apple Fest’s website to focus on a specific target audience and understand their needs and wants. Furthermore, I had to use HTML/CSS to build the website and make it responsive on desktop and mobile interfaces.

Image for post
Image for post
Source: https://www.downtownithaca.com/apple-harvest-festival/

Defining My Target Audience

With the aim of creating a website for a specific audience, I wanted to first figure out my target audience. After interviewing a couple of friends, I found that some of them have never been to Apple Fest. As a result, I wanted to redesign the website for Cornell students who have never been to Apple Fest before, particularly freshmen.

My target audience is Cornell students who have never been to Ithaca’s Apple Fest before, particularly freshmen. They have heard about some things about the festival, but not enough to understand what other food and entertainment activities it has to offer. Furthermore, they are not too familiar with Ithaca, and would like to know how they can reach the festival in downtown Ithaca.

User Research

With my target audience defined, I decided to interview people who fit the target audience to understand their needs and wants. Some of the questions I asked were:

  1. If you were to visit Apple Fest’s website, what kind of information would you expect to see?
  2. What excites you to go to Apple Fest?
  3. What discourages you from going?
  4. What kind of information would you like to know more about?

Discovering Needs and Wants

Through my user interviews, I discovered the needs and wants of my target audience. Below are some of the key needs and wants.

NEEDS

  1. Needs to go to Apple Fest, but does not know how to get there
  2. Needs to know what types of food there are
  3. Needs to know what to bring to prepare for the event as a first-timer
  4. Needs to know what events will be happening while there
  5. Needs to know how to get in touch with someone for help if needed
  6. Needs to know the operating hours of the festival

WANTS

  1. Wants to know what the popular stands are and the prices of the items
  2. Wants to know what kind of restaurants are available nearby
  3. Wants to know what are the highlighted events to pay attention to

User Persona

To better understand my target audience and their needs and wants, I developed a persona to guide my design process.

Market Research: How Other Festivals Design Their Websites

After understanding my target audience and identifying their needs, I needed to figure out how to design my website to provide a tailored user experience. To get started with brainstorming design ideas, I decided to take advantage of the examples provided in the assignment and explored how other festivals designed their websites. Below are the examples that I looked at for inspiration:

Designing for My Target Audience

With the information gathered from my user research, I wanted to design a site that not only addresses my users’ needs, but also presents the content in an engaging, minimalistic, and easy-to-navigate manner.

Satisfying User Needs and Wants

Below are my design ideas and choices to directly satisfy the user needs.

Site Map

To better understand the overall structure of the website and its contents, I decided to quickly create a site map.

Image for post
Image for post
Site Map of Website Redesign

Low-Fidelity Wireframes via Hand Drawn Sketches

Using pen and paper, I sketched out a rough draft version of the website redesign in both desktop and mobile interfaces.

Image for post
Image for post
Image for post
Image for post
Home Page — Desktop Version (left), Mobile Version (right)

Image for post
Image for post
Image for post
Image for post
About Page (left), Food Page (right)

Image for post
Image for post
Image for post
Image for post
Events Page (left), Transportation (right)

Image for post
Image for post
Image for post
Image for post
What to Bring Page (left), Contact Page (right)

Revising Based on Feedback and Constraints

Feedback

In my early stages of developing the website, I received feedback from a teaching assistant that made me reconsider my design choices. She recommended me to think whether it was necessary to include so many distinct pages to satisfy the needs of my target audience. Reviewing this feedback, I asked myself why each page was important.

Constraints

There were also a couple of constraints that I had to work with in order to successfully develop the website.

  1. Project Milestone Deadlines — The professor divided the assignment into 4 milestones, each with its own deadline. I had to not only satisfy user needs, but also requirements of the course. This led to prioritizing the needs of the users over the wants.

Visual Design

Color Palette

The color red symbolizes love, passion, adventure, and emotion. It is also associated with the color of apples. Therefore, I picked red to communicate the festival’s theme — the harvesting of apples.

Image for post
Image for post
Color Palette
Image for post
Image for post
Navigation Bar Color
Image for post
Image for post
Navigation bar links change color to yellow-orange (#FFC840) when hovered over.
Image for post
Image for post
Background Color of the Body
Image for post
Image for post
Heading, Subheading, and Paragraph Colors
Image for post
Image for post
Background Color of the Footer

Typography

Inspired by the Google Web Fonts Typographic Project, which is an amazing resource for pairing Google fonts, I decided to go with Fauna One and Playfair Display. These two fonts create a beautiful combination that is modern and easy-to-read.

Image for post
Image for post
Typographic Hierarchy

Draft Version of Coded Website

Below are screenshots of the draft version of the website.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

User Testing

To determine the usability of the redesigned website, I went on to conduct user testing.

Methodology

The tests were conducted with four participants who fit my target audience. They were asked to complete four tasks focusing on the functionality of the site and user satisfaction. While conducting the tests, I considered their first impressions, how they navigated through the website, the time it took them to complete the tasks, and how they felt about the tasks.

Tasks Assigned

1. You have never visited downtown Ithaca before and want to see if there is any information on the website to help you find your way to the festival.

Findings

Below are some of the key findings.

  • Users took a while to navigate to the transportation tab. It seemed that there was some initial hesitation in clicking on “transportation” to find information about traveling to the festival.
  • Users wanted to know when Downtown Ithaca Alliance’s office was open on the “Contact” page. Downtown Ithaca Alliance is the organization responsible for managing the festival.
  • Users were unsatisfied with the number of items on the “Food” page. Some made comments like “That’s it?” and asked if there were more items.
  • Users wanted to know more about the performers on the “Events” page. Some asked “what do they do” and “what are they known for.”

Refining Design Through Iterations

Using the feedback received from user testing, I went through multiple iterations of redesigning the website to make it more accessible, informative, and user-friendly for my target audience.

Redesign Choices

Below are some of the key redesign choices.

Image for post
Image for post
Refining the Home page to be more informative and welcoming

Image for post
Image for post
Increased white space makes browsing more comfortable


Image for post
Image for post
Renaming “Transportation” to “How to Get Here” for easier understanding and navigability

Image for post
Image for post
Added address and map of Downtown Ithaca Alliance to increase accessibility to its physical location

Responsive Design — From Desktop to Mobile

There are many things to consider when designing websites for mobile devices. Some of the things I had to consider include how mobile users engage with the content and the physical limitations that comes with touch. However, I wanted to make sure that the experience was still the same for my target audience.

Image for post
Image for post
Mobile Version of the Redesign

Website

Check out the demo version of the website redesign by accessing the link below!

What I Learned

Web design is extremely fun. I was able to redesign Apple Fest’s website for Cornell students who have never been to Apple Fest before, particularly freshmen. I was also able to work on my web development skills and build my second website ever using HTML/CSS.

Moving Forward

I realize that there is a lot of room for improvement. I could have spent more time on building a more consistent, typographic hierarchy. I could have implemented more content and features to satisfy my user’s wants. However, I had to work with constraints and realized that it was crucial for me to focus on improving the experience. I had to prioritize needs over wants and worked to deliver quality. If I had more time, I would’ve continued to seek feedback from my target audience on the website redesign, both desktop and mobile interfaces.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store