mStore - Presentation

This post allows access to the presentation slides of mStore application. Basically it briefly introduces all the features discussed in previous posts and acts as a support for the grading presentation.

The presentation can be found here

mStore - "Searching a movie" Use case

User have two possibility to search a movie: touching screen(browsing) or by voice.Because an use case using voice command was wrote in another post, I will describe an use case how an user can search a movie with touching gestures. Steps are illustrated below.


1. From the main page tap the Search icon.

2. After that the next page will appear. Here you must write in the text search using the keyboard. The text is suggested by Auto-complete function.

After that you have to press Search button on the right top. Then the keyboard will disappeared and a list with searched text will be displayed on the screen. Tap the link with the movie and proceed with the next step.

3. In this section you have details about movie by pressing details button, you can view reviews, opinions and articles or watch a movie trailler by pressing the links related to your wishes.

4. When done tap the Add to basket button to place the movie into the shopping cart. 

mStore - Use Case

One of the main feature of our application is that user can perform actions without touching the screen, but only with vocal commands. The following steps describe an use case, where a user buy Tichets, with voice commands.
1. First of all user must change settings of the Vocal Navigation.
So Vocal Navigation Settings button must be pressed, and here he must check:
a. Enabledb. Enable "Show grid on sound", if he wants a help of guiding vocal navigation trough the selection point.
Also an important step is to train the application with own voice. This can be done by pressing Train Vocal Recognition. Here some lettern and numbers need to be pronunced, so the application to recognize the commands.
When done we must return from here by pressing back button.
All the changes from this settings page will be automatically saved.

2. Than we will go to home by pressing mStore button in the top left of the screen.

3. For buying tickets user must say A-5 and the selection will move automatically to the ticketing page.

4. Choose seats and type Finish.

mStore - Bought Tickets

This is th
This is the bought ticket page. There are few infos on the ticket like movie name, places and dates.
There is also the possibility to cancel the tickets.
Another option is to use the tickets to get access at the event.
By pressing the "Use Tickets" a signal is sent to another device and the tickets are marked as used and the persons are allowed access to the event.

mStore - Questions, Options, Criteria

QOC ( Questions, Options, Criteria ) is used for design space analysis. It identifies the key design problems as questions and possible answers to questions as options.
QOC uses criteria to explicitly describe the methods to evaluate the options, such as the requirements to be satisfied or the properties desired. The options are linked with criteria positively or negatively and these links are defined as assessments.

1. How a user can navigate ?

O1: Touch screen
O2: Vocal navigation
C1: Accessibility
C2: Touch screen only interaction

2. How user can buy a movie ?

O1: Navigate through menu to movie store
O2: Search movie
C1: Accessibility
C2: Low user effort

3. How to display options and settings buttons ?

O1: Action bar
O2: Menu
O3: Dropdown list
C1: Accessibility
C2: Common pattern

mStore - Use Case Diagram

Here there is an use case diagram describing our application, and user's main actions.

mStore - User Manual

In this manual you will find technical information like finger gestures, switching between tabs, how to search for an item, how to change settings, how to buy items and more. 


User manual for our project called mStore can be found here.

mStore - Buying tickets

mStore has the option to buy tickets. The first screen allows the user to select the number of tickets for each age segment and allows access to the second screen where the user will select the places for the tickets.

mStore - Payment options

This screen allows us to choose the payment mode and configure multiple payment modalities.

mStore - General settings

This screen allows the the user to configure multiple options regarding physical addresses, names payment method and item display mode.

mStore - Internationalization

This screen allows us to configure various settings related to Language settings like store general language, movies language filter and other.

mStore - Category browsing

This screen shows how are displayed multiple categories in a tree like manner. One thing to note here is that when more that 2 levels deep categories are reached, only the deepest two categories are displayed. The others are hidden in the upper part of the screen.














The second screen shows the same categories browsed but now the results are displayed as a list and not as a grid. This feature is configurable from the "General settings" menu.

mStore - Vocal navigation

This store supports vocal navigation by speaking horizontal and vertical coordinates. These coordinates can be visualized by making a sound previously configured.
The screen on the left shows the screen slightly faded and a grid on top of it. Horizontal lines are noted with letters and vertical lines are noted with numbers (other combinations are also available).
to enter in the Music category you have to speac the combination corresponding to the Music button on the first line which is "A-2".









The second screen helps you configure the vocal navigation functionality. You can enable/ disable it, enable or disable "Show grid on sound" or set the grid lines noting mode. Vocal navigation mode can be configured in following ways:

• letters and numbers.
• only letters on both X and Y axis.
• numbers on both X and Y axis.

Another function configurable from this screen is the "Show grid" sound. This sound is used to show grid without touching or pressing any button. The grid will appear for a short period of time (1 second) to guide the user in speaking the correct coordinates of each button.
However, after a period of time of using the vocal navigation, this grid won't be necessary at all because the user will learn the coordinates.



Another feature related to vocal navigation is the "Training" screen. This screen is useful to configure the application to correctly identify your voice and the coordinates you are targeting by voice.
The training session requires the user to speak letters and numbers as well as few combination of these.

mStore - First page and scrolling

This is the first page of the store. On the top site there are five buttons each with specific functionality as follows:

• first button on the left takes the user to the configuration screen where options like email address, payment mode and item display mode can be configured.
• the second button shows a grid used for vocal navigation.
• third button allows configuring store language, results languages and more.
• the fourth button shows the shopping cart page.
• the fifth button opens the search function of the store.

Right under this top bar, there is the first line displaying four of the main categories. These main categories may contain subcategories or only products.
The fourth category from the right is slightly faded, this thing meaning that there more than four categories and we must scroll to the left to uncover them. This is a general pattern used in the entire store: to show that there are more items that what is displayed the last visible item is slightly faded. This scroll method is available for both the horizontal and vertical items.
For each of the four main categories, under the "Most popular" band there is a row displaying most popular items in the respective category. These items are as well scrollable on the horizontal.
Scrolling these categories can be done in two ways:

• scrolling the categories icons in the top (right and left)
• scrolling the rows with the most popular items on the vertical.

One thing to note here is that either of the scroll methods used will scroll the other part as well.
This feature is illustrated in the second wireframe below.
It can be observed that the scroll appeared in both sides (left and right) on the categories row.
















In the third wireframe the scroll on the horizontal items is presented:

• first row with applications has scroll on the both sides.
• the second row has reached the maximum scroll on the right.
• the last two rows are not scrolled.