IRONHACK-Challenge 2. Wireframing [Spotify]
My second challenge asked by Ironhack was: “create a wireframe version of the user flow of the chosen app based on screenshots or high-fidelity prototype screens of such app. Your final product should be a simple 5 screens’ interactive prototype built in the tool of your choice.”I chose Spotify application for this challenge.
Spotify is a music streaming application available on mobile and computer thats allows you to listen, search and download music of your choice.
I am using this app every day. I subscribed to have possibility to download music and replay it even without wifi… I am a huge fan of this app 😁😁
The app is intuitive and UI design is not full of writing, colors _ Black background avoids hurting eyes when luminosity of your screen is high and highlights album pictures _ 3 main categories so no need to loose yourself in a complex menu: home, search and library_ Spotify contains several UI elements and is a good exercise to represent it on wireframe version.
LO-FI USER FLOW:
I decided to show you the task analysis “how to search a music on Spotify?” First way by searching in your personal dowloaded music, second way by searching on available songs on the app.
1. Homepage: User has access to several categories ranked by personal list music, music style, artists, etc. and a footer with “home”, “search” and “library” buttons. When the user scrolls to the top of the screen he can click on one of his personal music list (or click on the icon “search” on the footer -> check 2bis step).
2. A list of musics that the user has downloaded previously is available. To have more information about the music, the user clicks on the music picture above the footer.
3. After that the user can see the album picture, music time, artist name, advance or replay the song with a slider.
2bis. The user clicks on the icon “search” to have access to app’s resources and find a specific song he still doesn’t have in his library. The app offers several categories as the homepage. An input control allows the user to write and find a specific music title or artist.
3bis. Spotify display the user’s music but also previous researches.
4. The user clicks on the music he wants to listen.
SCREENSHOTS
WIREFRAMES
PROTOTYPE. INTERACTIVE WIREFRAME
WHAT I LEARNED?
This is my first time using Figma and creating a digital prototype. Figma platform is intuitive and not complex as Photoshop ah ah
Figma allows us to simplify an application or a website and easily focus on major UI elements.
I learned how to use tools, how to connect UI elements together via several exercise plus this challenge! Lo-fi and interactive wireframe are both interesting to use to bring a future vision of a product.
Thank you for your attention 😊