I recently had the privilege to design the landing page of a soon-to-be launched app called Sonotize. The app is a way to discover concerts near you and to gain points for every concert attended. With these points, the user can redeem prizes through the app and get rewarded for supporting the artists that he or she loves. Through designing the landing page, I had access to screenshots of the app to use for mockups. I loved the idea of the app, so I had the chance to redesign the interface for a more engaging and rewarding experience for users while keeping in mind the goals of the business.
The world’s first live music rewards platform
Goals and Challenges
The goal of the app is to allow users to have an easy and rewarding experience with enjoying concerts. Every purchase gives the user a set amount of points that he or she can save up or redeem through Sonotize. Through this reward system, the app encourages users to come back to gain more points. I wanted the interface to be simple enough for anyone to use in order to widen the demographic of users. I wanted to challenge myself with using Material Design principles while designing for an iOS device. It was interesting to learn about the differences between designing for Android and iOS in the ways that elements of the app interact with each other and with the user. Another challenge was to keep the overall design and feel to be consistent with the existing brand of Sonotize. This was maintained through the font choices, colors, and elements of design.
Wireframes and Design Decisions
The wireframes include the different possible states of each screen such as the difference between a concert that has been bookmarked as “Interested!” as opposed to “Interested?” Cards that scroll up as the user swipes replace the existing carousel design. This can be seen in the original designs of Sonotize that are shown later. If there were more than one option on the home screen for concerts such as “Near You” or “Recommended,” then the carousel would be a better choice. A good example of this is Spotify’s mobile interface. Because the Home screen is divided into three tabs with a single option for each tab, scrolling through vertically makes the most sense, especially since there is an emphasis on discovering new artists through the platform. I chose Maven Pro and Somatic to be the two fonts for this app. Maven Pro happens to be the favorite font of the CEO of Sonotize, so I made sure to include it in the app. The sans-serif font also fits well with the feel of the app as it provides a futuristic and clean look to the text. Somatic is used as the larger headers with its friendly and playful look that attracts the eye in contrast to Maven Pro. Creating a Text Style library allowed the interface to look clean and consistent throughout. The color palette is inspired by the original designs of the app. The turquoise color is the same as the existing logo color, but I chose to brighten up the pink and purple hues to increase visual accessibility and allow elements of the app to stand out more. I have divided up the screens into three different categories in order to go into detail about the design choices.
Group 1: Signing Up
The first group includes the screens that the user is greeted with when first signing up or returning to the app. I created a simple splash screen to strengthen the brand of Sonotize. I read an article about how even the few seconds that a user views a splash screen can help to strengthen the brand of an app. For the Welcome Screen, the original design integrates it with the Sign In Screen. I chose to integrate the Welcome Screen with the Sign Up Screen instead, as it is one less step for new users to sign up easily as opposed to manually having to click the sign up link. For the Personal Info Screen, I removed “Llama” and replaced it with “Other.” I am assuming that this screen is to collect user demographic data, but “Llama” would defeat the purpose of the screen. I would personally choose “Llama” because it is a fun response, but this would not help with the demographic data. Despite this, I am not happy with my decision with the term “Other” as it “otherizes” those who do not identity as male or female, but looking at other sign up forms, this was the all-inclusive term that was widely used.
I also added the ability to set and change your location so that the user has the power to check concerts in other cities if they plan on traveling. The three progress circles at the bottom of the screen are added to reassure the user that this is a simple 3-step process to get started with the app. The rewards perk is included in this semi-onboarding process to give users a head start. The Genres Screen also reassures the user that they can edit this later in their profile for more customization.
Group 2: The Home Interface
The Home Screen is divided into three sections: Concerts, Interested, and Attending. This is an intuitive and organized way for users to either discover new concerts, easily access concerts that they have bookmarked, or check their concert schedule accordingly. As discussed before, I swapped out the carousel layout for vertically scrollable cards. The sign out button on the top left of the original design is removed because this can be done on the settings screen. Also, users usually want to stay signed in, so the constantly visible option of signing out is unnecessary. The number of points of the top right corner of the interface remains there to inform users and motivate them to gain more points. One of the original screens includes a concert discovering screen with the options to view upcoming and past concerts. I removed the “past concerts” option since users would be more interested in upcoming concerts they could potentially attend rather than concerts that have already happened. I also edited the artist photos to be a two-toned image that reflects the color palette of Sonotize for a cohesive look. With the primary and secondary colors of Sonotize, multiple colors for artist images would look too hectic on the screen.
The bookmarked concerts have a yellow corner on the top left to standout. This corresponds with the “Interested?” button on the individual concert screen. The “Attending” tab shows past shows that the user has attended as well as future shows that the user will be attending. This is inspired by AirBnB’s design option for booked homes. When choosing an individual concert to learn more about, I designed the screen so that the user would be more receptive to discovering new artists such as adding an expandable “Artist Info” section and including previews of the artist’s songs. This would allow easy access to content that users would normally not have immediate access to when deciding whether or not to check out a new artist. A constraint may be copyright issues regarding the song previews. In terms of purchasing tickets for Sonotize points, it is an easy 3-step process of choosing your seats and the number of tickets as well as paying. Saving your payment info on the third step will make future purchases even faster. There is a purchase limit of 10 tickets to discourage scalpers from reselling large quantities of tickets. At the end of the process, the user is met with a Congrats Screen to reward the user and reassure them with a confirmation email.
Group 3: Navigation Bar Options
Other options in the Navigation Bar include Rewards, Search, and Profile. I added labels to the Navigation Bar so that users do not have trouble understanding the icons. In the original design, I found that the star could mean rewards or favorites which confused me at first. The Rewards Screen includes rewards that you are able to redeem with your points as well as some options that require more points. These options are shown to allow users to know how many points to save up in order to get a better prize. The rewards are also shown in a card layout just like the Home Screen for an easy and intuitive navigation. When choosing a reward, the screen includes the math of how many points the user has left over after redeeming for more clarity.
Afterwards, the user is congratulated for the reward and reassured with a confirmation email on the next steps in using it. I added a search page to the navigation bar so that users have the option to find specific concerts that they wish to attend while gaining Sonotize points. The Profile Screen includes a picture of the user as well as the number of Sonotize points, location, genres, and the number of concerts attended. This is where the location and genres can be edited for more customization of results on the home screen. The information on the number of concerts is added so that users can be proud of how many concerts they have attended through Sonotize, and in return, know that they have gained points in the process. The original design also has an “About” screen, but I removed this since Sonotize is not a social platform. There is no need for an “About” screen if no one else will be viewing it.
Sonotize Screen Flow
Ways to Improve
While redesigning the app, I came across challenges and ways to improve the usability of the app for all users. It would be great to use the demographic information from the semi-onboarding process when signing up to find several target users after creating user personas for usability testing. The app can also be improved for accessibility to make sure colors and interactions are inclusive for all users. It would also be interesting to see how the Home Screen can be changed to be more engaging and customized for each user. For example, streaming services such as Spotify and Netflix show recommended content or popular content to promote user return. This could also be a feature in Sonotize to promote customer return. Having calendar integration when attending concerts would also be a good feature for users as they have one less step in remembering the concert dates. For several of the screens such as the Search Screen, Rewards Screen, or the Home Screen, there could be a “sort by” option so that the user has a more refined outcome. For the Search Screen, there could be filters for location, genres, artist, or song. For the Rewards Screen, the user can sort the rewards based on number of points or type of reward. As mentioned above, Sonotize is not a social platform. However, it would be interesting to see how users can connect with other users or friends to share concerts and find other people to go with in the area.
Redesigning Sonotize was a very fun and engaging experience. It allowed me to think of aspects of design that I have not encountered as well as learn more about different design systems and guidelines. I am extremely excited for when Sonotize officially launches and hope that you are too! Thank you for reading this case study, and check back for more:)