Ithaca Apple Fest cover

Ithaca Apple Harvest Festival

Class Project

Web Design

Web Programming

Redesigning website for the annual Ithaca Apple Harvest Festival.

Roles & Responsibilities

  • UX & Web Design: Card sorting, low-fidelity iterations, accessibility

  • Web Programming: Implementing site using HTML/CSS

  • User Research & Testing: 3 user interviews, 2 rounds of user testing

Tools Used

HTML | CSS

Timeline

Nov. 2020

Context

This website was created as a project for a course I took during my freshman year (fall 2020), INFO 1300: Introductory Design and Programming for the Web.

The goal of this project was to redesign the website for the Ithaca Apple Harvest Festival (see the current site here), a lively annual festival full of local food & craft vendors that is popular with locals, college students, and visitors alike. I aimed to create a more engaging and informative site that better addressed user needs. You can view the final result at https://hopezheng.github.io/apple-fest/.

Experience

Project Outline

  1. Identifying My Audience

  2. User Research Interviews

    • Analyzing User Needs & Wants

  3. Initial → Final Design

    • Theme

    • Card Sorting & Sketching

  4. Coded Draft Website

  5. User Testing (Round 1)

    • Updated Website

  6. User Testing (Round 2)

  7. Final Website

1. Identifying My Audience

The intended audience for the website is parents and family members of college students visiting Ithaca. Visitors will likely need and seek out more information about the festival from the website than locals would, since they will do research before they arrive.

2. User Research Interviews

Semi-Structured Interview Questions

  1. Recall the last time you visited Cornell's campus. What research did you do to plan your trip/visit? (i.e. what information did you need?)

  2. Have you ever gone to the Ithaca Apple Harvest Festival? Why or why not?

  3. If so, tell me about your visit - how you planned your visit, what you did there, and how your overall experience was.

  4. If not, do you have reasons to go in the future? What are they?

  5. What do you know about the festival, its events, performances, history, etc.? What information are you lacking?

Interview Findings: Summary

I interviewed two people from my audience (in person). I found that both of them used maps (Google Maps or online campus map) to get around, and neither of them knew much about the festival. In particular, they were curious about what exactly an “Apple Harvest Festival entailed — what was its purpose and history? What was there to do there? Was there parking nearby? My next task was to identify specific user needs based on these interviews.

User 1 Notes

Dropdown arrow

User 2 Notes

Dropdown arrow

Analyzing User Needs & Wants

Need/Want 1: Location, Directions, & Parking Information

Needs and Wants: What does your client and audience need and want?
 - Information on the location of the festival, how to get there, and where to park (if arriving by car)

Design Ideas and Choices: How will you meet those needs and wants?
 - I will create a page for this information that includes:
   - The address of the festival as well as location(s) of nearby parking, linked to Google Maps
   - An image of a map showing the location

Rationale & Additional Notes: Justify your decisions.
 - Knowing the location is extremely important
 - Linking to Google Maps will make it easy for people to find out directions to the festival or to parking spots from their current location

Need/Want 2: About the Festival: When/Where, Things to See/Do

Needs and Wants: What does your client and audience need and want?
 - Information on what/when/where the festival is and what is at the festival (e.g. specific things to see and do at the festival)

Design Ideas and Choices: How will you meet those needs and wants?
 - I will create a page that first gives a brief overview of what the festival is, and then goes into detail about everything the festival has to offer, with images showing what past festivals had
 - General info (food, performances, events), as well as subsections for specifics, like the performance/live music schedule

Rationale & Additional Notes: Justify your decisions.
 - Having a separate page will allow people to easily see what there is to do
 - Might be effective to place a "learn more" link on the home page after a brief description of the festival (to pique interest) that leads to this more detailed description

Need/Want 3: History of the Festival

Needs and Wants: What does your client and audience need and want?
   - Information on the history of the festival

Design Ideas and Choices: How will you meet those needs and wants?
   - I will provide information on the history of the festival
         - When it began, how it began, what its purpose is, etc.

Rationale & Additional Notes: Justify your decisions.
   - This section will be interesting and useful to people who are curious about why the festival exists

3. Initial → Final Design

Theme

For the theme of the site, I decided to go for a warm, friendly, apple-inspired theme. The serif headings give it a sense of sophistication, while the sans-serif body text is more approachable and friendly. Using shades of red and orange for the site's colors gives it a cozy autumn mood, fitting the theme of the festival.

Card Sort

I wrote down the key pieces of information that I wanted to include on the site and sorted them based on similarity/relevance to each other. This resulted in an organization with four main categories, as shown below.

Card sort

I decided that history of the festival shouldn't be its own page, but instead be part of the about page. In its place, I added an image gallery for people to easily see what the festival looks like.

Sketches

Home page sketchAbout page sketchDirections page sketchGallery page sketch

4. Coded Draft Website

Draft website home pageDraft website about page
Draft website directions pageDraft website gallery page

5. User Testing (Round 1)

I tested my draft website on two users (in person) by asking them to complete the tasks below in a randomized order.

Tasks

  1. Identify where you can park your car and how much it will cost.

  2. You decide to visit the festival on a Saturday. Find one specific event or performance that you are interested in attending.

  3. You are looking forward to the variety of edible goods for sale. Identify one type of food or beverage typically available at the festival that you would like to try.

User Testing Findings: Summary

I learned that the site organization wasn’t as clear as I thought it was. Users had difficult finding information about events, and key information about vendors got lost within paragraphs. I had many changes to make.

User 1 Testing Notes

Dropdown arrow

User 2 Testing Notes

Dropdown arrow

Updated Website

Final website home pageFinal website about page
Final website directions pageFinal website gallery page

6. User Testing (Round 2)

For the second round of user testing on my revised site, I recruited two different members of my site audience to complete the same tasks.

User Testing Findings: Summary

Users had a higher success rate in this round of testing. Only minor changes for clarity were needed, such as changing the wording of certain phrases.

User 3 Testing Notes

Dropdown arrow

About the User
This user is the brother of a Cornell student. He is a 25-year-old business analyst from San Francisco, CA who has never been to Ithaca. He is fairly tech-savvy and well-traveled.

User Testing Results/Analysis
Task:
Identify where you can park your car and how much it will cost.
How did the user do? Did they meet your expectation?
- The user did very well; he met my expectation
User’s reaction / feedback to the design (e.g., specific problems or issues found in the tasks)
- No specific problems or issues encountered, completed the task easily
Your reflections about the user’s performance to the task
- The user did well, as expected, since the parking information is clearly labeled in the nav bar
Re-design choices
- No re-design necessary for this part of the site

Task:
You are looking forward to the variety of edible goods for sale. Identify one type of food or beverage typically available at the festival that you would like to try.
How did the user do? Did they meet your expectation?
- The user did well; he met my expectation
User’s reaction / feedback to the design (e.g., specific problems or issues found in the tasks)
- No specific problems or issues identified by user
Your reflections about the user’s performance to the task
- The user's first instinct was to go to the Vendors section, which makes sense, and makes me think that I should add more detailed information about food vendors to this section rather than further redirecting to the gallery for images of food
- Re-design choices
- Since the user expected to see information about food in the vendors section, add a few examples of the food/beverage vendors to the Vendors section (cut from the last sentence About section intro)

Task:
You decide to visit the festival on a Saturday. Find one specific event or performance that you are interested in attending.
How did the user do? Did they meet your expectation?
- The user did well; he met my expectation exactly
User’s reaction / feedback to the design (e.g., specific problems or issues found in the tasks)
- No specific problems or issues
Your reflections about the user’s performance to the task
- The user followed the path that I intended when I re-designed the site after the last round of user testing
- He was able to easily navigate to Events and identify a specific event on the event map provided
Re-design choices
- None

User 4 Testing Notes

Dropdown arrow

Key Takeaways

At the beginning of this class, I was a complete beginner with absolutely no knowledge about web design and programming. I didn't even know the difference between HTML and CSS. Creating a web page from scratch seemed like a mysterious, daunting task. It was really interesting learning about everything that goes on behind the scenes of a web page and putting the process into practice myself.

I learned a lot not only about designing and coding a site, but also about collecting feedback from users and identifying what design changes are needed. When I did my first round of user testing, I was surprised by how much useful feedback I got and how much I learned from how the users completed the tasks. I had not realized just how much being the creator of the site blinded me from seeing it objectively. The users struggled to do tasks that I could easily see solutions for, or took a completely different path than I expected. Through this project, I learned just how important user testing is.

< Back to all projects