Wireframing - Take434/Appollon GitHub Wiki

Wireframing is another very important step in UX Design [1]. This process describes the creation of wireframes, which are simple concepts of the different pages of an app, that focus on structure and functionality opposed to the final design and details like colors [1].
According to the definition, wireframes are not bound to any single medium, but can be created using special programs, plain html or with pen and paper [2][3]. In the case of Appollon, a dedicated program, Figma, was used to create the wireframes and prototypes.

To start developing the wireframes it is important to know which pages are needed in the application, this has become obvious while developing the information architecture. In the following the wireframing process will be discussed for each page in the order they were developed in.

The login page is the first thing a new user sees when accessing the application, therefore it should provide a good first impression. To achieve this, some best practices are to keep the page as simple as possible and use clear branding [4]. The actual login dialogue will be handled by Spotify, additionally it was decided that there should also be options to view the code, access an about page and preview the app with an example account.
Here are the two wireframes created for the page:

The name of the app is placed in a box at the top of the page and bold, to create a sense of visual hierarchy and provide clear branding. Beneath that is a short description of the app with the four options the user has on this page presented below. Both wireframes also incorporate space for an image. It is also important to note, that the option to connect the users account to Spotify, which is the most important action on this page, is very prominent on top of the other options in both designs.

This is the page users will land on either after logging in or after opening the site, if they have already locked in previously. Therefore this page should aim to provide the user with an overview over the most important data and quick access to important features [6]. These are the three different wireframes for the homepage:

All pages employ the navbar, discussed above, there is also a header with the apps logo, which has not yet been developed in stage of the prototyping process and an icon to open a dropdown with less important interactions, namely logout and the about page. This follows the concept discovered in this article [5] (subsection 5) which describes, that the important actions, in this case the navigation, should be easily accessible while using the app one handed. In contrast the less important / destructive actions, for example logout, should be placed in the zone that is hard to reach with a thumb, so they are not accidently pressed [5].
The major difference between the three pages is the proportion between images and actual data. The first page is completely focused on data and quick-links, providing an overview over the users top genres and quick access to top songs as well as playlists.
However this might feel too cluttered, therefore the other two approaches try to add whitespace and images. This makes it possible to easily decide on a layout by comparing the existing wireframes.

This page represents a feature, that will not be implemented in the scope of the university project. There is a wireframe for it, but it is not very detailed and will not be discussed further.

On this page the user will get an overview of his playlists. They can then click a playlist to get to a detailed analysis.
Because of the fact, that users have an unknown number of playlists a simple list is the best choice to present them. It can be extended any number of times to fit the users amount of playlists. The two designs above also include a few details about the playlists, such as the title, the amount of songs in it and the creator. The only difference in design is the placement of the playlist cover. In the first design the cover is inside of the box symbolizing a playlist, this looks very static, especially compared to the second design in which the covers are offset and the boxes smaller, making for a more open and dynamic feel.

The personal statistics page is meant to display statistics describing the users recent listening activities on Spotify. The design of this page should be data focused and easy to understand.

This wireframe shows the users favorite genres and artists as easy to comprehend pie charts and uses a bar chart to give an overview of the listening activity from the last week.
Furthermore the average audio features of the top songs are displayed as boxplot diagrams. This was decided to be the the way audio features should be visualized on the site. A more detailed explanation of these plots, why they were chosen and how they are implemented can be found here.

This is the page detailing statistics of a specific playlist, it is reached by clicking on a playlist on the overview page. The wireframe looks as follows:

At the top of the page there is a section describing which playlist is being viewed. Below that is are two pie charts showing the artists and associated with the playlist. The last component of this page is detailing the audio features of the songs in the playlist. This is done using the same boxplots that are present on the personal statistics page which has the effect that the user can better compare the average audio features of his top songs and playlists. The fact that they are in the same format enables this.

The next step is the actual high fidelity prototyping

[1] Jaye Hannah 2023 What exactly is wireframing? A comprehensive guide accessed on 24.07.2023
[2] experienceux what is wireframing accessed on 25.07.2023
[3] interaction design foundation what is wireframing accessed on 25.07.2023
[4] Jamie Juviler 2022 8 Login Screen Best Practices for your website or app accessed on 25.07.2023
[5] Palak Sanghani 2023 15 mobile app design best practices accessed on 25.07.2023
[6] Sandor Zelenka 2019 5 Awesome App Home Pages: How Great Design Increases User Loyalty accessed 31.07.2023