Home Page UI
This is how Webbie envisions its website to look, however, it will differ after several iterations of feedback and new features. We decided to leave out icons for the categories, however, in the MVP and product release, there will be icons for each category.
The numbers below correspond to the numbers shown in the image above*
Merchants - Brands and/or Live Streamers
Users - Anyone that uses the website (most likely referring to customers)
1. The Menu Tab offers users quick access to some of the important features of the website. Since users might not be interested in specific categories, but rather new and upcoming products, they may prefer to use the tabs on the left. Trending takes them to a page where products have experienced a growth in sales in the last couple of days. Explore takes them to a page where merchants have seen a growth in interest through views and likes. Subscriptions takes them to a page where they are able to see all the merchants they have subscribed to. This differs from Followings because to subscribe to a merchant, a monthly fee is incurred. Followings takes the user to a page where they are able to see all the merchants they are currently following.
2. This is where all the main categories of products listed on Webbie's page can be found. No sub-categories are hosted in this element. With this, the user can quickly swipe through multiple categories and select the one they are interested in. They could perhaps also pass an element that they are not initially interested in but are now.
3. The search bar tool also offers users a much more convenient way to search for products, brands, and live streamers. By searching one of these, the user will be redirected to a webpage with the most relevant results. If a live streamer was searched, the videos that the live streamer has recorded in the past will also show up. This is to enhance the searching experience and make the shopping experience more efficient.
4. Since live shopping is made to be interactive and fun too, Webbie has included a Shopping Bag, Direct Messages, Notifications, and a Personal User Account. The shopping bag allows customers to add products into their bags and checkout instantly. They are able to purchase a range of products from a range of brands all within one checkout. Direct Messages is a feature Webbie wants to implement because it wants users to ask questions and/or concerns they have about products to merchants. Merchants can then contact these customers back directly without having to go through email. The notification icon alerts users whenever a merchant goes live if they are following and/or subscribed to the merchant. The notification icon will also send alerts for special promotions and discounts that are being offered by merchants that the user has followed and/or subscribed or merchants that the user could possibly be interested in.
5. These 4 tabs are considered sub-category tabs. These 4 tabs can change, however, the sub-categories that appear on the home page are decided by how often that sub-category is viewed as well as how many products are purchased from that sub-category.
6. The Trending Products tab takes customers to a page where they will be able to see products that have been gaining traction over the last couple of days to weeks. These are products that have recognized an increase in sales as well as viewership and likes.
7. The Product Discounts tab takes customers to a page where they will be able to see products that have an ongoing discount being offered in a live stream. So if a merchant offers a 15% discount in their live stream, at that point in time, their live stream will be shown in the Product Discounts page.
8. This Recently Viewed Products slider makes it easy for customers to come back to the website and see what they last looked at. It could also remind them that they have been interested in this product and to convince them to purchase it.
9. Ongoing Live Streams is the most important feature for the website. Over here, you will be able to see multiple previews of all current merchants live streaming. It will state their username, what category they are live streaming in, how many people have viewed the live stream, how many people are currently viewing the live stream, as well as, which brands they are presenting on their behalf. This makes it easy for the users to decide which live stream they would be interested in from the start.
10. Sell with Webbie is a link that redirects interested merchants to a page where they can sign up to become a merchant.
11. These tabs offer users quick insight into their account. They are able to look at their purchases as well as track them, add items into their wishlist and be notified whenever there is a discount for these items, add their prefered method of payment, add discounts and vouchers offered by stores themselves or by Webbie and change their data and preferences.
Merchant Live Stream Page UI
This is what Webbie envisions a live stream page to look like and what customers will see when they enter a live stream on Webbie.
Firstly, on this page, users will still have quick access to some main features such as the side bars where they can quickly choose to direct themselves to the home page, trending page, etc. They also have quick access to their shopping bags, direct messages and notifications.
1. Users will be able to see the merchants profile picture as well as how many users are currently watching the live stream. This number only accounts for current viewers and not past viewers.
2. In this tab, users will be able to see what products the merchant is going to be presenting. This clean layover makes it easy to watch the live stream while scrolling through the many products that can be listed in this tab. It lets users see the brand of the product, the name of the product as well as the price. Users can choose how many they would like to purchase and can click on BUY. Clicking on BUY does not mean that the customer instantly purchases the product. It simply means that it is added to the shopping cart.
3. This chat function is also one of Webbie's most important features. This allows users with an account to ask any sort of questions and/or add comments to the live streams. This is important as it adds interaction between the live streamer and its customers. If anyone has questions, the live streamer is the one who is most likely to be able to answer them. Webbie also offers roles of a coordinator where their job is to answer questions on the live chat. This can be because there are tons of questions which the live streamer simply cannot cover.
4. Product Like This is a section that shows products similar to those being featured in the live stream. This gives users direct alternatives without them having to look for them.
5. Videos Like This is a section that shows both live streams and videos that are similar to the live stream. It decides this based on what products are being advertised as well as the brands that they are representing. This gives users also direct alternatives to reviews and opinions.