A MUSIC PLAYER, REIMAGINED!
The set of wireframes you see below were created by me for a class in User research methods, wherein, we were required to use questionnaires and qualitative methods such as user interviews in order to understand the requirements of end users.
In this case, the theme was to redesign a music app, using the information gathered by this process.
A series of design iterations followed and the wireframes provided below are the results of the final design!
The screens you see above belong to the opening/home page and the leaderboard feature of the app. The scores that you see ascribed to each user on the 'leaderboard' are the results of their performance in a kareoke battle, about which we will see later.
Since I tried to provide attention to all details, right down to the minutia, I gave thought to elements like positioning of the title in the landing page and its subsequent design is what you see above. Besides that, we see the menu that gets opened upon clicking the burger icon at the top right corner.
The screen presented here shows the playlist. The playlists have a title and a mood tag, which indicates the mood that they are most likely to elevate the listener to or to support a specific activity. The mood tags are based on the mood that each song in the playlist carries. In case there are songs with different mood tags within the same playlist, the 'mood tag' of the playlist then says "mixed". The songs' moods are determined by a process where the users get to select the mood it represents when they are listening to it. The mood with the most votes gets assigned to that respective song as a 'mood tag', thereby including an element of user participation beyond the usual.
The biggest grouse of my sample user group was regarding the issues they had in converting songs to a specific format. The multi device owning nature of my study's participants further exacerbated this issue.
I therefore included an option, wherein the users can cache their songs and export it to a specific format to be played in any of their other devices as the case may be.
The sequence of screens you see above show the steps of two different functions. The first four screens show the steps involved in searching for a track, getting the results of the same, looking it up, reading the biography of the artists, viewing the lyrics of the song as it plays(wherein the part currently being sung is highlighted in a contrasting color).
Again, this is based on user research, wherein my users felt that the possibility of seeing lyrics was missing in their apps.
The final three screens show the Karaoke feature, where you can challenge a friend to a karaoke battle for a specific song and the results of the same are reflected in your leaderboard.
PICT-O-QUEST
Pictoquest is a game that was designed for our "Designing advanced services" class(in my previous masters), the aim being to assist Swiss Italian residents to discover their region, through an immersive, fun and connective experience.
This is an mobile based service/application, designed for RSI, where the main aim was to create an app that had the flavour of the locality and was yet able to maintain and grow a user base amongst the region’s youth in particular.
Here the main aim is to play a quiz game along the lines of “Guess where?”, with user generated photos.
The main features are therefore to discover places you didn’t know existed, generate questions and challenges to expose your users to places you find exciting/new and to challenge friends in a heads up mode to see if they are as astute as you in their knowledge of the locality.
Considering the youth demographic that was to be our target, we tried to keep the app immersive and to create a system where every question was challenging and provide an overall experience that was engaging while maintaining that element of surprise as well.
AN INFOGRAPHIC VIEW OF THE WORLD'S ECONOMIES, TRANSCENDING TIME...
I thought mixing it up with an infographic I had done for my New Media design class would be interesting and worthy of addition here.
It is an infographic interpretation of Angus Madisson's work, which is about the position of the world's economies as percentage of world GDP over the past two millenia, contained within currently existing national borders.
The main theme that I have is used, is one that I call “ornate minimalism”. This is a mix between straight lines, circles and illustrations within relevant spaces to deliver the concept behind the infographic in an effective way and maintain user interest.
The idea was to maintain user interest through relevant illustrations, while keeping the overall outline as minimalist as possible to avoid crowding and maintain a coherent picture.
Since the article is one about the world economy over the past two thousand years, I have made use of a background that resembles a papyrus scroll. A lot of patina is present to give it a look that shows its historical perspective.
The next step was to draw the scale, which is present to provide the users with a tool to easily compare the size of different economies over the time period, while avoiding over-usage of text. This scale is elongated at 50 and 100, so as to provide easier viewing, as far as the figures are concerned.
The outline of the main part of the infographic comes next. It is made to resemble a key, which is used as a metaphor here. The key is suggested as the means to material prosperity, since we are viewing cold economic figures. All the graphics representing the ages are ensconced within this key, which along with the wheel is probably the one piece of technology that is of a eternal nature.
The key is then split into different time frames, with a small notch to represent the same. The four ages that concerns this article, namely Iron, Medieval, Industrial and Digital are all represented here.
Provided below the key is the timeline, with the beginning and end of each age marked according to the year. Also provided are labels to identify the ages.
Each country is presented closer to the year it was most dominant in that respective age.
Finally, within the portion of the key representing each age, we have an illustration. A cave painting for the Iron age, a crown with two fleur di lis patterns surrounding it-representing the power and prevalence of royal rule and aristocratic power during this stage, a steam engine chugging coal for the industrial era and 1’s and 0’s representing the digital age.
AN APP FIT FOR TOMORROWLAND!
The deck of screens that you see below, were done by me for my HCI class that took place in the previous semester.
Our brief was simple and to the point. We were required to design an app for the music festival known as "Tomorrowland", that takes place anually at Belgium.
Provided below is what transpired.
The opening screen follows a simple template with a centrally positioned title.
The home page is one where we have a total of seven elements.
Since the artists are the main draw to the festitval, their namesake feature is central and others are in their vicinity.
This is metaphorical to the star(the performers) and the planets orbitting it.
This feature, known as "sneak peek", is one where the user can take a glimpse of the live performance of any band going on at the moment and decide if it is to their liking, before heading off to that stage.
The can get info on the band or view directions using a map, as shown in the second screen.
Whenever a search operation is performed, all places it is mentioned are displayed. You can choose that which suits your need for the moment.
The ticket is stored digitally, to avoid hassles with physical copies.
This is a feature I call "Fist bump".
It is used to tag new friends whom you may meet at the venue and to keep in touch with old ones, so that you can reunite with your group, even if you lose them in the crowd, which apparently happens to many of us in such places.
In order to do this, firstly, you and the person you intend on tagging, need to open the feature and bump fists.
Viola, you are now tagged as friends and can keep track of each other via the maps feature on the app, as shown in screen three. All your tagged friends are displayed in the app and your relative feature is shown as well.
A sweet and simple demo, where you are shown how you can select the friend you choose to meet, via the map app, and are then guided towards them.
Statutory warning against stalking included!
As for the refreshments section, it is neatly layered into the types of cuisine, the selection of which opens up all restaurants serving food items in that category. If you click on the map icon adjacent to their names, you are led to them with the help of a map, as shown in screen three.
Supplementing menu cards in restaurants, we have QR code posters, which when scanned, take us to the digital-menu as shown above.
The gallery feature is divided into two sections, one composed of all the pics you have taken and the other a college of all those taken by the community of users present at the festival.
Besides this, you can take a pic and tag it with a title you deem fit.
Finally, we have the maps feature, which is a regular map but with an exclusive focus on the Venue and its surroundings, thereby providing information that is faster, more focused and easier to digest.
Besides this, all your "Fist bump" friends are always present in the map for you to keep track of at all times.
