SERVING STYLE WITH SUCCESS

BASH EVENTS needed a prototype design for their website that would be known as Film Festiganza. They needed the design of the site to aim for maximum visual appeal while maintaining an organized layout for how essential information on the site would be accessed. The goal was to establish a unique-yet-consistent sense of organization for both visuals and information. This would help Film Festiganza gain a strong placement against competition in both style and substance. My role was to design brand visuals and layouts that would match the brand style and theming they were aiming for, resulting in a hi-fidelity prototype.

Background

When needing a prototype website that would successfully promote their event known as Film Festiganza, Bash Events needed a design that can efficiently meet their basic needs while providing a straightforward sense of navigation without risk of overload. The client specifically desired a sense of order that would categorize important information across the site into well-organized sections where the User can find specific details.

In addition, Bash Events also needed to combine these desired functional traits of the website’s design with a creative sense of visual appeal. The reason was to ensure they would be able to attract mass amounts of attention from Users by utilizing the unique aesthetic of the website to keep their focus while encouraging subversion of similar websites that might compete for their attention.

The overall main goal of Bash Events was to be provided with a website design that would provide the most convenient yet pleasant experience possible to Users through efficient navigational design and eye-catching aesthetic that would allow ease of access to newer eyes. To accomplish this, I constructed aspects such as a Perceptual Grid and User Journey Map that would lay out a foundation for how this would be processed.

Users and Audience

The main target audience that BASH EVENTS was aiming for were people who hold a curiosity for movies and filmmaking in general but also want to attend an in-person event for a social experience. The most common frustration of these Users was overly-decorative visuals that often make information difficult to properly notice and read, which contributed to creating an overbearing experience for the User.

Film Festiganza needed to appeal to Users who might wish to learn more information about the event that might pique their curiosity and creativity. These two common traits in theatre-centered environments served as the biggest driving factors behind the aim for unique visual aesthetic across the prototype design for the website.

What was important to keep in mind was to design a coherent website layout that would meet these Users’ common need for easy navigation to find relevant information that’s important to them, like specific times of celebrity guest panels.

Site Development

Site Mapping

I began with brainstorming what specific sections of information that Users would interact with most across Film Festiganza’s Pages. This was done through Site Mapping, which greatly assisted in coming up with the website’s different pages and what general type of information would be included across them.

Mood Board

After the Site Map, I designed a Mood Board that served its role in helping create a layout for an ideal experience for Users navigating their way across the website to achieve their goal. With each of these methods combined with information I’ve gathered from market research beforehand, the initial phases were finally complete.

This led to the next step of creating wireframes that assisted with visually representing and organizing any ideas that I thought of during this stage in development.

Wire Frames

I was responsible for creating wireframes of the home page with the goal of establishing structure by organizing information in a way that would be visible for the User to find when they first access the page. I designed each wireframe with the intent of establishing adequate space between each entry of information to avoid overwhelming the User’s sense of legibility.

Furthermore, I made sure to be careful with the placement of any displayed images to reduce the risk of Users being interrupted by visual distractions if they’re reading verbal information. After completing the wireframes with these principles in mind, I took any specific style of organization that I felt worked best for each of them before eventually starting from scratch on the new design for the official prototype of the home page while combining aspects of the styles I memorized.

Initial Prototype Development

After the wireframes, I moved on to designing the layouts for the rest of the website’s pages in the final prototype design. I began with the mobile design. During the design process for each page, the first major goal I had was to establish a new sense of organizing verbal information that would improve on any potential oversight found back in the wireframes.

In this phase, I primarily started out by going for a mobile-styled approach for the sake of quicker design and efficiency, while establishing a simple layout that could be tested by newer Users. I’ve done this for each of the website’s essential pages, aiming for a minimalist design that would set itself as the precursor towards the final prototype design after feedback has been gained from proper User-testing.

User Testing

Lastly, I conducted multiple rounds of user testing to gather data by having participants navigate the website to complete specific task: finding where to order tickets and purchase one. All of them experienced very minimal difficulty in finding where to click and complete the process. 

Throughout each process, my key findings included positive comments that often noted the simplistic navigational structure and appreciated the stylistic choices added onto the website’s structure. However, the most notable pieces of constructive criticism also suggested adding the option to select the quantity of purchased tickets on the purchase page to establish further personalization within the Prototype’s design.

Final Prototype Development

After meticulously revisiting each page and adding any newly requested features from feedback, I was able to create an effective final prototype for Film Festiganza’s website in the style of a desktop layout that kept the goals of the brand which prioritized using an elaborate-yet-concise combination between structure and style for any User to freely navigate. After this was done, the second major step was to take any visual assets like images and buttons before placing them across the pages in sections that would reduce visual distraction, which I often implemented through design choices such as placing text inside white textboxes that were layered over any elaborate backgrounds.

One majorly consistently I utilized to communicate Film Festiganza’s brand identity was to have the backgrounds of the newer versions of each page being themed after different movie genres to drive a consistent sense of visual appeal whenever the User clicks on any new Page they haven’t navigated before.

I selected the colors of visual assets to primarily revolve around the three primary colors to still maintain the bombastic brand style of Film Festiganza. One example was to have the colors of interactive elements like buttons be red or blue to communicate significance of the User-testing.