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

Redesigning for Cornell students who have never been to the festival

About Ithaca’s Apple Harvest Festival

Task

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

Defining My Target Audience

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

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

Discovering Needs and Wants

NEEDS

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

WANTS

  1. Wants to know what kind of restaurants are available nearby
  2. Wants to know what are the highlighted events to pay attention to

User Persona

Jason, a 18-year-old Cornell freshman, is studying Information Science. He plans on attending Ithaca’s Apple Fest in downtown Ithaca with a couple of his friends. This will be his (and his friends’) first time attending the festival. Furthermore, he is not too familiar with downtown Ithaca as he lives in a dorm and rarely has the need to leave campus. However, after hearing about the famous Apple Cider Donuts, he is curious to see what else the festival offers and would like to take the opportunity to hang out with his friends at the festival.

Market Research: How Other Festivals Design Their Websites

After exploring these festival websites, I realized that my website will most likely be different. The reason why is that my redesign focuses on creating a website that addresses my users’ needs.

These websites cater to target audiences different from mine, and some are even generalized to cater to a wider audience. However, these examples still helped me with brainstorming design ideas and inspired ways to organize content.

Designing for My Target Audience

By phrasing the user needs and goals into How Might We questions, I started brainstorming to generate design ideas.

Satisfying User Needs and Wants

Needs to go to Apple Fest, but does not know how to get there

How Might We help a first-time visitor navigate their way to Apple Fest?

To figure this out, I needed to understand how students currently travel to places outside of campus. While I can speak from my own experiences, I found out that students resorted to the following methods — walking, biking, taking the bus, and using Uber.

Design idea: Include a page about transportation with popular/common travel options like the public transportation system for Tompkins County New York, Tompkins Consolidated Area Transit (TCAT), and other options like Uber

Needs to know what types of food there are

How Might We help a first-time visitor discover the foods available at the festival?

When considering this, two types of first-time visitors come to mind — visitors either know some of the foods offered or have absolutely no idea. To inform, I would have to show the different foods vendors sell.

Design idea: Include a page on the foods offered with images and short descriptions

Needs to know what to bring to prepare for the event as a first-timer

How Might We help a first-time visitor feel prepared for Apple Fest?

Attending any event for the first-time is exciting, but the worse thing that could happen is being unprepared for it. From wearing the right clothes for the right weather to bringing enough money to experience the event fully, preparing for an event is hard and time-consuming. However, by gathering information from students who have attended the festival before and compiling it in one place as tips and suggestions, my target audience could avoid this uneasiness and feel more confident.

Design idea: Include a page that helps the user plan for their trip in terms of what to bring and what they should wear

Needs to know what events will be happening while there

How Might We inform a first-time visitor of the events that will occur?

Since the festival has many events (particularly performances from local groups and bands) at different times and locations, it is necessary to consider how to organize the information in a easy-to-read manner.

Design idea: Include a page on events with their respective dates, times, and locations in an organized manner

Needs to know how to get in touch with someone for help if needed

How Might We help a first-time visitor access help if they ever run into questions or concerns?

Questions and concerns can arise before, during, or after visiting the website about the festival. Having the correct information all in one place to guide my target audience in the right direction would be valuable.

Design idea: Include a page with contact information of the host of the event and any other points of contact that may be helpful

Needs to know the operating hours of the festival

How Might We inform first-time visitors of when the festival is occurring?

Users need to know when the festival occurs to plan ahead. When considering this, the placement of the hours on the website is essential.

Design idea: Include dates and hours of the festival

Wants to know what the popular stands are and the prices of the items

Highlight the most popular food items to try out for first-timers

Wants to know what kind of restaurants are available nearby

Include a page on the nearby restaurants closest to the Apple Fest via walking

Wants to know what are the highlighted events to pay attention to

Highlight the most popular events

Site Map

Site Map of Website Redesign

Low-Fidelity Wireframes via Hand Drawn Sketches

Home Page — Desktop Version (left), Mobile Version (right)
About Page (left), Food Page (right)
Events Page (left), Transportation (right)
What to Bring Page (left), Contact Page (right)

Revising Based on Feedback and Constraints

Feedback

This feedback was essential in helping me realize that I had pages of related content that could be merged together. For example, the home page and the about page were extremely similar, so I merged it together to be more concise.

Constraints

  1. Limited Access to Content — While I had attended Apple Fest in 2017, I was unable to attend during the course of this assignment. As a result, much of the content that I hoped to include such as the costs, for example, were difficult to achieve.
  2. 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

All of the other colors help establish information hierarchy, increase visibility, provide contrast, and most importantly, evoke a warm and comfortable feeling.

Color Palette

Navigation Bar — The lighter red (#C04440) is the background color of the navigation bar. It complements the colors in the header photo. The color of the links changes from white to yellow-orange (#FFC840) when hovered over to contrast with the red background and convey call to action.

Navigation Bar Color
Navigation bar links change color to yellow-orange (#FFC840) when hovered over.

Body — The lighter, cream color (#FCF5EF) is the background color of the body. It creates a calm, welcoming feeling for the user when viewing the content.

Background Color of the Body

Text —The darker gray (#555555), darker red (#7A0002), and lighter gray (#8C8583) are the colors of the heading, sub-heading, and paragraph text, respectively. I picked these colors to contrast with the cream background and to help create a typographic hierarchy.

Heading, Subheading, and Paragraph Colors

Footer — The heavier, cream white (#F4EBE6) is the background color of the footer. It signals content different from the body.

Background Color of the Footer

Typography

Typographic Hierarchy

Draft Version of Coded Website

User Testing

Methodology

There were a total of two rounds of user testing and refining was done throughout the process.

Tasks Assigned

2. While at the festival, you lose your friend and you have no idea where they are, so you want to see if there is any information on the website that can help you with this.

3. You have never been to the festival before and would like to know more about the foods offered by the vendors.

4. You heard that there were going to be performances going on, but you have no idea who is performing and the times they are performing, so you want to check to see if there is any information on the website that can help you.

Findings

  • Users were unsatisfied with the “Home” page. I received questions such as “Is that it?”.
  • 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

Redesign Choices

Home Page — The “Home” page lacked the information needed to quickly inform the user of Apple Fest and what it is all about. I redesigned the page to include a short description of the festival, the hours, and a visual to make it more engaging and informative.

Refining the Home page to be more informative and welcoming

Food Page — White space is an essential part of visual design. In the drafted version, the amount of white space was extremely limited. By increasing the white space, it is now much easier to browse. Users could better focus on the content with more room to breathe.

Increased white space makes browsing more comfortable

Events Page — While users wanted to learn more about the performers, I decided to not include individual descriptions under the time constraints of the assignment. I focused on making sure that the user could easily access the directions to the location of the events without leaving the page.

Transportation Page — The name of the “Transportation” tab might have been the cause for hesitation. I decided to brainstorm names that would be clearer and more appropriate for the page’s contents, and made the decision to test “How to Get Here”. Users found it to be much clearer and easier to interpret than before since it’s now in plain language.

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

Contact Page — The contact page did not have the address of the Downtown Ithaca Alliance center. If the user ever wanted to reach the physical location to ask questions, there was no space for that. I updated it to include a hyperlinked address (to access it on Google maps via website or app) and a picture of its location from Google maps.

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

Responsive Design — From Desktop to Mobile

On a mobile device, the screen real estate or the available screen space is extremely limited, and therefore, it should be utilized carefully. Keeping this in mind, I removed the dates of the festival from the header and decreased the white space around the content. Furthermore, I made sure that the content was legible and readable without zooming in by modifying image and font sizes.

While the hamburger menu is a popular way of presenting the navigation on mobile interfaces, I decided to not implement the hamburger menu. Research from the Nielsen Norman Group found that hidden navigation provided worse user experience than visible navigation on both desktop and mobile interfaces. Since I have only 6 pages, I felt that it was unnecessary. However, I still made sure that the links in the navigation bar would be easy to access from a finger touch. This meant that I had to increase the size to accommodate the size of a finger.

Mobile Version of the Redesign

Website

What I Learned

I learned the importance of design thinking and how incredibly useful it is for designing products that provide great user experiences. From empathizing with users through user research to refining design through user testing, I better understood my target audience and learned how important it was to ask why for every design decision I made. It was essential for me to actively reach out for feedback and critiques so that I could truly see what my users wanted and gain insight as to how I could develop for my target audience.

Moving Forward

While the website redesign is nowhere near perfect, I am proud of what I achieved and the journey I took in completing this assignment. I’m excited to continue on using design thinking and human-centered approaches to empathize with users and develop meaningful projects such as this one!

_

This is a case study on redesigning Ithaca’s Apple Fest website for my INFO/CS 1300 course, Introductory Design and Programming for the Web. I am in no way affiliated with Downtown Ithaca Alliance. All information and photo credits go to their respective owners.

Thanks to Professor Kyle Harms for teaching and creating such an amazing assignment. Thanks to the teaching staff for help.

_

I am a junior at Cornell University, pursuing a major in Information Science and a minor in business.

Check out my portfolio to view more of my work!

Unlisted

--

--

UX Designer at Moody’s Analytics. Previously at RedBeard Talent, StartupTree, Cornell University. jackwang.me

Love podcasts or audiobooks? Learn on the go with our new app.

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
Jack Wang

UX Designer at Moody’s Analytics. Previously at RedBeard Talent, StartupTree, Cornell University. jackwang.me