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
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.
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:
- Have you ever visited Ithaca Apple Harvest Festival?
- If you were to visit Apple Fest’s website, what kind of information would you expect to see?
- What excites you to go to Apple Fest?
- What discourages you from going?
- 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
- Needs to go to Apple Fest, but does not know how to get there
- Needs to know what types of food there are
- Needs to know what to bring to prepare for the event as a first-timer
- Needs to know what events will be happening while there
- Needs to know how to get in touch with someone for help if needed
- Needs to know the operating hours of the festival
WANTS
- Wants to know what the popular stands are and the prices of the items
- Wants to know what kind of restaurants are available nearby
- 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.
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 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:
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
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.
By phrasing the user needs and goals into How Might We questions, I started brainstorming to generate design ideas.
Satisfying User Needs and Wants
Below are my design ideas and choices to directly satisfy the user needs.
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
To better understand the overall structure of the website and its contents, I decided to quickly create a site map.
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.
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.
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
There were also a couple of constraints that I had to work with in order to successfully develop the website.
- 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.
- 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.
All of the other colors help establish information hierarchy, increase visibility, provide contrast, and most importantly, evoke a warm and comfortable feeling.
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.
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.
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.
Footer — The heavier, cream white (#F4EBE6) is the background color of the footer. It signals content different from the body.
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.
Draft Version of Coded Website
Below are screenshots of the draft version of the website.
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.
There were a total of two rounds of user testing and refining was done throughout the process.
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.
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
Below are some of the key 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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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!
