For this final project, I constructed a re-design of the website I created for my thesis project podcast. This website was originally produced through a website generator which did not allow for a well-constructed mobile website. Instead, it is simply a condensed version of the desktop website instead of a mobile-first website. While I thought about creating a mobile website, I felt a mobile application would be better. This is because the majority of podcast listeners listen to the content with their mobile phones, so I felt an application would be easier for the user to use and keep up with the podcast than needing to look up the mobile site through a mobile browser to find the content. The three main goals of this project were to create a mobile-first version of my original website with an application, keep the integrity of the original color scheme and design of the website and make the content more easily accessible and neatly organized for users to find.
After constructing this mobile application mockup, I feel that I was able to accomplish these rhetorical and design goals for this project. The design itself is a mobile application that has easy access for podcast listeners who mostly listen to podcast on mobile phones. The menu, page layout and header/footer are designed with phone screens in mind to make it easier for the user. First, the homepage sets the organization of the application. It immediately puts all the content of the app in a convenient and easy to use order which is mirrored in the hamburger menu. The homepage forces the user to choose a page to visit. Otherwise the user has access to the hamburger menu where they can choose to navigate about the app however they would like. I chose to use a hamburger menu as it helps save screen space for the content. As well, each page has a symbol associated with it in the menu. This also saves screen spaces as the user can recognize the symbols associated with pages on the app in order to keep things clean and simple. This hierarchy and organization of information helps the app stay neatly organized throughout for the user to follow while keeping mobile constraints in mind. Second, I worked to keep the integrity of the original site’s color scheme by using a balance of color and white space. The color communicates the theme around the app. But the white space creates room for the user to focus on the content itself and not get distracted. These colors also help to create repetition within the design and make a cohesive app. The headers and footers stay they same throughout, but the pages are differentiated through images, titles and the content itself. This also keeps the mobile constraints in mind as the header and footer provide the user with the necessary tools to easily move around within the application.
With this design, a particular visual hierarchy came about that made up the order of each page on the application. The content and reason why users are on the app helped drive the reasoning behind this visual hierarchy. The podcasts and information pertaining to the podcasts are the most important elements since it is a podcast app. When users come to use this app, it is because they found this podcast and liked the content I was creating for it. I chose then to keep the podcast episodes as the utmost importance element by putting that content at the top of this visual hierarchy. Then I felt that the guests themselves were next in importance as they are what made this podcast possible. Without my guests, I would not have been able to create the original idea for this podcast; it only seemed natural to put them next in line for this visual hierarchy. And lastly, would be myself, my program and my project. I didn’t want me or what I am doing to be of the utmost importance because the project and the people who were a part of it is what the listeners are concerned about. This created the order of the menu and homepage.
As for the pages themselves, their hierarchy of information is based on the header. The header works as a dominant focal point of each page and what the user would need easy access to. The information in this header is what allows the user to easily move about the application, without it the application cannot function. Next, is the content itself from the podcast episode to images to simply text. All content that is seen on each page was placed within the nine-column grid to create a seamless main column with continuous scroll on each page. For the purpose of this project, I did make some of the interactive content clickable in the mockup to give the user a sense of how each piece of multimedia will function in the actual app. While text is what dominates most pages I created for this project, the visual elements are a necessary part of each page as they are supplemental to the text. Through the use of white space and the nine-column grid, I spaced these high resolution images between the headers and body copy on each page. These images help break up the text, as well as help the reader get a visual representation of the topics discussed on each page. An example is that the bio of each guest comes with an image of that guest, so the user can see what that guest looks like. I feel as though this is important with strictly auditory content. Users can hear the guests, but putting a face to the voice can be helpful to them as they listen. Each image is placed above the text to function like a “works every time” layout to help grab users’ attention to each section on each page. Lastly, the footer is what brings the design of each page together. Here, the user can find all my external links that they would need access to. This footer sits at the bottom of each page, but is of great importance as well despite its place in the visual hierarchy. It helps continue the color scheme of this mobile application and it helps frame the content on each page with creating contrast between the white background and its vibrant color.
When I look back on the design itself, the ethos, pathos and logos of the original project helped to drive my design of this mobile application. The ethos of this project is embodied in the monochromatic color scheme used for this application that is based on the color of the logo. I originally chose purple or violet for the original logo as, according to industry and American cultural standards, this color reflects education, creativity and uniqueness. I felt that those were the three things that embodied my podcast as the topics discussed educates my listeners on issues of importance such as politics, is a creative outlet for not only me, but my guests to talk about topics they are passionate about, and is unique in that it has its own personality. Then by using a monochromatic color scheme based on that original color, I felt it did not detract that original color, but enhanced it with multiple shades of that very color that work harmoniously to give the application a cohesive look.
The pathos however, is embodied more in the boldness of this application’s theme through text and shape which helps to evoke emotion surrounding the content discussed in the podcast. It’s a rant podcast that talks about a lot of topics that are heavy in nature which is why I originally chose it for the logo. The word “don’t” helped me originally come to the octagonal shape which is most commonly known as relating to a stop sign. This word holds a lot of weight in telling the viewer to stop and really think about what is being discussed in the podcast. It only made sense to choose such a heavy font type, Impact, for the title and such a shape, an octagon, to be the main symbol for my logo. I carried this boldness throughout the sections headers by using the same font and by having the stop sign be associated with the homepage which anchors the whole application. While the text in the headers grabs the viewers’ attention with their heavy weight, I balanced it out harmoniously by using a much lighter font type that is a serif font, Athelas, for the body copy. I did this because it not only makes the text easier to read at such lengths as it is a serif font, but also does not detract from that header font type which holds an important role in tone and message that the font type is sending to the viewer.
Lastly, the logos of this project can be seen in how this application still reflects the original website. However, most importantly, the fact that it was redesigned as a mobile-first to keep within the constraints of a smart phone’s capabilities and dynamics: whitespace to help differentiate between pieces of content, a hamburger menu to save screen space for the content, and symbols associated with pages on the app to save screen space and keep things clean and simple. Both header and footer are static in the foreground so the user always has access to them. The content of the pages is in the background scroll down for easy reading. While this prototype was created for the iPhone 6s plus screen size, it can easily change for other mobile phones.
As for the grid I chose to work within for this project, I focused on a column only grid instead of one that included rows. I did this because I wanted the content to be a continuous scroll. I didn’t want the pages to be static and constrained to rows as well as columns. The design is made up of nine columns which provide for two main concerns surrounding the content and design. The first allowed for the best spacing for the header and footer. They were the most important when it comes to spacing as they are the only parts of each page that are static. I wanted each symbol in the header to be constrained to a particular size. When that was set, I just needed to find a layout of spacing that work best with the size of those symbols. I modeled this layout plan around the reading we had in week three, Grids Are Good. Where the creator based the column layout around the advertisement size that he would need to work with. The second reason I chose this grid layout was that it allowed for easy spacing of images, text, and content while also allowing for enough room for space between each piece of content and different sizes in phones. Keeping with the trends of today’s website designs, this application is organized into a main column with continuous scroll. To allow for easy reading between each piece of content, I needed to use white space. This grid allowed not only enough space for the content itself, but also the necessary white space around the content, images, and text.
As I started creating this project, there was one major thought that drove the ideas of my design: the user experience. The user was the most important element that I kept in mind with every design decision I made. As I mentioned before, since most podcast listeners listen on their mobile phones, I designed a mobile application for these users to keep up with my podcasts. This includes new listeners just discovering the podcast and wanting to learn more, and existing listeners who want to keep current with updates surrounding the podcast, as well as to listen to old episodes and learn more. The goal of this project was to create an easily accessible application that is well organized to help the user find the content they want on their mobile phones at their convenience, while still keeping to the original idea and theme surrounding the website. This mobile application accomplished that through the monochromatic color scheme, easily recognizable page symbols, use of white space, a nine-column grid layout and a visual hierarchy that helps keep everything easily organized for users to follow. This application allows users to visit and keep up-to-date with the podcast and all other content surrounding Don’t Even Get Me Started…