Brief
Soundclash is a festival in Toronto which holds a competition for all kinds of singers and musicians. They have activities and a variety of different foods for visitors. The Soundclash app provides all the information needed for visitors to easily plan and navigate at the festival.
Problem
How might we make it easier for visitors to navigate and plan their experience at Soundclash?
Solution
Since visitors are forced to look at the Soundclash website formore information, a creation of a mobile app using existing information was proposed allowing convenience and ease of use for visitors.
Research
User Research
We first looked into what the festival had to offer to gain a better understanding of the type of content they had on their website. Then we surveyed 15 people to see how music they listen to, the genre they enjoy the most, where they hear about these types of festivals and as well as where they listen to it from.
Affordances
Creating these four different categories helped visualize the user’s needs for what the app should contain and provide clear goals to focus at throughout the design process.
Personas
Using the knowledge obtained during the research phase, two personas that best represented the type of users was developed. Adding concerns, scenarios and objectives helped guide a better understanding for the type of content and information that would be best implemented into the creation of the app.
Site Map
Grouping the information under main and sub categories is best represented with a site map because it helps organize the pages that will be incorporated into the app design.
Flowchart
A flowchart was created to better understand a typical user’s navigation of the app. It also helped decide which pages to consider and pay more attention to while developing the design of the app.
Prototype
A paper prototype was produced for user testing gain feedback of the current design. Some buttons were found unnecessary because it was repetitive and users wanted a “back” button to go to the previous pages. With this new information, the wireframes were refined and ready for digitizing.
Design
Style Tiles
During this phase, new design guidelines were developed using different colour schemes and typography. This helped create a better visual and feel of the overall app.
High Fidelity Wireframes
The chosen style tile was used as a guide to help develop the final high fidelity mockups for the app.
