Ironhack — Challenge 2: Wireframing

Ironhack’s Prework: Janine Wieting_Challenge2

For my second challenge, i had to create simple wireframes of an app of my choice. I decided to go with Shazam, because i use this app quite often and i like the user flow and the design. But first of all, a few words about wireframing:

What is Wireframing?

Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added. (https://www.experienceux.co.uk/faqs/what-is-wireframing/)

User Flow and UI Elements:

Imagine you listen to a great song, but you don’t know the song’s name. Here, Shazam comes in very handy, because you can quickly open the app and click directly on the Shazam-Button — which is basically a button, which starts a recording (Screen1).

Shazam will search for the song and show it. It also shows on the first page the recent Shazams. Sometimes, you want to check on that song later, so it is saved in your history. In this example, we want to listen again to a track, which we have shazamed a while ago. You just swipe up the indicated screen, which leads you to the second page (Screen2).

There you see you history of your Shazams. We would like to see them all in a list, to select, so we click on “Shazams” and get to another page (Screen3).

Now we have everything in order and would like to listen to that track again. We click on the song title of one particular track — here we chose “Liquid Night by Route 8” and land on the next page (Screen4).

You can now either press play, so that a short sequence of the track is played, or you choose “Play whole song”, which leads you to the last page (Screen5).

As I have not downloaded Apple Music, I get the option to listen to the full track, if i download the App “Apple Music” for free.

UI Elements: Buttons, Icons, Images (Album Covers) and different text types.

To sum it up, we can say that the user experience is very intuitive and easy to understand and handle.

Let’s see what we got:

You can also find an interactive prototype in Figma.

What i have learned

This was the first time for me to create wireframes to show the main functions of an app — in a structural level. I had a lot of fun analyzing the design, structure and functions and reverse-designing it. First, I was a bit sceptic about the time to invest and how the result would look like. The more I have tried, the more Igot into the flow and got used to it. The one important thing I have learned is that it is not about reinventing the wheel, it’s about using and also creating tools, which can be reused and make the whole process much easier and faster.

Thanks for reading and feel free to leave some comments:)