Graphical user interface for organizing merchandise images for purchase

Abstract

A disclosed method includes causing display of an outfit builder page in a graphical user interface. The outfit builder page includes (i) a navigation pane configured to display a plurality of categories as a selectable graphical elements to cause a plurality of merchandises being displayed in the merchandise viewing pane in response to selection by a consumer; (ii) a merchandise viewing pane configured to receive a first input to select a first merchandise, cause a display of an image corresponding to the first merchandise in the outfit viewing pane, receive a second input to select a second merchandise, and concurrently display an image corresponding to the second merchandise and the image corresponding to the first merchandise in the outfit viewing pane; (iii) an outfit viewing pane configured to allow the consumer to move the images corresponding to the first and second merchandises to another area within the outfit viewing pane.

Description

129823-824702PATENTGRAPHICAL USER INTERFACE FOR ORGANIZING MERCHANDISE IMAGES FOR PURCHASETECHNICAL FIELD

[0001] The disclosure relates generally to an application interface, and in particular to a graphical user interface (GUI) for organizing merchandise images for purchase.BACKGROUND

[0002] Many online clothing or accessories merchants offer styling ideas (e.g., additional suggested clothing or accessory items) based on one or more items previously viewed or purchased by a consumer. Conventionally, the styling ideas are presented to the consumer separately as other items, or in combination, as items laid out on a flat surface. Presenting the styling ideas in this manner has drawbacks. For example, the consumer may have difficulty imagining how the styling ideas would look on him or her as an outfit. Moreover, consumers can be indecisive and frequently add and delete items, including the styling ideas, from their shopping cart several times before curating the perfect outfit. Adding and deleting items from the consumer’s online shopping cart often requires switching back-and-forth between the page displaying the consumer’s shopping cart and the page displaying the online marketplace. As a result, shopping online for a complete outfit can be both frustrating and time consuming.

[0003] This section is intended to introduce the reader to various aspects of art that may be related to various aspects of the present disclosure described or claimed below. This description is believed to be helpful in providing the reader with background information to facilitate a better understanding of the various aspects of the present disclosure. Accordingly, it should be understood that these statements are to be read in this light and not as admissions of prior art.199011987.2129823-824702PATENTSUMMARY

[0004] In one aspect, a computer-implemented method for organizing merchandise images for purchase is disclosed. The method includes causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with a backend system. The outfit builder page displayed in the graphical user interface includes a navigation pane, a merchandise viewing pane, and an outfit viewing pane. The navigation pane is configured to display a plurality of categories. Each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer. The navigation pane is further configured to receive a first input from the consumer to select a first category of the plurality of categories, and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane. The merchandise viewing pane is configured to display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises, receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane, and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane. The outfit viewing pane is configured to allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane. The merchandise viewing pane is further configured to display the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles, receive a third input from the consumer to select a second merchandise. The second merchandise is selected from the first plurality of merchandises or the second plurality of merchandises. The merchandise viewing pane is further configured to in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane, and the outfit299011987.2129823-824702PATENT viewing pane is further configured to allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.

[0005] In another aspect, a server for organizing merchandise images for purchase is disclosed. The server includes at least one memory configured to store instructions, and at least one processor communicatively coupled with the at least one memory and configured to execute the instructions to perform operations including causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with a backend system. The outfit builder page displayed in the graphical user interface includes a navigation pane, a merchandise viewing pane, and an outfit viewing pane. The navigation pane is configured to display a plurality of categories. Each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer. The navigation pane is further configured to receive a first input from the consumer to select a first category of the plurality of categories, and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane. The merchandise viewing pane is configured to display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises, receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane, and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane. The outfit viewing pane is configured to allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane. The merchandise viewing pane is further configured to display the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles, receive a third input from the consumer to select a second merchandise. The second merchandise is selected from399011987.2129823-824702PATENT the first plurality of merchandises or the second plurality of merchandises. The merchandise viewing pane is further configured to in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane, and the outfit viewing pane is further configured to allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.

[0006] In yet another aspect, a non-transitory computer readable media including instructions stored thereon is disclosed. The instructions, when executed by at least one processor of a computing device, cause the computing device to organize merchandise images for purchase by performing operations including causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with a backend system. The outfit builder page displayed in the graphical user interface includes a navigation pane, a merchandise viewing pane, and an outfit viewing pane. The navigation pane is configured to display a plurality of categories. Each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer. The navigation pane is further configured to receive a first input from the consumer to select a first category of the plurality of categories, and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane. The merchandise viewing pane is configured to display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises, receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane, and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane. The outfit viewing pane is configured to allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane. The merchandise viewing pane is further configured to display499011987.2129823-824702PATENT the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles, receive a third input from the consumer to select a second merchandise. The second merchandise is selected from the first plurality of merchandises or the second plurality of merchandises. The merchandise viewing pane is further configured to in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane, and the outfit viewing pane is further configured to allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.

[0007] Various refinements exist of the features noted in relation to the above-mentioned aspects. Further features may also be incorporated in the above-mentioned aspects as well. These refinements and additional features may exist individually or in any combination. For instance, various features discussed below in relation to any of the illustrated examples may be incorporated into any of the above-described aspects, alone or in any combination.BRIEF DESCRIPTION OF DRAWINGS

[0008] The following drawings form part of the present specification and are included to further demonstrate certain aspects of the present disclosure. The disclosure may be better understood by reference to one or more of these drawings in combination with the detailed description of specific embodiments presented herein.

[0009] FIG. 1A is a first example view of a front-end application for organizing merchandise images for purchase;

[0010] FIG. IB is a second example view of the front-end application;

[0011] FIG. 1C is a third example view of the front-end application;

[0012] FIG. ID is a fourth example view of the front-end application;599011987.2129823-824702PATENT

[0013] FIG. IE is a fifth example view of the front-end application;

[0014] FIG. IF is a sixth example view of the front-end application;

[0015] FIG. 1G is a seventh example view of the front-end application;

[0016] FIG. 1H is an eighth example view of the front-end application;

[0017] FIG. II is a ninth example view of the front-end application;

[0018] FIG. 1 J is a tenth example view of the front-end application;

[0019] FIG. IK is an eleventh example view of the front-end application;

[0020] FIG. IL is a twelfth example view of the front-end application;

[0021] FIG. IM is a thirteenth example view of the front-end application;

[0022] FIG. IN is a fourteenth example view of the front-end application;

[0023] FIG. 2 is a block diagram of an example backend system to which the front-end application executing on a consumer computing device is communicatively coupled with;

[0024] FIG. 3 is a block diagram of an example consumer computing device; and

[0025] FIG. 4 is an example flow chart of method operations for organizing merchandise images for purchase.

[0026] Corresponding reference characters indicate corresponding parts throughout the several views of the drawings. Although specific features of various examples may be shown in some drawings and not in others, this is for convenience only. Any feature of any drawing may be referenced or claimed in combination with any feature of any other drawing.

[0027] Some structural or method features may be shown in specific arrangements and / or orderings in the drawings. However, it should be appreciated that such specific arrangements and / or orderings may not be required. Rather, in some embodiments, such features may be arranged in a different manner and / or order than shown in the illustrative figures. Additionally,699011987.2129823-824702PATENT the inclusion of a structural or method feature in a particular figure is not meant to imply that such feature is required in all embodiments, and, in some embodiments, it may not be included or may be combined with other features.DETAILED DESCRIPTION

[0028] The following detailed description and examples set forth preferred materials, components, and procedures used in accordance with the present disclosure. This description and these examples, however, are provided by way of illustration only, and nothing therein shall be deemed to be a limitation upon the overall scope of the present disclosure.

[0029] The systems and techniques described herein are directed to a shopping platform or other type of electronic shopping system, for example, using a kiosk, that allows a consumer to build an outfit. The built outfit including one or more items that can be simultaneously added to a shopping cart after the outfit is approved of by the consumer. The consumer can share the built outfit to others via social media and / or an email address. Additionally, the graphical user interface displays how the outfit is built, based upon the consumer selected items, allowing the consumer to visualize how the outfit would look when the outfit is worn by the consumer. Accordingly, the systems and techniques disclosed herein allows the consumer to try different styling ideas or different clothing and / or accessories items of an outfit without actually putting them on. Additionally, the systems and techniques disclosed herein enable the consumer to add all clothing and / or accessory items of the outfit that the consumer has built into the customer’s online shopping cart for purchasing or sharing with others via social media and / or an email address.

[0030] Embodiments described herein are directed to a graphical user interface for viewing different clothing and / or accessories items offered by a merchant for purchase, selecting clothing and / or accessories items to build an outfit, and viewing the outfit before adding to the shopping cart. The graphical user interface may enable the consumer to view an item of the outfit for selecting, and the built outfit from the same interface, while also allowing the consumer to remove an item from the built outfit to try with another item using the same interface or without using forward and backward tabs of a user interface. While all items cannot799011987.2129823-824702PATENT generally fit in a single page size, the consumer can scroll up and / or scroll down to view other items offered by the merchant while still having a view of the outfit without being removed, minimized, or hidden from the consumer. Accordingly, the consumer would view other items for his or her outfit that is most likely matching with the outfit that the consumer has built.

[0031] In some embodiments, the graphical user interface may include a hierarchical element tree (also referenced herein as a page tree) to view items of a plurality of different categories in a navigation pane, a merchandise viewing pane to display a plurality of items from a category selected by the consumer in the navigation pane for selecting, and an outfit viewing pane displaying the items selected from the merchandise viewing pane on a mannequin. Accordingly, as described herein, the navigation pane, the merchandise viewing pane, and the outfit viewing pane are presented as part of the graphical user interface.

[0032] The plurality of different categories displayed in the navigation pane may include, for example, “New Arrivals,” “Dresses,” “Tops,” “Bottoms,” “Sets,” “Outerwear,” “Essentials,” and / or “Accessories.” Each category displayed in the navigation pane may be referenced as a tree element. Each tree element may be selectable by the consumer to display one or more items from the consumer selected category to be displayed in the merchandise viewing pane. Additionally, in some embodiments, one or more tree elements may be further expandable by clicking on the displayed tree element to display one or more additional subtree elements. By way of an example, the sub-tree elements may provide additional filtering criteria to display items that meets certain criteria including, but not limited to only, certain vendors or manufacturers, certain price range, certain material type, and / or certain colors. The navigation pane may also allow the consumer to search for a specific item.

[0033] The plurality of items in the merchandise viewing pane may be shown as an array of cards or tiles. The plurality of items in the merchandise viewing pane may be ordered according to a filtering criteria selected by the consumer. Alternatively, or additionally, the plurality of items in the merchandise viewing pane may be displayed according to a predetermined filtering criterion. The filtering criteria may include one or more of “Best Selling,” “Price Low to High,” “Price High to Low,” “Oldest to Newest,” “Newest to Oldest,” and / or “Featured.” An item shown in the array of cards or tiles may include an image and a899011987.2129823-824702PATENT description of the item. The description of the item may include, but is not limited to, an item name, a price of the item, any discount available on the price of the item, a short description of the item including material information, etc. The image may be overlayed with information such as, whether the particular item is “Out of Stock,” “Back in Stock,” and / or “Preferred Fibers,” etc., to highlight aspects of the item that is enticing to the customer.

[0034] As the consumer brings a cursor (or a finger or a pen in case of touchscreen display) over a displayed image of an item in the merchandise viewing pane, an overlay may be generated over the displayed image to display available sizes for the item. When one or more available sizes for the item are out of stock (or unavailable), the unavailable sizes may be distinguished from other available sizes using a different color or shading. In some embodiments, the consumer may scroll up or down to view all available sizes for the item. The consumer can select a suitable size for the item, and upon selecting a size for the item, the item may be automatically displayed in the outfit viewing pane.

[0035] The consumer may then select additional items displayed in the merchandise viewing pane, and the consumer selected items may be automatically displayed in the outfit viewing pane, as described herein. In the outfit viewing pane, initially the consumer selected items may be randomly placed. Alternatively, or additionally, the consumer selected items may be displayed side-by-side or above-and-below. The consumer may select the displayed image representing the item in the outfit viewing pane and move the image within the outfit viewing pane. The consumer may move the image to build an outfit, for example, the consumer may move an image of the “bottom” clothing to be placed below an image of the “top” clothing.

[0036] When the consumer brings the cursor (or the finger or the pen in case of touchscreen display) over the displayed image of an item in the outfit viewing pane, additional control options may be presented to the consumer. The additional control options may allow the consumer to enlarge or reduce the size of the displayed image. If the consumer does not like the item, the consumer may select and click on a cancel option to cause the item to be removed from the outfit viewing pane. The consumer may build more than one outfit in the outfit viewing pane such that the consumer can select the preferred outfit if the consumer does not999011987.2129823-824702PATENT wish to buy more than one outfit. This scenario is described herein using FIG. IM and FIG. IN below.

[0037] In some embodiments, the mannequin shown in the outfit viewing pane may be invisible such as without any body parts. In some embodiments, the mannequin shown in the outfit viewing pane may be visible such as with body parts. By way of an example, the visible mannequin displayed in the outfit viewing pane may have an aesthetic appearance of the consumer, and thereby the consumer can view the outfit as it looks on his or her body. The aesthetic appearance of the consumer may be generated and displayed based upon data collected using an image uploaded by the consumer or based upon data collected using a camera sensor. The camera sensor may be mounted on a consumer computing device (or a kiosk) executing a front-end application representing the graphical user interface on a display of the consumer computing device (or the kiosk).

[0038] In some embodiments, the graphical user interface may also include a graphical element showing a total price of one or more outfits displayed in the outfit viewing pane. Additionally, the consumer can save the one or more outfits displayed in the outfit viewing pane to a wishlist of the consumer or a shopping cart by selecting a respective graphical element displayed on the graphical user interface.

[0039] These foregoing and other embodiments are discussed below with reference to FIGS. 1A-1L, and 2-4. However, those skilled in the art will readily appreciate that the detailed description given herein with respect to these figures is for explanation only and should not be construed as limiting.

[0040] FIGS. 1 A- IL depict example views of a graphical user interface or a frontend application executing on a consumer computing device (or a kiosk). The graphical user interfaces (e.g., 100A-100N) provided by the frontend or client application may display conventional pages (e.g., web pages) for displaying a plurality of items offered by a merchant. In addition, the frontend or client application may be configured to display an outfit builder page in a graphical user interface as described herein. The graphical user interface may be implemented in a web browser client application or a mobile application using Hypertext Markup Language (HTML), JavaScript, or other web-enabled protocol.1099011987.2129823-824702PATENT

[0041] The graphical user interface may allow a consumer to view a plurality of items made available to a consumer for purchase, select one or more items from the plurality of items to build an outfit, and add all items included in the outfit in a shopping cart for purchase. Various examples in FIGS. 1A-1L depict a graphical user interface view during different stages of building an outfit and adding the outfit to a shopping cart.

[0042] For example, a graphical user interface 100 A shown in FIG. 1 A is a rendering of an outfit builder page in a tab 102 of a graphical user interface 100 A. The outfit builder page may be rendered on a consumer computing device (not shown) by a backend system (not shown) that is communicatively coupled with the consumer computing device. The outfit builder page is rendered on the consumer computing device based upon a uniform resource locator (URL) address entered in URL address bar 104. In one example, the rendered outfit builder page in the graphical user interface 100 A may have various partitions / sections such as, a navigational pane 116, a merchandise viewing pane 108, an outfit viewing pane 110.

[0043] The rendered outfit builder page may also include a panel 112 that allows the consumer to select merchandise from a specific category. By way of an example, the panel 112 may display categories such as, “New,” “Dresses,” “Clothing,” “Accessories,” “Wedding,” “Insider,” and / or “Sale.” The displayed categories are for example only, and depending upon the merchant, different categories may be displayed. A search element 114 may also be displayed on the rendered outfit builder page to allow the consumer to search for a specific merchandise. The search element 114 may be displayed within the boundary of navigation pane 116. Alternatively, the search element 114 may be displayed outside the boundary of navigation pane 116.

[0044] The navigation pane 116 may display various selectable graphical elements with respective text description for the consumer to select a particular category of the merchandise. For example, in the navigation pane 116, graphical elements may be displayed with text descriptions such as “New Arrivals,” “Dresses,” “Tops,” “Bottoms,” “Sets,” “Outerwear,” “Essentials,” and / or “Accessories,” etc. The consumer may select a graphical element to view available merchandise for the selected category in the merchandise viewing pane 108. The selected category may be distinguishably displayed in the navigation pane 116. For example,1199011987.2129823-824702PATENT the consumer selected category “New Arrivals” is displayed distinguishably different from other categories displayed in the navigation pane 116.

[0045] A subset of merchandise available under the consumer selected category may be displayed in the merchandise viewing pane 108 as an array of cards or tiles. When all of the total number of merchandise available for the consumer selected category cannot be displayed in the merchandise viewing pane 108, a scroll bar 106 may be displayed on a side edge of the merchandise viewing pane 108. Using the scroll bar 106, cards or tiles corresponding to the other merchandise may be displayed in the merchandise viewing pane 108, and cards or tiles displayed in the top row may be removed from being displayed.

[0046] In FIG. 1A, cards or tiles 118a-118d, 120a-120d, and 122a-122d arranged in 3x4 matrix are displayed in the merchandise viewing pane 108. Since the merchandise viewing pane cannot fully display the cards or tiles in the third row 122, cards or tiles 122a-122d are partially displayed in the merchandise viewing pane 108. The consumer may use the scroll bar 106 to scroll down to view the cards or tiles 122a-122d fully. As the consumer scrolls down using the scroll bar 106, cards or tiles 118a- 118d may be removed from being displayed in the merchandise viewing pane 108. As described herein, each card or tile 118a- 118d, 120a-120d, 122a-122d may have a corresponding image and text description about the merchandise. If the merchandise does not have a corresponding image, then the merchandise may be displayed without an image.

[0047] The outfit viewing pane 110 may be displayed without any merchandise until the consumer selects at least one merchandise displayed in the merchandise viewing pane 108 to build an outfit. Additionally, or alternatively, the outfit viewing pane 110 may be displayed with an example text “Select at least one merchandise to build an outfit.” By way of an example, the example text may be displayed over a dummy image of a merchandise displayed in the outfit viewing pane 110.

[0048] A graphical user interface 100B shown in FIG. IB is a rendering of the outfit builder page in the tab 102 of the graphical user interface 100B. As shown in FIG. IB, when the consumer brings a cursor (or a finger or a pen in case of a touchscreen display) over a card or tile, for example, the card or tile 118a, an overlay 126 may be displayed over the image1299011987.2129823-824702PATENT portion of the card or tile 118a. The overlay 126 may display a list of available sizes for the merchandise associated with the card or tile 118a. In some embodiments, if all of the available sizes cannot be displayed within the size of the overlay 126, a scroll bar 124 may be displayed for the consumer to view all available sizes by scrolling up or down. As shown in FIG. IB, the overlay 126 may display available sizes such as “XXS,” “XS,” “S,” “M,” “L,” “XL,” “XXL,” and / or “3XL,” etc. In some embodiments, if a particular size is unavailable (for example, out of stock), then the particular unavailable size may be displayed as distinguishably different from other available size. In some embodiments, and by way of an example, available sizes for a merchandise may be displayed adjacent to an image in a card or a tile for the consumer to select the merchandise of a suitable size.

[0049] The consumer may select a size that fits his or her body, and upon clicking the selected size, for example, size “M,” the selected merchandise may be automatically displayed in the outfit viewing pane 110, as shown in the rendered outfit builder page in the tab 102 as shown in graphical user interface 100C in FIG. 1C. In other words, the overlay 126 displayed over the image portion of the card or tile 118a may be removed from being displayed. As shown in FIG. 1C, only an image of the merchandise associated with the card or tile 118a may be displayed in the outfit viewing pane 110 as an image 118a'. The image 118a' may be displayed within a center area of the outfit viewing pane 110 initially. However, the consumer may be allowed to move the image 118a' to another area within the outfit viewing pane 110.

[0050] Additionally, or alternatively, the image 118a' may be displayed within a top area of the outfit viewing pane 110 upon analysis of the image 118a' and identifying that the image 118a' corresponds to an article that is worn in an upper body area of the consumer. Similarly, the image 118a' may be displayed within a bottom area of the outfit viewing pane 110 upon analysis of the image 118a' and identifying that the image 118a' corresponds to an article that is worn in a lower body area of the consumer.

[0051] Upon selecting one merchandise, the consumer may view other merchandises. For example, upon selecting a top displayed as the image 118a', the consumer may select a bottom or a skirt, for example, shown in the card or tile 118b by moving the cursor over the card or tile 118b, as shown in graphical user interface 100D in FIG. ID. When the cursor is brought1399011987.2129823-824702PATENT over the card or tile 118b, an overlay 128 with a scroll bar 130 may be displayed over an image portion of the card or tile 118b. The overlay 128 and scroll bar 130 function similar to the overlay 126 and the scroll bar 124, respectively. The scroll bar 124 or 130 may be displayed on a side edge of the overlay 126 or 128, respectively, and the scroll bar 124 or 130 may be removed from being displayed when the overlay 126 or 128 is removed from being displayed.

[0052] Upon selecting a suitable size for the top or bottom shown in the overlay 128, as shown in graphical user interface 100E in FIG. IE, the selected merchandise may be automatically displayed in the outfit viewing pane 110. The overlay 128 displayed over the image portion of the card or tile 118b may be removed from being displayed. As shown in FIG. IE, only an image of the merchandise associated with the card or tile 118b may be displayed in the outfit viewing pane 110 as an image 118b'. The image 118b' may be displayed within an open area of the outfit viewing pane 110 initially. However, the consumer may move the image 118b' anywhere within the outfit viewing pane 110 as shown in graphical user interface 100F shown in FIG. IF. For example, as shown in FIG. IF, the consumer can move the image 118b' next to the image 118a' to view how the selected merchandises look together. The consumer may move the image 118b' and the image 118a' in the outfit viewing pane 110 in a way the consumer is going to wear the outfit as shown in graphical user interface 100G shown in FIG. 1 G.

[0053] Additionally, or alternatively, based upon analysis of the image 118a' and the image 118b' and identifying that the image 118a' corresponds to an article that is worn in an upper body area of the consumer and the image 118b' corresponds to an article that is worn in a lower body area of the consumer, the image 118a' is displayed on top of the image 118b' in the outfit viewing pane 110.

[0054] As shown in graphical user interface 100H shown in FIG. 1H, the consumer can move the cursor over a displayed image, for example, the image 118b' or the image 118a', which causes an overlay 132 with control options 134, 136, and 138, being displayed over the image. The control option 136 may allow the consumer to increase a size of the displayed image in the outfit viewing pane 110, and the control option 138 may allow the consumer to decrease the size of the displayed image in the outfit viewing pane 110. The control option 1341499011987.2129823-824702PATENT may allow the consumer to remove the merchandise from the outfit viewing pane 110. When the cursor is moved away or by clicking within an area of the overlay 132 except the control options 134, 136, and 138, the overlay may be removed from being displayed. Alternatively, the overlay may be removed from being displayed after a predetermined period of time and the consumer has not taken any action such as increasing or decreasing the size of the displayed image in the outfit viewing pane 110 or removing the merchandise from the outfit viewing pane 110.

[0055] Graphical user interface 1001 shown in FIG. II displays the image 118a' being reduced in size, as described herein with reference to FIG. 1H, when the consumer has selected the control option 138 displayed in an overlay over the image 118a' when the consumer brings the cursor over image 118a'.

[0056] In graphical user interface 100 J shown in FIG. 1J, a graphical element 140 corresponding to a total value of merchandises displayed in the outfit viewing pane 110, a graphical element 146 corresponding to allowing the consumer to save the merchandises displayed in the outfit viewing pane 110 to the consumer’s wishlist, and a graphical element 148 corresponding to add all merchandises displayed in the outfit viewing pane 110 to a shopping cart. A graphical element 160 may allow the consumer to share the outfit including the merchandises displayed in the outfit viewing pane 110.

[0057] As shown in graphical user interface 100K shown in FIG. IK, when the consumer clicks the graphical element 160, an overlay 166 may be displayed for the consumer to provide inputs to share the outfit using an email address of via social media. A control option displayed, for example, as “x” may be selected by the consumer to remove the overlay 166. Additionally, or alternatively, the overlay 166 may be removed upon expiry of a predetermined time if the consumer does not provide any input to share the outfit.

[0058] When the consumer clicks on the graphical element 148, all merchandises displayed in the outfit viewing pane 110 may be added to a shopping cart, and the shopping cart 150 may be displayed in place of the outfit viewing pane 110 as shown in graphical user interface 100L in FIG. IL. Additionally, or alternatively, the shopping cart 150 may be displayed as an overlay (not shown). One or more merchandises from the outfit displayed in1599011987.2129823-824702PATENT the outfit viewing pane 110 may be displayed as tiles or cards 152, 154, 162, 164 arranged in a column in the shopping cart 150. A graphical element 158 may allow the consumer to checkout or purchase the one or more merchandises from the shopping cart 150, and a graphical element 156 may allow the consumer to close the shopping cart 150 to continue shopping and display the outfit viewing pane 110. Each of the tiles of cards 152, 154, etc., also allows the consumer to update a quantity of the corresponding merchandise and / or remove the merchandise from the shopping cart 150.

[0059] In FIG. IM, the rendered outfit builder page in graphical user interface 100M displays images 180a', 180b', and 180c' of the consumer selected merchandises in the outfit viewing pane 110. As described herein, based upon analysis of the images 180a', 180b', and 180c' and identifying that the images 180a' and 180c' correspond to articles that are worn in an upper body area of the consumer, images 180a' and 180c' are displayed in a top area of the outfit viewing pane 110, and identifying that the image 180b' corresponds to an article that is worn in a lower body area of the consumer, the image 180b' is displayed in a bottom area of the outfit viewing pane 110. In some embodiments, the image 180b' may be automatically displayed below one of the images 180a' and 180c' based on automatically determined the most suitable outfit pair such as, 180a' and 180b', or 180c' and 180b'. As shown in graphical user interface 100N in FIG. IN, the consumer may move the image 180b', for example, to display as a pair with another merchandise different from the one shown in graphical user interface 100M.

[0060] FIG. 2 illustrates an example computing system 200 that can implement various techniques, processes, functions, or methods described herein. Computing system 200 may be a server such as, an application server, that is installed, for example, in a cloud computing network and communicatively coupled with a consumer computing device 245 (please also refer to FIG. 3). The components of computing system 200 are shown in electrical communication with each other using a connection 205, such as a communication bus. The example computing system 200 includes a processing unit (CPU or processor) 210 and a computing device connection 205 that couples various computing device components, including computing device memory 215, such as a read only memory (ROM) 220 and a random-access memory (RAM) 225, to processor 210.1699011987.2129823-824702PATENT

[0061] Computing system 200 can include a cache 212 of high-speed memory connected directly with, in close proximity to, or integrated as part of processor 210. Computing system 200 can copy data from memory 215 and / or storage device 230 to cache 212 for quick access by processor 210. In this way, cache 212 can provide a performance boost that avoids processor 210 delays while waiting for data. These and other modules can control or be configured to control processor 210 to perform various actions. Other computing device memory 215 may be available for use as well. Memory 215 can include multiple different types of memory with different performance characteristics. Processor 210 can include any general-purpose processor, central processing unit (CPU), or graphics processing unit (GPU) in combination with a hardware or software provision configured to control processor 210 and stored in storage device 230, as well as any special-purpose processor where software instructions are incorporated into the processor design. Processor 210 may be a self-contained system, containing multiple cores or processors, a bus, memory controller, cache, etc. A multi-core processor may be symmetric or asymmetric.

[0062] Storage device 230 is a non-volatile memory and can be one or more of a hard disk or other types of computer readable media that can store data that are accessible by a computer, such as a magnetic cassette, flash memory card, solid state memory device, digital versatile disk, cartridge, RAM 225, ROM 220, or hybrids thereof. Memory 215 or storage device 230 can include software, code, firmware, etc., for controlling processor 210. Other hardware or software modules are contemplated. Memory 215 and storage device 230 are connected to computing device connection 205. In one aspect, a hardware module that performs a particular function can include the software component stored in a computer-readable medium in connection with the necessary hardware components, such as processor 210, computing device connection 205, and so forth, to carry out the function. In the example embodiment, processor 210 may be programmed by encoding an operation or function using one or more executable instructions and providing the executable instructions in memory 215 or storage device 230.

[0063] The communication interface 240 may include wireline or wireless interface to connect the computing system 200 with the consumer computing device 245 over a network 250 such as, a local area network, a wide area network, Internet, a 2G / 3G / 4G / 5G / 6G network, and / or a satellite network, etc.1799011987.2129823-824702PATENT

[0064] In operation, a computer executes computer-executable instructions embodied in one or more computer-executable components stored on one or more computer-readable media to implement aspects of the disclosure described or illustrated herein. The order of execution or performance of the operations in embodiments of the disclosure illustrated and described herein is not essential, unless otherwise specified. That is, the operations may be performed in any order, unless otherwise specified, and embodiments of the disclosure may include additional or fewer operations than those disclosed herein. For example, it is contemplated that executing or performing a particular operation before, contemporaneously with, or after another operation is within the scope of aspects of the disclosure.

[0065] FIG. 3 is a block diagram of an example consumer computing device 300 (similar to the consumer computing device 245 shown in FIG. 2). The components of consumer computing device 300 are shown in electrical communication with each other using a connection 305, such as a communication bus. The example consumer computing device 300 includes a processing unit (CPU or processor) 310 and the connection 305 that couples the processing unit 310 with memory 315, such as a read only memory (ROM) 320 and a randomaccess memory (RAM) 325, to processor 310.

[0066] Processor 310 can include any general-purpose processor, central processing unit (CPU), or graphics processing unit (GPU) in combination with a hardware or software provision configured to control processor 310 and stored in storage device 330, as well as any special-purpose processor where software instructions are incorporated into the processor design. Processor 310 may be a self-contained system, containing multiple cores or processors, a bus, memory controller, cache, etc. A multi-core processor may be symmetric or asymmetric.

[0067] Storage device 330 is a non-volatile memory and can be one or more of a hard disk or other types of computer readable media that can store data that are accessible by a computer, such as a magnetic cassette, flash memory card, solid state memory device, digital versatile disk, cartridge, RAM 325, ROM 320, or hybrids thereof. Memory 315 or storage device 330 can include software, code, firmware, etc., for controlling processor 310. Other hardware or software modules are contemplated. Memory 315 and storage device 330 are connected to computing device connection 305. In one aspect, a hardware module that performs a particular1899011987.2129823-824702PATENT function can include the software component stored in a computer-readable medium in connection with the necessary hardware components, such as processor 310, connection 305, and so forth, to carry out the function. In the example embodiment, processor 310 may be programmed by encoding an operation or function using one or more executable instructions and providing the executable instructions in memory 315 or storage device 330.

[0068] The processor 310 may may be communicatively coupled with a communication interface 340 to communicate with a backend system such as, the computing system 200 shown in FIG. 2. The consumer computing device also includes an input device 345 and an output device 350. The input device 345 is configured to receive inputs from the consumer and the output device 350 is configured to display an output, for example, a graphical user interface, of a front-end application executing on the consumer computing device 300. The input device 345 may include one or more of a mouse, a microphone, a camera, a pen, and / or a touchscreen display. The output device 350 may include one or more of a display device, the touchscreen display, and / or a speaker, etc.

[0069] FIG. 4 is an example flow-chart 400 of method operations for organizing merchandise images for purchase. The method operations include causing 402 display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device. The consumer computing device may be communicatively coupled with a backend system, e.g., an application server or server. The server or application server may be located in a cloud computing network. The displayed or rendered outfit builder page may include a navigation pane, a merchandise viewing pane, and an outfit viewing pane.

[0070] The method operations may include displaying 404 a plurality of categories in the navigation pane. The navigation pane is configured to display each category of the plurality of categories as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category selected by a consumer in the merchandise viewing pane. The method operations may include receiving 406 a first input from the consumer to select a first category of the plurality of categories displayed in the navigation pane, and in response to receiving the first input, caucusing 408 a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane.1999011987.2129823-824702PATENT

[0071] The method operations may include displaying 410 the first plurality of merchandises in the merchandise viewing pane. The merchandise viewing pane is configured to display the first plurality of merchandises in an array of cards or tiles. Each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises. The method operations may include receiving 412 a second input from the consumer to select a first merchandise, and in response to receiving the second input from the consumer, causing 414 a display of an image corresponding to the first merchandise in the outfit viewing pane. The first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane. The method operations may include allowing 416 the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane.

[0072] The method operations may further include displaying 418 the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles, and receiving 420 a third input from the consumer to select a second merchandise. The second merchandise may be selected from the first plurality of merchandises or the second plurality of merchandises. The method operations may further include, in response to receiving the third input from the consumer, causing 422 a display of an image corresponding to the second merchandise in the outfit viewing pane. The image corresponding to the second merchandise may be concurrently displayed with the image corresponding to the first merchandise in the outfit viewing pane. The method operations may further include allowing 424 the consumer to move the image corresponding to the first merchandise and / or the image corresponding to the second merchandise to another area within the outfit viewing pane.

[0073] In some embodiments, the method operations may further include receiving an input at a graphical element displayed in the graphical user interface, and in response to the fourth input, adding the first merchandise and the second merchandise displayed in the outfit viewing pane in a shopping cart for the consumer to purchase. The graphical element may be displayed with a text description or a symbol describing an “add to the cart” action.2099011987.2129823-824702PATENT

[0074] In some embodiments, the method operations may further include receiving an input from the consumer to select a third merchandise, and in response to receiving the input from the consumer, causing a display of an image corresponding to the third merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise and the image corresponding to the second merchandise in the outfit viewing pane. By way of an example, the third merchandise may be selected from the first plurality of merchandises or the second plurality of merchandises or a third plurality of merchandises. The third plurality of merchandises may correspond to a third category of the plurality of categories selected by the consumer in the navigation pane. The method operations may further include allowing the consumer to move the image corresponding to the second merchandise in the outfit viewing pane to align with the image corresponding to the first merchandise or the image corresponding to the third merchandise based upon respective category of each of the first merchandise, the second merchandise, and the third merchandise.

[0075] In some embodiments, an input from the consumer to select a particular category of the plurality of categories from the navigation pane may also include a particular size information of a merchandise in which the consumer is interested.

[0076] An example technical effect of the systems and techniques disclosed herein allows the consumer to compare different styling ideas or different clothing and / or accessories items of an outfit without actually putting them on. Additionally, the systems and techniques disclosed herein enables the consumer to add all clothing and / or accessory items of the outfit that the consumer has built into the customer’s online shopping cart for purchasing or sharing with others via social media and / or an email address.

[0077] Some embodiments involve the use of one or more electronic processing or computing devices. As used herein, the terms “processor” and “computer” and related terms, e.g., “processing device,” and “computing device” are not limited to just those integrated circuits referred to in the art as a computer, but broadly refers to a processor, a processing device or system, a general purpose central processing unit (CPU), a graphics processing unit (GPU), a microcontroller, a microcomputer, a programmable logic controller (PLC), a reduced instruction set computer (RISC) processor, a field programmable gate array (FPGA), a digital2199011987.2129823-824702PATENT signal processor (DSP), an application specific integrated circuit (ASIC), and other programmable circuits or processing devices capable of executing the functions described herein, and these terms are used interchangeably herein. These processing devices are generally “configured” to execute functions by programming or being programmed, or by the provisioning of instructions for execution. The above examples are not intended to limit in any way the definition or meaning of the terms processor, processing device, and related terms.

[0078] The various aspects illustrated by logical blocks, modules, circuits, processes, algorithms, and algorithm steps described above may be implemented as electronic hardware, software, or combinations of both. Certain disclosed components, blocks, modules, circuits, and steps are described in terms of their functionality, illustrating the interchangeability of their implementation in electronic hardware or software. The implementation of such functionality varies among different applications given varying system architectures and design constraints. Although such implementations may vary from application to application, they do not constitute a departure from the scope of this disclosure.

[0079] Aspects of embodiments implemented in software may be implemented in program code, application software, application programming interfaces (APIs), firmware, middleware, microcode, hardware description languages (HDLs), or any combination thereof. A code segment or machine-executable instruction may represent a procedure, a function, a subprogram, a program, a routine, a subroutine, a module, a software package, a class, or any combination of instructions, data structures, or program statements. A code segment may be coupled to, or integrated with, another code segment or an electronic hardware by passing or receiving information, data, arguments, parameters, memory contents, or memory locations. Information, arguments, parameters, data, etc. may be passed, forwarded, or transmitted via any suitable means including memory sharing, message passing, token passing, network transmission, etc.

[0080] The actual software code or specialized control hardware used to implement these systems and methods is not limiting of the claimed features or this disclosure. Thus, the operation and behavior of the systems and methods were described without reference to the2299011987.2129823-824702PATENT specific software code being understood that software and control hardware can be designed to implement the systems and methods based on the description herein.

[0081] When implemented in software, the disclosed functions may be embodied, or stored, as one or more instructions or code on or in memory. In the embodiments described herein, memory includes non-transitory computer-readable media, which may include, but is not limited to, media such as flash memory, a random-access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), and non-volatile RAM (NVRAM). As used herein, the term “non-transitory computer-readable media” is intended to be representative of any tangible, computer-readable media, including, without limitation, non-transitory computer storage devices, including, without limitation, volatile and non-volatile media, and removable and non-removable media such as a firmware, physical and virtual storage, CD-ROM, DVD, and any other digital source such as a network, a server, cloud system, or the Internet, as well as yet to be developed digital means, with the sole exception being a transitory propagating signal. The methods described herein may be embodied as executable instructions, e.g., “software” and “firmware,” in a non-transitory computer-readable medium. As used herein, the terms “software” and “firmware” are interchangeable and include any computer program stored in memory for execution by personal computers, workstations, clients, and servers. Such instructions, when executed by a processor, configure the processor to perform at least a portion of the disclosed methods.

[0082] As used herein, an element or step recited in the singular and proceeded with the word “a” or “an” should be understood as not excluding plural elements or steps unless such exclusion is explicitly recited. Furthermore, references to “one embodiment” of the disclosure or an “exemplary” or “example” embodiment are not intended to be interpreted as excluding the existence of additional embodiments that also incorporate the recited features. Likewise, limitations associated with “one embodiment” or “an embodiment” should not be interpreted as limiting to all embodiments unless explicitly recited.

[0083] Disjunctive language such as the phrase “at least one of X, Y, or Z,” unless specifically stated otherwise, is generally intended, within the context presented, to disclose2399011987.2129823-824702PATENT that an item, term, etc. may be either X, Y, or Z, or any combination thereof (e.g., X, Y, and / or Z). Likewise, conjunctive language such as the phrase “at least one of X, Y, and Z,” unless specifically stated otherwise, is generally intended, within the context presented, to disclose at least one of X, at least one of Y, and at least one of Z.

[0084] Although certain embodiments have been illustrated and described herein for purposes of description, a wide variety of alternate and / or equivalent embodiments or implementations calculated to achieve the same purposes may be substituted for the embodiments shown and described without departing from the scope of the present disclosure. This application is intended to cover any adaptations or variations of the embodiments discussed herein, including the implementation or utilization of components of the systems or steps independently and separately from other described components or steps. Therefore, it is manifestly intended that embodiments described herein be limited only by the claims.2499011987.2

Claims

129823-824702PATENTWhat is claimed is:

1. A computer- implemented method for organizing merchandise images for purchase, the method comprising: causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with a backend system, the outfit builder page displayed in the graphical user interface comprising a navigation pane, a merchandise viewing pane, and an outfit viewing pane, wherein the navigation pane is configured to: display a plurality of categories, each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer; receive a first input from the consumer to select a first category of the plurality of categories; and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane; wherein the merchandise viewing pane is configured to: display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises; receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane; and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane; wherein the outfit viewing pane is configured to: allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane; wherein the merchandise viewing pane is further configured to:2599011987.2129823-824702PATENT display the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles; receive a third input from the consumer to select a second merchandise, the second merchandise is selected from the first plurality of merchandises or the second plurality of merchandises; and in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane; and wherein the outfit viewing pane is further configured to: allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.

2. The computer-implemented method of claim 1 further comprising: receiving a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, adding the first merchandise and the second merchandise displayed in the outfit viewing pane in a shopping cart for the consumer to purchase.

3. The computer-implemented method of claim 1 further comprising: receiving a fourth input from the consumer to select a third merchandise; and in response to receiving the fourth input from the consumer, causing a display of an image corresponding to the third merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise and the image corresponding to the second merchandise in the outfit viewing pane.

4. The computer-implemented method of claim 3, wherein: the third merchandise is selected from the first plurality of merchandises or the second plurality of merchandises or a third plurality of merchandises; and2699011987.2129823-824702PATENT the outfit viewing pane is further configured to: allow the consumer to move the image corresponding to the second merchandise in the outfit viewing pane to align with the image corresponding to the first merchandise or the image corresponding to the third merchandise based upon respective category of each of the first merchandise, the second merchandise, and the third merchandise.

5. The computer- implemented method of claim 1, wherein a scroll bar is displayed on a side edge of the merchandise viewing pane.

6. The computer- implemented method of claim 1, wherein the first input or the third input further includes a particular size information of the first merchandise or the second merchandise, respectively.

7. The computer-implemented method of claim 1 further comprising causing display of a plurality of available sizes for the first merchandise or the second merchandise when the consumer hovers an input device over a card or tile associated with the first merchandise or the second merchandise.

8. The computer-implemented method of claim 7, wherein the plurality of available sizes is displayed as an overlay over an image portion of the card or tile.

9. The computer-implemented method of claim 8, wherein a scroll bar is displayed on a side edge of the overlay, and wherein the scroll bar is configured to be scrolled up and scrolled down to display one or more available sizes of the plurality of available sizes not initially displayed in the overlay.

10. The computer-implemented method of claim 1 further comprising causing display of a plurality of control options corresponding to the first merchandise when the consumer hovers an input device over the image corresponding to the first merchandise in the outfit viewing pane or over the image corresponding to the second merchandise when the consumer hovers the input device over the image corresponding to the second merchandise in the outfit viewing pane.2799011987.2129823-824702PATENT11. The computer-implemented method of claim 10, wherein the plurality of control options comprises a first control option to increase an image size, a second control option to decrease the image size, and third control option to remove a merchandise displayed in the outfit viewing pane.

12. The computer-implemented method of claim 1 further comprising: receiving a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, causing an overlay configured to allow the first merchandise and the second merchandise displayed in the outfit viewing pane being shared as an outfit on a social media.

13. The computer-implemented method of claim 1 further comprising: receiving a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, causing the first merchandise and the second merchandise displayed in the outfit viewing pane being saved as an outfit in a wishlist of the consumer.

14. A server for organizing merchandise images for purchase, the server comprising: at least one memory configured to store instructions; and at least one processor communicatively coupled with the at least one memory and configured to execute the instructions to perform operations comprising: causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with the server, the outfit builder page displayed in the graphical user interface comprising a navigation pane, a merchandise viewing pane, and an outfit viewing pane, wherein the navigation pane is configured to: display a plurality of categories, each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer;2899011987.2129823-824702PATENT receive a first input from the consumer to select a first category of the plurality of categories; and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane; wherein the merchandise viewing pane is configured to: display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises; receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane; and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane; wherein the outfit viewing pane is configured to: allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane; wherein the merchandise viewing pane is further configured to: display the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles; receive a third input from the consumer to select a second merchandise, the second merchandise is selected from the first plurality of merchandises or the second plurality of merchandises; and in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane; and wherein the outfit viewing pane is further configured to: allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.2999011987.2129823-824702PATENT15. The server of claim 14, wherein the operations further comprise: causing to receive a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, adding the first merchandise and the second merchandise displayed in the outfit viewing pane in a shopping cart for the consumer to purchase.

16. The server of claim 14, wherein the operations further comprise: causing to receive a fourth input from the consumer to select a third merchandise; and in response to receiving the fourth input from the consumer, causing a display of an image corresponding to the third merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise and the image corresponding to the second merchandise in the outfit viewing pane.

17. The server of claim 16, wherein: the third merchandise is selected from the first plurality of merchandises or the second plurality of merchandises or a third plurality of merchandises; and the outfit viewing pane is further configured to: allow the consumer to move the image corresponding to the second merchandise in the outfit viewing pane to align with the image corresponding to the first merchandise or the image corresponding to the third merchandise based upon respective category of each of the first merchandise, the second merchandise, and the third merchandise.

18. The server of claim 14, wherein a scroll bar is displayed on a side edge of the merchandise viewing pane.

19. The server of claim 14, wherein the first input or the third input further includes a particular size information of the first merchandise or the second merchandise, respectively.

20. The server of claim 14, wherein the operations further comprise causing display of a plurality of available sizes for the first merchandise or the second merchandise when the consumer hovers an input device over a card or tile associated with the first merchandise or the second merchandise.3099011987.2129823-824702PATENT21. The server of claim 20, wherein the plurality of available sizes is displayed as an overlay over an image portion of the card or tile.

22. The server of claim 21, wherein a scroll bar is displayed on a side edge of the overlay, and wherein the scroll bar is configured to be scrolled up and scrolled down to display one or more available sizes of the plurality of available sizes not initially displayed in the overlay.

23. The server of claim 14, wherein the operations further comprise causing display of a plurality of control options corresponding to the first merchandise when the consumer hovers an input device over the image corresponding to the first merchandise in the outfit viewing pane or over the image corresponding to the second merchandise when the consumer hovers the input device over the image corresponding to the second merchandise in the outfit viewing pane.

24. The server of claim 23, wherein the plurality of control options comprises a first control option to increase an image size, a second control option to decrease the image size, and third control option to remove a merchandise displayed in the outfit viewing pane.

25. The server of claim 14, wherein operations further comprise: causing to receive a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, causing an overlay configured to allow the first merchandise and the second merchandise displayed in the outfit viewing pane being shared as an outfit on a social media.

26. The server of claim 14, wherein operations further comprise: causing to receive a fourth input at a graphical element displayed in the graphical user interface; and in response to the fourth input, causing the first merchandise and the second merchandise displayed in the outfit viewing pane being saved as an outfit in a wishlist of the consumer.3199011987.2129823-824702PATENT27. A non-transitory computer readable media comprising instructions stored thereon, which, when executed by at least one processor of a computing device, cause the computing device to organize merchandise images for purchase by performing operations comprising: causing display of an outfit builder page in a graphical user interface of a front-end application executing on a consumer computing device communicatively coupled with a server, the outfit builder page displayed in the graphical user interface comprising a navigation pane, a merchandise viewing pane, and an outfit viewing pane, wherein the navigation pane is configured to: display a plurality of categories, each category of the plurality of categories is displayed as a selectable graphical element to cause a plurality of merchandises corresponding to a respective category in the merchandise viewing pane in response to selection by a consumer; receive a first input from the consumer to select a first category of the plurality of categories; and in response to receiving the first input, cause a first plurality of merchandises corresponding to the first category being displayed in the merchandise viewing pane; wherein the merchandise viewing pane is configured to: display the first plurality of merchandises in an array of cards or tiles, each card or tile of the cards or tiles is associated with a merchandise of the first plurality of merchandises; receive a second input from the consumer to select a first merchandise, the first merchandise is selected from the first plurality of merchandises displayed in the merchandise viewing pane; and in response to receiving the second input from the consumer, cause a display of an image corresponding to the first merchandise in the outfit viewing pane; wherein the outfit viewing pane is configured to: allow the consumer to move the image corresponding to the first merchandise displayed in the outfit viewing pane to another area within the outfit viewing pane; wherein the merchandise viewing pane is further configured to:3299011987.2129823-824702PATENT display the first plurality of merchandises or a second plurality of merchandises corresponding to a second category of the plurality of categories selected by the consumer in the merchandise viewing pane in the array of cards or tiles; receive a third input from the consumer to select a second merchandise, the second merchandise is selected from the first plurality of merchandises or the second plurality of merchandises; and in response to receiving the third input from the consumer, cause a display of an image corresponding to the second merchandise in the outfit viewing pane concurrently with the image corresponding to the first merchandise in the outfit viewing pane; and wherein the outfit viewing pane is further configured to: allow the consumer to move the image corresponding to the first merchandise or the image corresponding to the second merchandise to another area within the outfit viewing pane.3399011987.2

Images