UX Design Mobile Demo Shop Template for MoAction CMS



Develop application interface “Catalog” on from which will be set up components of the mobile online store for designer websites that contain catalogs of data and arrangements user interaction with them, in the mobile-first CMS MoAction

Functional Requirements

The catalog can be any, but it was decided that we do as an example product catalog online store. The interface must be enable the user to view the categories, use the search, to customize filters and sorting of search results as fast comfortable for use on touch devices to navigate to quickly move into categories. Catalog items could have arrays of measured parameters and tags binary characteristics that were built for the list.


Develop static and interactive prototypes in Axure, documentation and routes the user to the directory.

The level of detail

See pages, interface types, the functionality of each type of interface representations when changing the implementation of functionality, components and component status.

Materials that have been created:

  • PDF document (7 pages) with the functional groups of screens and screens for each interface type, PNG files;
  • route ux-cases (2 sheets) – typical scenarios of user interaction with the catalog.
  • Documentation interfaces (table in XSL), which contains information for each screen and states, and the states of the component according to the scheme conditions for the appearance / condition and response to user actions / method of implementation, only the description of more than 100 positions for the screens and controls, each according to the 4th aspects of the scheme.
  • Interactive prototype work and interact within a page interface components. Made for all components. Search and transitions on the search results page redirects to the general navigation implemented using global variables.
  • An external css-file for the font icon.

The type of interface, well-developed in the prototype

  • Catalog navigation
  • List of items
  • Product
  • Search with autocompletion
  • Filter facet navigation
  • Shopping cart and order form

The work was carried out in several stages:

Development static prototypes

Result: file Axure with each group screens on a single sheet of paper (7 pages) and a set of PNG files for each screen (~ 50pcs.)

Grouping prototypes, displaying each type of interface, change the order of the pages, screens, and states.

Result: PDF document (7 pages) with a global numbering of all screens attached to the group, with the number of markers to control for identification in the documentation.

Development of documentation for interfaces

Result: XLS-file at> 100 positions for the screens and controls, each with 3-m aspects

An example of a component of a form of ordering

Interface / component Arrival conditions Conditions and the response to the action How to implement
Interface form Ordering / Component “Accordion” – 3 steps to make the order data Accordion component consists of three parts, the first of which is always deployed, others are hidden, the unfolding of each of the next block depends on the occupancy and the validity of the previous step. All fields are required, the amount of their required minimum. On validly completed previous units can return;
tap on the button header section – opening section, its content can be changed again, but will also have to pass again through the validation, lets go (open automatically) to trace. section of the form
Finalize jQuery Accordion plug-in: the first event of the opening of each section, except the first one associated with validity of filling the previous section
UX-Cases routes Users

The result is given in the form of PNG files with a detailed chain of screens changes in the implementation of user behavior on the site (2 scenarios)

The following are examples of the steps of the route, and fragments of Customer Journey Map with groups of screens in the chain of actions of the user

Using contextual search in the header

Motivation member: “I went to the main page, I know about the name of what I need, I quickly find it by searching?”: enter the beginning of the product name, brand, or words of description, after entering part words the system will prompt coincidence

item sample through a filter (facet navigation) in the category or search results

Motivation member: “I got to the page where too many products, how do I choose on those characteristics that I know?” : Select results display products through an integrated filter, customized selection from many parameters

Viewing category pages in two modes, the transition to the item card

Motivation member: “I fall into the category of this site for” pants “in the search engine what is interesting, what pants do now in vogue?”: this user is configured for a closer acquaintance with the range, it is expected that he will visit except list of goods and pages of the goods themselves; view products organized in two views – the tile and the list with the items for all product info – go to the page of the item card

Quick add product to cart

Motivation member: “I fall into the category of this site for” pants “, I looked already few easy sites here see fit, I buy it quickly”: buy and choose the right color and size, this item can be right on the page list goods to the next issue already.

View large image Product

Motivation member: “I like the product, I can see a thumbnail image on the small screen as consider its parts?”: the familiar applications function pinch zoom – increase / decrease of the fingers can be implemented on the website, comfortable moving between images swip gestures.

Adding product which has several sizes and colors, changing its quantity

Motivation member: “I like the product I want to buy 2 copies of what I have to do here?”: select izmenemye parameters size, color, without which the product is added to cart, add to cart, go to cart, add the amount , proceed to checkout

Interactive prototype in Axure

Result: Axure-build with sample pages and a site map directory on the example of an online store (15 pages) Axure-source file, where interactivity is implemented components of the project.