Web Design
The Chronicler
Client
Design Capstone Project
YEar
2022
Platform
Figma
Tools
Adobe Creative Suite
Awards
AEJMC Best of Digital 2023 - second place
The Challenge
Too much content, not enough time...
For my design capstone, I was challenged to do something unique that would broaden my skills and my portfolio. The best projects come from doing what you love, so I tasked myself with creating a design concept website that would help users sift easily through the mountain of content that is the Marvel Cinematic Universe (MCU).
While I've always had a pretty good memory, from the comics to the movies, there are just too many overlapping plot lines to remember them all, and that feeling is multiplied if you are new to experiencing the movies in any form but especially out of order. Thus, I came up with a functional design that, once fully realized, would allow users to click on any movie, character, or tv title and see all the basic information you would need to know before watching the next movie coming soon.
My Role(s)
UX Designer
I created wireframes, mockups, and interactive prototypes.
Content Writer
I created and tested written content for the website, "The Chronicler". I finalized written copy to ensure cohesion and effective/clear communication of the site's purpose and value to users.
Who is this website for?
To begin this project, I researched the audiences for MCU film. I found, according to a study done by Jose Gabriel Navarro, published on August 12, 2021 through Statista, "In the United States, around 54 percent of adults aged 18 to 34 have seen one or more of the films from Marvel’s ‘The Avengers’ series. This viewership share is not surprising given that all of the currently released Avengers films rank among the top ten movies of all time in terms of box office revenue. This study proved my earlier assumption correct in that a large age range of audience members view Marvel movies, though the majority still lies with 18-34-year-olds.
Surrounded by peers in this age group, I talked with Elon University students to determine the usability of a website like this. Is it even needed or relevant today? Am I the only one who feels overwhelmed by all the content the MCU has to offer, and yes, what design choices should I make for the benefit of my future users? From this informal survey sample, I condensed their answers into two user personas.
.png)
User Research Findings
- Both personas value efficiency and seek a user-friendly interface. I need to ensure that the website is intuitive, easy to navigate, and provides a seamless user experience
- Persona 1 (Alex) would benefit from clear and concise summaries, while Persona 2 (Joel) may appreciate in-depth information. Strike a balance by providing detailed content with options for quick overviews.
- Both personas express a need for a chronological timeline of MCU events. Incorporate a visual timeline that allows users to understand the sequence of movies and events.
- Both personas suggest that time constraints are a common challenge. Provide quick-reference sections, possibly with summary cards for each movie, to cater to users who want to quickly refresh their memory.
Unexpected Findings
- Persona 2 (Joel) is interested in connecting with fellow fans. Implement community features such as forums or discussion sections to facilitate engagement and discussions among users.
- Both personas express an interest in staying updated with the latest MCU releases. Include a section that provides information on upcoming movies, trailers, and how they fit into the larger narrative.
Design Process
Design Inspiration
Knowing your audience is key to inspiring the rest of the design. Since I'm designing for a younger, more internet-savvy user, I'm going to keep things minimalistic, highly legible and high on color contrast. I felt inspired by the rich and diverse hues found in various Marvel comics, I aimed to capture the essence of the cinematic universe.This exploration guided me towards a robust primary color scheme. The chosen colors not only complement each other but also provide significant contrast, ensuring that all text remains highly legible. The result is a dynamic and visually appealing color palette that forms the foundation of the design, creating an immersive and accessible experience for users.
Iteration one
Once I figure out the direction I want the project to go, I can start the process of templating my designs this is a quick, simple wireframe to allow me to get my ideas out without wasting a lot of time.
It had a lot of ideas in this iteration that actually made it through to the final design, however, I determined it needed to be more visually impactful with bigger hero images that make it simple to understand what's going on and instead of rows of images I decided interactive sliders would fit the modern design I was going for.
Lastly, the trickiest part of the design that wasn't present in this iteration is a visually representative timeline that portrays how all the films fit together. With so many movies to include in this list it would have to emphasize something simple and easy to understand, especially because I, ambitiously, want to do two versions of the timeline: the release date order, and the MCU timeline order.
Design Solution
Below are the final screens, which includes the standard yellow navigation bar with a typographic logo across the top left-hand side, a banner with all the main MCU characters showcasing the explore feature, followed by a carousel design of the latest and most popular MCU movies to date. I thought this would be a great way to welcome people to the site, because odds are they're coming with questions about the latest installment.
In terms of fonts used, I wanted it to be as open and inviting as possible. Readability was a must across digital screens so a typeface evoking that of a comic book was a non-starter. Therefore, I decided to pair two of my favorite digital fonts, Montserrat, praised for its geometry and readability in headings and body copy, along with Roboto, which is perfect for body copy on digital screens. It allows letterforms to sit according to their natural width. It has friendly and open curves that make it very pleasing to read on screen. Since there were so many different font weights to choose from, it was very simple to continue using these two typefaces throughout the entirety of the design and still have dimension and variety.
Next, I worked on the layout of the buttons and movie title images. This was very important to me that I use design elements to differentiate the MCU Timeline (the order that the storyline follows) and the Release Date Timeline (the order in which the movies were released in theaters. Making both pages follow the same layout but prioritize different colors and alignments was a great way to do this because it maintains the cohesion of the website while showing viewers that these are indeed different screens.
Then, because I wanted this website to feel as real as possible, I experimented with some hover techniques that would allow viewers to mouse over any one of the movie titles and get the order number, the title, and a brief logline incase anyone was looking for a quick summary for each movie. This quickly became one of the most painstaking design elements to nail because I had to place each one by hand 54 times. Twice for each movie listed. The timeline buttons don't currently have hover states added to them due to time constraints, but the darker yellow overlaid with the lighter yellow works as it follows the shape and look of my other buttons, but brings some balance to a page that is (putting it mildly) a riot of color due to all the movie posters.
