My town holds an annual local festival. While it is well organized and handles the needs of thousands of out-of-town guests smoothly, the mobile experience is confusing and not a good user experience.
I considered the limitations of the current product and created a prototype in Figma that is more organized, user-friendly, and better anticipates the needs of the users. This is how I would improve the existing mobile experience.
Read on for the original version of the website and content and for an explaination of my process.
My prototype
Here’s the original home page:
Audience
Two types of user will come to the website, and I want it to meet their needs and answer their questions.
User #1: This is a local who is familiar with the festival but who needs information about the schedule, street closings, and this year’s updates. They might be interested in a particular product’s availability or be interested in volunteering.
User #2: This is a person from out of town who is learning about the festival for the first time. They need to learn what it is, decide that they want to come, learn how to access it, learn how to access lodging, food, and parking, and be able to navigate once they’re here. They should also understand where to find answers to their questions and festival updates.
Organization
- I considered the overall site architecture and planned out a design that is easy to navigate, intuitive, and consistent. Here’s how everything links in the Figma prototype.
- I kept navigation consisent with a hamburger menu on each page and a link to social and contact at the bottom of each page. I set up navigation so that it’s easy to get back to the main page and main menu.
- I used consistent colors, font, font sizes, and link types on each page.
- I created a home page that includes crucial information like the date and location. I included a line of text about wands to create interest. I’ve removed text that overlays images and kept this clear and straightforward.
- The original version included 3 ways to contact festival organizers that use different fonts, buttons, and links. These often appeared close together and were confusing, and since they all went to the same place, I replaced everything with a link to email that appears in a bar at the bottom of every page. Future iterations might need to draw more attention to volunteer opportunities or have a seperate page for contact.
Written content
- Much of the original text is chatty and difficult to scan for information.
- For example, the parking page is confusing, difficult to read due to dense text, limited color contrast, and a background photo. It also uses multiple terms for the same thing like “shuttle” and Knight buses.
- In my edited version for mobile, I broke the existing text into categories and useable chunks of information.
- I used bullet points for easier scanning.
- I cut the all caps font, removed extraneous information, and condensed the text for clarity.
- I added visuals with maps for downtown and satellite parking.
The FAQ page was also difficult to read
- Chattiness makes it difficult to find information. It is not organized in any particular order. The most important information should be near the top.
- To make my revision scannable, I removed unnecessary or redundant content.
- I cut the remaining information for length and clarity.
- I organized everything so important contant appears first and similar contant is grouped.
- I made all the FAQ questions consistent and parallel.
- I also used bullets, reduced the character number per line, and broke the content into more readable chunks. I made the links bold and red.
- I removed the distracting background.
