Patent Publication Number: US-10776860-B2

Title: Retail website user interface, systems, and methods for displaying trending looks

Description:
FIELD 
     This disclosure relates generally to the field of user interfaces on websites that offer products for purchase, such as on retailer websites. 
     BACKGROUND 
     Consumers purchase products in retail stores and via retail websites accessible from the Internet. Shopping via a retail website allows consumers to interact with text, pictures, videos, and/or audio clips relating to the products the consumer is contemplating purchasing. Often, shopping via the retail website allows the consumer to view reviews by other consumers, search for related products, search for products that other consumers bought at the same time, or the like. In some instances, the inventory of products available from a retailer through the retail website can be different from the products available at the retail store. 
     Improved ways to enhance a consumer&#39;s shopping experience are desirable. 
     SUMMARY 
     This disclosure relates generally to the field of user interfaces on websites that offer products for purchase, such as on retailer websites. 
     A system including a graphical user interface (GUI) displayed on a display device is disclosed. The GUI includes a plurality of images displayed on the display device, each image being of a look that is determined to be trending within a previous time period. Each image is displayed as taken by a photographer and posted on one or more social networks. 
     An Internet website system is also disclosed. The Internet website system includes at least one server that is connectable to the Internet and that is configured to provide a website that is viewable on a display device, the website displays a plurality of separate images arranged in a plurality of rows and columns; each image is of a look that includes one or more products that are for sale by a retailer and has been posted on one or more social networks; each image is displayed as taken by a photographer and posted on one of the one or more social networks; and each image is identified based on a tag or identifier associated with the image on the one or more social networks. 
     A computer-implemented method of presenting products to a consumer for purchase via a GUI on a display device of the consumer is also disclosed. The computer-implemented method includes determining looks that are trending; and via a website that is accessible by the consumer and that is rendered via one or more servers, displaying on the display device of the consumer an image of each trending look, and displaying each image as taken by a plurality of photographers and posted on one or more social networks. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
       References are made to the accompanying drawings that form a part of this disclosure, and which illustrate embodiments in which the systems and methods described in this specification can be practiced. 
         FIG. 1  is a schematic diagram of a system for implementing the user interfaces, systems, and methods described herein, according to an embodiment. 
         FIG. 2  is a flowchart depicting a process for identifying one or more trending looks, according to an embodiment. 
         FIGS. 3-4  depict a graphical user interface (GUI) of a website as described herein, according to an embodiment. 
         FIG. 5  is a flowchart depicting a process for displaying trending looks on the website GUI of  FIGS. 3-4 , according to an embodiment. 
         FIG. 6  is a schematic diagram for an architecture for a computing device, according to an embodiment. 
     
    
    
     Like reference numbers represent like parts throughout. 
     DETAILED DESCRIPTION 
     A website is described that presents a graphical user interface (GUI) that displays images to a user. The images that are displayed are of looks that are determined to be recently trending or popular prior to being displayed. The user interface is constructed to focus on the trending looks themselves so that the user interface is clean and uncluttered, allowing customers to identify products within the looks which they would like to purchase. 
     The website can be, for example, a website that is owned, operated and/or controlled by a retail company, with the images including products that are for sale by the retail company either in a retail store or on-line on the same website or on a separate website. 
     A trending look, as used herein, is a look that is currently popular, in style, or in vogue. A look is determined to be trending based on data derived from one or more sources. For example, the data can be a tag or other identifier associated with an image which is posted on a social network. The tag or other identifier associated with the image can be a tag or identifier that is specifically selected by a retailer such that the retailer can identify one or more images having the tag or identifier associated. A trending look can include a single product, or a plurality of products, with or without a person or people in the image. For example, a trending look can include one or more clothing items, according to an embodiment, and a trending look can also include one or more clothing items and an individual or individuals wearing the one or more clothing items. 
     A social network is a virtual community or network in which people can create, share, and/or exchange information and ideas, for example on-line via the Internet. Examples of social networks from which data can be derived in order to identify trending looks include, but are not limited to, Pinterest, Facebook, Instagram, Twitter, Google+, and the like. 
     A photographer includes an individual capturing an image with a camera. Photographers can be professionals or amateurs. As used herein, photographers include anybody who captures an image and posts that image on one or more social networks. 
     In an embodiment, a system includes a GUI displayed on a display device. The GUI includes a plurality of images displayed on the display device, each image being of a look that is determined to be trending. 
       FIG. 1  is a schematic diagram of a system  10  for implementing the user interfaces, systems, and methods described herein, according to an embodiment. In the system  10 , trending looks data is gathered from one or more social networks  18 . 
     In the system  10 , a server  16  is connected in communication with a user device  12  via a network  14 . 
     The server  16  can make a GUI available to the user device  12 . The server  16  can make the GUI available over the network  14  according to principles known in the art suitable for allowing a user to access and view the GUI with the user device  12 . In an embodiment, aspects of the server  16  can be the same as or similar to aspects of server device  535  as described in accordance with  FIG. 6  below. An application can be loaded onto the user device  12  that can include one or more features of the server  16 . For example, the application can make the GUI available to the user device  12 , according to an embodiment. Further, in an embodiment, the application can include a database of products, information about one or more trending looks, or the like, such that the information does not need to be obtained over the network  14  from the server  16 . 
     In an embodiment, the network  14  can generally represent the Internet. In an embodiment, the network  14  can include, for example, a local area network (LAN), a wide area network (WAN), a wireless network, a cellular data network, or the like. In an embodiment, aspects of the network  14  can be the same as or similar to aspects of network  540  as described in accordance with  FIG. 6  below. 
     A user can view and/or purchase one or more products from a retailer by viewing one or more trending looks in the system  10  via the user device  12 . Examples of the user device  12  include, but are not limited to, a personal computer (PC), a laptop computer, a mobile device (e.g., a smartphone, a personal digital assistant (PDA), a tablet-style device, etc.), or the like. The GUI  16  is displayable on a display of the user device  12 . Examples of the display for the user device  12  include, but are not limited to, a monitor connected to a PC, a laptop screen, a mobile device screen, a tablet screen, or the like. In an embodiment, aspects of the user device  12  can be the same as or similar to aspects of user devices  501  as described in accordance with  FIG. 6  below. 
     The server  16  is in communication with a database  20 . The database  20  generally includes a variety of information on products available from a retailer, such as products in a product database  20 A. In an embodiment, the products may be those products that are available from a particular catalog, such as, but not limited to, a clothing catalog, or the like. In an embodiment, the products may be those products that are available from the retailer, either through the retailer&#39;s website or in a retail store of the retailer. The database  20  also includes information related to trending looks, such as a trending database  20 B. The trending database  20 B can store a plurality of images corresponding to a plurality of trending looks. This can include information such as, but not limited to, an image of a trending look, a creator of the trending look, a profile of the creator of the trending look, or the like. 
     The server  16  can be in communication with the social network  18  via the network  14 . In an embodiment, the social network  18  can include one or more images being tagged with one or more indicators. Trending looks tagged with a particular indicator corresponding to the retailer may be posted on the social network  18 . The server  16  can make this information available to the system  10  in order to display the one or more trending looks on the user device  12 . Examples of the social network  18  include, but are not limited to, Google+, Pinterest, Facebook, Instagram, Twitter, or the like. 
       FIG. 2  is a flowchart depicting a process  50  for identifying one or more trending looks, according to an embodiment. In the process  50 , images are gathered from one or more social networks  18  ( FIG. 1 ), and one or more trending looks are displayed for a website visitor. The process  50  can be executed periodically (e.g., every 5 minutes, 10 minutes, 1 hour, etc.) or can be executed continuously to continually identify the one or more trending looks on an ongoing basis. Once the trending looks are identified, the trending looks can be displayed on a display of the user device  12  ( FIG. 1 ) for the website visitor. When displayed, the most recent trending looks can be displayed at a top of the user interface. Accordingly, as new trending looks are identified, the older trending looks can be pushed to a lower portion of the user interface. In this manner, the trending looks being displayed first may generally be the most current trending looks. In some embodiments, the displaying of the trending looks can include one or more filters controlling which trending looks are displayed. For example, the filters can prevent trending looks that are older than a specified time period (e.g., 7 days, etc.) from being displayed to the website visitor. In an embodiment, the filters may include a specified number of trending looks. In such an embodiment, if the website visitor scrolls to an end of the user interface, additional (older) trending looks may be displayed. 
     At  52 , the server  16  ( FIG. 1 ) identifies one or more images having a particular tag or identifier associated therewith. In an embodiment, the tag or identifier may alternatively be referred to as a hashtag or the like. For example, the retailer may have selected a particular tag such as, but not limited to, “RetailerStyle,” “#RetailerStyle,” or the like. It is to be appreciated that this tag is an example and that the particular tag selected can vary according to the principles described in this specification. At  52 , the server  16  can search the various social networks  18  for images which have been tagged with “#RetailerStyle.” Upon identifying an image having this particular tag, the server  16  can identify information associated with the photographer that produced the image. For example, this can include identifying information such as, but not limited to, a username on the social network, contact information associated with the username (e.g., an email address, private message name, or the like). 
     At  54  the one or more images having the particular tag or identifier can be reviewed based on the subject matter of the images. The subject matter review of the images can include, for example, reviewing the images to determine whether the images include subject matter that is appropriate for association with the retailer. This can include, for example, reviewing the images for profanity, or other aspects which are not in accordance with the retailer&#39;s mission or values. 
     At  56 , images which are identified as including subject matter that includes profanity or is not in accordance with the retailer&#39;s mission or values may be removed from the system. In an embodiment, an administrator may review and identify images which include subject matter that includes profanity or is not in accordance with the retailer&#39;s mission or values. 
     At  58 , the server  16  may provide an agreement to the photographer who captured the image for those images which have been identified as passing the subject matter review (e.g., do not contain profanity and/or are not in conflict with the retailer&#39;s mission or values). 
     At  60 , if the agreement is accepted, the image is stored in the trending database  20 B for inclusion in the user interface displayed on the user device  12 . In an embodiment, accepting the agreement can include signing and/or dating the agreement. In an embodiment, accepting the agreement can include selecting an agreement checkbox on a website displaying the agreement to the photographer, or the like. 
       FIGS. 3-4  depict a graphical user interface (GUI)  100  of a website as described herein, according to an embodiment. More specifically, the GUI  100  is of the website displaying trending looks, according to an embodiment. Images of a plurality of trending looks  102   a  . . .  102   n  are displayed on the GUI  100 . As illustrated, each look is showing a particular product without text, naming, or description of the look. The images  102   a  . . .  102   n  are displayed on the GUI  100  in an arrangement of a plurality of rows and a plurality of columns. Any number of rows and columns can be used. In an embodiment, a particular image can span more than one row and/or more than one column. In an embodiment, additional rows may be added by scrolling to a bottom of the GUI. 
     The images  102   a  . . .  102   n  can be arranged in any desired order on the GUI  100 . For example, in an embodiment, the images  102   a  . . .  102   n  can be ordered based on the order in which they are identified as trending looks. That is, relatively newer trending looks are displayed in a top-down or last-received, first displayed manner. That is, newer trending looks can be displayed at a top of the GUI. It will be appreciated that the order can be modified based on other information such as, but not limited to, a number of likes of the image, a popularity of the photographer, or the like. 
     Each image  102   a  . . .  102   n  is displayed as a hyperlink that allows each image to be selected by the website visitor on the GUI  100 . When one of the images  102   a  . . .  102   n  is selected, an overlay image  104  ( FIG. 4 ) is displayed over at least a part of the selected image with the selected image remaining displayed in the background. With reference to  FIG. 4 , the overlay image  104  can display various information on the selected image. Examples of information that can be displayed can include, but are not limited to, a social media username of the photographer, a number of likes and/or comments associated with the image on one or more social networks  18 , an image and/or text of a particular product within the image, text naming or describing the particular product, comments on the product from a review of the particular product by a prior purchaser, a price of that particular product, a hyperlink that directs to another web page, such as the main website of the retailer, and to permit viewing of further details of that particular product including ordering/purchasing options from the retailer selling the particular product. 
     A website visitor can select a hyperlink on the GUI  100  or select one of the images  102   a  . . .  102   n  in any manner. For example, a selection can be made by hovering a cursor over an image to be selected; a selection can be made by a user placing a cursor on the image and using a mouse device to click the image; a selection can be made by the user using her finger to hover over or physically touch the display at the location of the image to be selected; a selection can be made using voice commands, or the like. 
     One or more filters may be utilized to limit the trending looks that are displayed on the GUI  100 . For example, trending looks that are in a particular category (e.g., summer looks, fall looks, etc.) may be selected for display. In an embodiment, the one or more filters may be, for example, a checkbox or other selectable feature displayed on the GUI  100 . In an embodiment, a trending look may not be displayed if it has less than a threshold number of likes. In an embodiment, trending looks in certain categories, such as out of season, may not be shown. 
     It will be appreciated that the images  102   a  . . .  102   n  can be digital content other than a photograph. For example, in an embodiment, one or more of the images  102   a  . . .  102   n  can be a video, an image in a Graphics Interchange Format (“GIF”) which can include, for example, animations, or the like. In such an embodiment, the additional formats may be available to, for example, social media users that have achieved a particular popularity threshold. For example, social media users who have received more likes than a threshold amount may have access to display additional content types. In an embodiment, the additional formats may be available to social media users who have posted a minimum number of images on social networks having the particular tag or identifier associated with the retailer. For example, a social media user that has posted more than  10  images may have the ability to post content in additional formats. It is to be appreciated that the number  10  is an example and that other minimum numbers of posts are within the scope of this description. In an embodiment, the number of images may be determinative and a single post including  10  pictures may enable the social media user to post content in additional formats. 
     In an embodiment, the GUI  100  can be specific to a particular photographer. That is, the GUI  100  can include trending looks that are all supplied by the same social media user. In an embodiment, this can be a social media user that is particularly selected by the retailer. In such an embodiment, the particular social media user may be able to include digital content other than photographs. 
       FIG. 5  is a flowchart depicting a process  150  for displaying trending looks on the website GUI  100  of  FIGS. 3-4 , according to an embodiment. In the process, the trending looks are gathered  152  (e.g., according to the process  50  as described in accordance with  FIG. 2  above), and then the trending looks are displayed  154  on the website GUI  100 . This process is then repeated  156  on an hourly, daily, or other periodic basis. 
     The trending looks may be images captured in a relatively recent, predetermined time period. For example, the trending looks may be those that are identified within the past seven days and that include a particular identifier, as described above with respect to  FIG. 2 . In an embodiment, the time period can be a period other than seven days. 
       FIG. 6  is a schematic diagram of an architecture for a computer device  500 , according to an embodiment. The computer device  500  and any of the individual components thereof can be used for any of the operations described in accordance with any of the computer-implemented methods described herein. 
     The computer device  500  generally includes a processor  510 , memory  520 , a network input/output (I/O)  525 , storage  530 , and an interconnect  550 . The computer device  500  can optionally include a user I/O  515 , according to an embodiment. The computer device  500  can be in communication with one or more additional computer devices  500  through a network  540 . 
     The computer device  500  is generally representative of hardware aspects of a variety of user devices  501  and a server device  535 . The illustrated user devices  501  are examples and are not intended to be limiting. Examples of the user devices  501  include, but are not limited to, a desktop computer  502 , a cellular/mobile phone  503 , a tablet device  504 , and a laptop computer  505 . It is to be appreciated that the user devices  501  can include other devices such as, but not limited to, a personal digital assistant (PDA), a video game console, a television, or the like. In an embodiment, the user devices  501  can alternatively be referred to as client devices  501 . In such embodiments, the client devices  501  can be in communication with the server device  535  through the network  540 . One or more of the client devices  501  can be in communication with another of the client devices  501  through the network  540  in an embodiment. 
     The processor  510  can retrieve and execute programming instructions stored in the memory  520  and/or the storage  530 . The processor  510  can also store and retrieve application data residing in the memory  520 . The interconnect  550  is used to transmit programming instructions and/or application data between the processor  510 , the user I/O  515 , the memory  520 , the storage  530 , and the network I/O  540 . The interconnect  550  can, for example, be one or more busses or the like. The processor  510  can be a single processor, multiple processors, or a single processor having multiple processing cores. In an embodiment, the processor  510  can be a single-threaded processor. In an embodiment, the processor  510  can be a multi-threaded processor. 
     The user I/O  515  can include a display  516  and/or an input  517 , according to an embodiment. It is to be appreciated that the user I/O  515  can be one or more devices connected in communication with the computer device  500  that are physically separate from the computer device  500 . For example, the display  516  and input  517  for the desktop computer  502  can be connected in communication but be physically separate from the computer device  500 . In an embodiment, the display  516  and input  517  can be physically included with the computer device  500  for the desktop computer  502 . In an embodiment, the user I/O  515  can physically be part of the user device  501 . For example, the cellular/mobile phone  503 , the tablet device  504 , and the laptop  505  include the display  516  and input  517  that are part of the computer device  500 . The server device  535  generally may not include the user I/O  515 . In an embodiment, the server device  535  can be connected to the display  516  and input  517 . 
     The display  516  can include any of a variety of display devices suitable for displaying information to the user. Examples of devices suitable for the display  516  include, but are not limited to, a cathode ray tube (CRT) monitor, a liquid crystal display (LCD) monitor, a light emitting diode (LED) monitor, or the like. 
     The input  517  can include any of a variety of input devices or means suitable for receiving an input from the user. Examples of devices suitable for the input  517  include, but are not limited to, a keyboard, a mouse, a trackball, a button, a voice command, a proximity sensor, an ocular sensing device for determining an input based on eye movements (e.g., scrolling based on an eye movement), or the like. It is to be appreciated that combinations of the foregoing inputs  517  can be included for the user devices  501 . In an embodiment the input  517  can be integrated with the display  516  such that both input and output are performed by the display  516 . 
     The memory  520  is generally included to be representative of a random access memory such as, but not limited to, Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), or Flash. In an embodiment, the memory  520  can be a volatile memory. In an embodiment, the memory  520  can be a non-volatile memory. In an embodiment, at least a portion of the memory can be virtual memory. 
     The storage  530  is generally included to be representative of a non-volatile memory such as, but not limited to, a hard disk drive, a solid state device, removable memory cards, optical storage, flash memory devices, network attached storage (NAS), or connections to storage area network (SAN) devices, or other similar devices that may store non-volatile data. In an embodiment, the storage  530  is a computer readable medium. In an embodiment, the storage  530  can include storage that is external to the computer device  500 , such as in a cloud. 
     The network I/O  525  is configured to transmit data via a network  540 . The network  540  may alternatively be referred to as the communications network  540 . Examples of the network  540  include, but are not limited to, a local area network (LAN), a wide area network (WAN), the Internet, or the like. In an embodiment, the network I/O  525  can transmit data via the network  540  through a wireless connection using WiFi, Bluetooth, or other similar wireless communication protocols. In an embodiment, the computer device  500  can transmit data via the network  540  through a cellular, 3G, 4G, or other wireless protocol. In an embodiment, the network I/O  525  can transmit data via a wire line, an optical fiber cable, or the like. It is to be appreciated that the network I/O  525  can communicate through the network  540  through suitable combinations of the preceding wired and wireless communication methods. 
     The server device  535  is generally representative of a computer device  500  that can, for example, respond to requests received via the network  540  to provide, for example, data for rendering a website on the user devices  501 . The server  535  can be representative of a data server, an application server, an Internet server, or the like. 
     Aspects described herein can be embodied as a system, method, or a computer readable medium. In an embodiment, the aspects described can be implemented in hardware, software (including firmware or the like), or combinations thereof. Some aspects can be implemented in a non-transitory, tangible computer readable medium, including computer readable instructions for execution by a processor. Any combination of one or more computer readable medium(s) can be used. 
     The computer readable medium can include a computer readable signal medium and/or a computer readable storage medium. A computer readable storage medium can include any tangible medium capable of storing a computer program for use by a programmable processor to perform functions described herein by operating on input data and generating an output. A computer program is a set of instructions that can be used, directly or indirectly, in a computer system to perform a certain function or determine a certain result. Examples of computer readable storage media include, but are not limited to, a floppy disk; a hard disk; a random access memory (RAM); a read-only memory (ROM); a semiconductor memory device such as, but not limited to, an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), Flash memory, or the like; a portable compact disk read-only memory (CD-ROM); an optical storage device; a magnetic storage device; other similar device; or suitable combinations of the foregoing. A computer readable signal medium can include a propagated data signal having computer readable instructions. Examples of propagated signals include, but are not limited to, an optical propagated signal, an electro-magnetic propagated signal, or the like. A computer readable signal medium can include any computer readable medium that is not a computer readable storage medium that can propagate a computer program for use by a programmable processor to perform functions described herein by operating on input data and generating an output. 
     Some embodiments can be provided to an end-user through a cloud-computing infrastructure. Cloud computing generally includes the provision of scalable computing resources as a service over a network (e.g., the Internet or the like). 
     The terminology used in this specification is intended to describe particular embodiments and is not intended to be limiting. The terms “a,” “an,” and “the” include the plural forms as well, unless clearly indicated otherwise. The terms “comprises” and/or “comprising,” when used in this specification, specify the presence of the stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, and/or components. 
     With regard to the preceding description, it is to be understood that changes may be made in detail, especially in matters of the construction materials employed and the shape, size, and arrangement of parts without departing from the scope of the present disclosure. This specification and the embodiments described are exemplary only, with the true scope and spirit of the disclosure being indicated by the claims that follow.