The first objective of this project is to design a smartphone app interface and include at least ten icons for a business. The second objective is to create a business name and develop a logotype to accompany the app. The last objective is to show the work through a prototype and have a user finish a complete action.

The concept for the app is for a local concert venue in Downtown Cleveland called Cle Band Music Hall, which focuses on hosting bands and singers that fall under the large umbrella of rock and other similar sub-genres. The design for the app icons is based on this concept and uses music and rock ‘n’ roll imagery to represent each section within the app. The user’s action for the prototype is to find a show and buy tickets to it.

The four colors are rich red, soft black, cream, and taupe. The red and black are a reference to rock bands and rock ‘n’ roll culture, while the neutral colors are to balance out the color palette. The logotype includes Ganache Regular and Sauna Pro Bold Italic Swash. The app interface includes Sauna Pro Bold Italic and Gill Sans Regular. The fonts Ganache and Sauna give character to the logotype and give off a classic rock vibe to the business. Only the app uses Gill Sans Regular because it is easy to read on a screen and compliments Sauna Pro Bold Italic well.

Ticketmaster is a platform where you can buy and sell tickets online for concerts, sports, theater, and other events near you. I looked at their website and their app to guide me in my app’s layout.

SeatGeek is another platform where you can buy and sell tickets online for concerts, sports, theater, and other events near you. I looked at their website and their app to guide me in my app’s layout.

The wireframe I sketched out was the base for how I thought the app flow and be used. With my wireframe, I could do user testing on two classmates. I provided the screen sketches and the site map and explained my concept for the app before I asked for their thoughts and to perform various tasks. Once they were informed about what kind of app this would be, I asked them to be a user, create an account, look at the event calendar, and purchase tickets. Based on the user testing, both classmates took longer than usual to find a concert and purchase those tickets. They also needed clarification about some of the icons and the screens tied to those icons being part of the app. I learned that I must simplify my steps to get to all app content. I also reworked the home screen to remove some ideas and create an app that makes more sense for the Cle Band Music Hall customers.

I created sketches for the Cle Band Music Hall App, including a version of the home screen, icons, and the logotype. I was inspired by rock music and bands for these designs. I took musical objects and rock ‘n’ roll imagery to create icons that would go along with each section within the app. I incorporated items like a musical note, a skull, a person with a mohawk, and guitar picks from these sketches for my final icons. As for the logotype, I leaned toward the sketches with large swashes. The final logotype includes a swash that turns into a guitar shape.

Based on my thumbnails, I began creating the logotype for Cle Band Music Hall and the icons that will be part of the app. I uploaded the first version to my class discussion board for feedback, and five classmates replied. The response from my classmates was that they could see the theme throughout my icons and logotype, and they gave me four main points to consider reworking. The first main feedback from the group was that the stroke weight was inconsistent. The second point was that the icons needed to be more consistent in size. The next issue from my classmates was that some parts of the icons are very small and should be scaled up or simplified. On my logotype, I received feedback to work on eliminating some of the white space and reworking the line that connects to the letter D.

The colors I chose are reminiscent of rock and band culture because of the deep red and black. I also wanted the concert venue to be neutral enough so that bands and singers of any genre would like to perform there and bring their fans to the space. To be more neutral, I added a bright cream color. As an accent color, taupe would work well with warm tones, allowing red to dominate and not overpower the other colors.

Logo Typeface

I chose Ganache Regular for “Cle Band” because it reminded me of the Cleveland Signs around the city, where locals and tourists regularly take pictures posing with it. The swashes create movement, allowing me to extend the D to form a guitar-like shape. Sauna Pro Bold Italic Swash is used for “Music Hall” under “Cle Band” because it compliments the font Ganache Regular well by having similar curves and weight.

App Typeface

For the app screens, I used Sauna Pro Bold Italic has headlines because it ties back into the logotype and provides a hierarchy to each screen. I then chose Gill Sans Regular because sans serif fonts are easier to read on screens and complimented Sauna Pro Bold Italic very well.

When creating the app’s first version, I chose red and cream to be the dominant colors because they gave a nice contrast and complemented each other well. I decided to have the user purchase tickets to a show playing at Cle Band as their action and began working. I started by creating the app icon on the phone screen, then worked on the pages in order of the action I wanted the user to do. I looked at SeatGeek and Ticketmaster and thought about how I interact with apps to lay out my content, which helped me stick to industry standards that people are used to and expect from using an app.

From the user testing, first, I worked on adjusting the alignment problems. I then looked into how I could better some of the interfaces, so I added an X at the top of the checkout section so that if users change their minds, they know where to click to get out. I also added some other buttons to help with the action flow. For example, I added buttons to adjust the number of tickets on the checkout page and a button to go back home on the confirmation page.