Prototyping - Take434/Appollon GitHub Wiki
J. Detand, R. Bastiaens, B. Grimonprez and O. Rysman describe prototyping as any technique that can translate an idea into something concrete [1]. This also means, according to them, that "[any] prototype (...) has a specific objective/goal" ([1] page 1). They go on to explain, that a prototype is meant to "better understand the complexity of a design" ([1] page 2). While this study is not specifically focused on software development, the definition describes the goal of prototyping in UI design very well. It is important to better understand the complex design of a website and refine it to really fit a clients needs ([2] section 2.1.3).
To start developing an app it is necessary to have a clear idea of the wanted functionalities and requirements [3]. Therefore the first step is to brainstorm different features that should be implemented in Appollon. This was done together and simply written down as a short list. The asterisks indicate which features should have priority.
planned features, screenshot
During this step it is import to keep the Spotify API in mind, because it provides the data. It is not possible to implement any features, if the API does not offer the needed data.
When developing any application, the information architecture is essential to the user experience [4]. In the case of Appollon it was decided that the following features would be implemented
- personal statistics
- overview over the top tracks
- users top genres
- playlist statistics
- different genres in playlist
- artists in playlist
- audio features of songs in playlist
- listening history
Furthermore a login page, a home page and a loading screen would be needed.
There is already a hierarchy apparent here. "Personal Statistics", "Playlist Statistics" and "Listening History" are the most general categories the features can be grouped in.
Due to the nature of the information architecture the navigation is pretty simple to conceptualize each of the categories will be its own page.
wireframe for the nav-bar, screenshot
The pages are, in order: home, personal statistics, playlist overview and history.
From the playlist overview page it will be possible to select the different playlists to analyze.
As shown above the currently selected page will be highlighted by being moved up and having a circle around it.
The wireframing part of the prototyping process has its own wiki page, read more about it here.
The actual prototypes for Appollon can be found on this wiki page.
The prototyping process is a very important part of the overall development of any application or website and it definitely made the actual implementation of Appollon much easier.
It helped to decide on layouts, colors and even before that, was very important to decide on the features of the site as a whole.
Prototyping
- https://citeseerx.ist.psu.edu/document?repid=rep1&type=pdf&doi=cf6cf251be13f7fbdd45c6deb4d94c565c25db32
- https://www.researchgate.net/publication/283327322_Prototype_development_in_mobile-learning_design_research
- https://www.mockplus.com/blog/post/prototyping-method
- https://www.andromo.com/blog/how-to-prototype-mobile-apps/
Information Architecture
- https://link.springer.com/article/10.1007/s12008-020-00697-2
- https://www.browserstack.com/guide/importance-of-information-architecture
All images on this page are screenshots of our own work.
[1] Jan Detand et. al 2010 The role of prototyping in product development accessed on 24.07.2023
[2] Carfagni, M., Fiorineschi, L., Furferi, R. et al. Usefulness of prototypes in conceptual design: students’ view. Int J Interact Des Manuf 14, 1305–1319 (2020) accessed on 24.07.2023
[3] A Complete Guide to Web Development Process accessed 31.07.2023
[4] Anastasia Stefanuk 2020 The Importance of Information Architecture to UX Design accessed 31.07.2023