About two weeks ago we introduced a basic idea of a social media application service to our readers. This time our team (@giuliapunktv, @zigenculten and @jmasvoulas) is back with fury and ready to reveal further details about our application, as well as talk about service functionality and tools.
Interestingly, although the process of developing mobile application implies changing some details on the way, we altered practically nothing. There are still some things which remain questionable for us, for instance geo-tagging function and some design patterns, like rating system or clickability of badges. However, these tools are problematic only from the point of view of developing and launching, rather than anything else. Nevertheless, our core concept and most important implications remained untouched.
In the following lines of this blogpost you will be able to get a sneak peek of our application and its basic tools and pages. First, we will describe how our application will be (or should be) organized. Second, we will provide an insight of the data that our service will store in its database. Last, our readers will get a chance to view a stop motion video of our paper prototype, thus getting a dynamic preview of the service. Sit back, grab a cup of coffee and enjoy the experience!
Map of the site
The first thing we did when we started designing, was to create a map of our site and connect the dots between the different functions. As you can see in picture 1, as soon as the user opens the application he/she is presented with the option to either log in or register.
Both of these options lead to the same result, our welcome page and our navigation bar. The bar will include four buttons: near me, search, add, and user profile. But, let’s take a closer look at the registration menu and the 4 main buttons.
In picture 2, we can see the login/registration page in detail.
Congratulations you’re logged in CRABster!
4 Main Buttons
As it was mentioned earlier, as soon as you manage to log in you will proceed to the main page of the application. There you will be welcomed to the world of CRABster, and as it can be seen in picture 3, and you will be presented with two options, events and shops. By clicking on these buttons, you will be able to find either the shops that are located nearby or the events that will take place around your area in the near future.
Next to the near me button (the one on the far left), there should be the search button (magnifying glass icon). As a matter of fact, in picture number 3 the search button is located in the 3rd place. However, we decided to swap it with the add button for interaction design reasons. By pressing the search button you will be presented with the option to either search for a shop or an event in a specific location, according to your area of interest (comics, RPG/LARP, board games). As soon as you choose, you will be presented with the results of your search.
The next button should be the add option (plus symbol icon). Here, you will be given the opportunity to create your own event or adding a shop to the database.
The last button is the user profile one (human sketch icon). Here you will be able to see your personal information, such as your profile picture, nickname and an optional short description of yourself and/or your interests. Moreover, you will be able to see the number of the reviews you have written in the past and the number of collected badges.
It should be mentioned that in the upper right corner of the frame there should be a settings button. By, clicking on that you will be able to change some of your personal information, contact us or log out.
In picture 4 you can see the data that will be stored in the service’s database.
1. User Tab:
- About me
- Registration Date
2. Review Tab:
- Review Text
3. Shop Tab
- Shop Name
- Shop Location
- Shop Address
- Board Games
4. Event Tab
Visual Presentation of the Prototype
But enough talking for now! It is high time you feasted your eyes with some visual presentation. By clicking the YouTube link below, you will be able to see how the prototype of our application works. Next time, we will present you the final design of our application. Till then, take care and keep on reading!