Background
With increased Google ad spending and the rise of cross-platform development frameworks (RD), we aim to align the old Mweb user experience with our App design. The current App has significantly improved the buyer experience through continuous optimization. We plan to apply these enhancements to the Mweb revamped so that new users can experience the journey we have strategically designed on the App. This way, users who access Mweb through ads can quickly get familiar with the UI without needing to adapt to a different experience after downloading the App. Additionally, we believe the App's purchase experience enhances the shopping experience, giving our team more confidence in achieving goals.
Business Goal
➊ In the first phase , we'll use the user traffic from VeryBuy's September anniversary to get users familiar and touch with the redesigned Mweb. We will tracking key metrics to see if they meet or exceed the old version's standards, serving as a benchmark for the revamped success.
➋ If the anniversary performance meets expectations and is successful, we will enhance the shopping experience during Double 11. Our goals are to increase the number of items added to the cart (ATC), improve the net promoter score, extend the average browsing time, and increase the number of products users view on average.
Design Goal
Since the platform interactions between the App and the browser are different, following the App experience UI as a revamped basis, users might find it challenging to browse smoothly on the browser.
Personas
Who are we designing for? 3 Types of Mature Female User
Based on our personas, we focus on three types of mature female users as our main target audience because their characteristics and preferences are crucial for achieving our goals.
The personas are generated through one-on-one interviews, literature reviews, and data analysis. We have created personas for these three types of mature female users to understand their goals, expectations, and buying motivations.
In order to increase new users' add-to-cart rates and average browsing time on the site, we focus on these three main personas.
We design and strategize product display logic, wording, and user experience layout according to their preferences to improve their engagement and loyalty.
Primary experience Journey optimization
➊ Product Size/Color Selection Experience Enhancement
Issue：
In the old version of MWeb, users had to click through multiple dropdown menus to select product specifications, which led to longer processing times for choosing and confirming these specifications. This also increased the time users took to make ordering decisions.
Solutions:
After the revamp, all specifications are now integrated into a dialog. Users can quickly and accurately confirm product details, which shortens processing time. Clicking on specifications will display the corresponding product images, preventing ordering mistakes and shortening the time it takes to place an order.
➋ Coupon Experience Optimization
Issue：
In the old version of MWeb, users were only provided with discount codes, which were difficult to remember and input, prolonging the ordering process.
Solutions:
Ⓐ The new version of MWeb has a special 'Coupons Area' where users can easily collect and save coupons with one click. It also shows happy, uplifting animations when a coupon is saved, making users feel they are getting a great deal and encouraging them to place an order. During the checkout process, they can choose the most discounted coupon from a list of available options.
Ⓑ The checkout process has been split from a single-page format into two steps to provide clearer information: 'Confirm the order list and coupon' and 'Shipping address and payment method.The 'Proceed to checkout' CTA is consistently placed and highlighted on the two-step payment page, making it easy and effortless for users to tap with their right hand. This design strategy reduces the time and effort needed to complete the purchase
➌ Enhanced Item Discovery and Recommendation
.png)
Issue：
The homepage layout is a user's first impression of an e-commerce site. Its purpose is to quickly catch their attention and encourage exploration. In the old version, product placement was limited by available slots, with fewer products and less guidance. Marketers had to constantly design popular items and fashion themes to attract users, but this approach struggled to meet the diverse preferences of all users.
Solutions:
Ⓐ After the revamp, our product recommendation logic is based on the “product labels” of the first item detail page a new user visits. This displays more related items that the user might be interested in, allowing them to browse freely. The recommendation system also includes high-click items, helping users see what’s currently popular.
Ⓑ In the design strategy, besides setting specific areas (e.g., new arrivals, trending items) for user exploration, we have implemented an infinite scroll feature at the bottom of the homepage, named “You Might Like…”. This feature, combined with the existing product display logic, allows users to keep browsing and discover more products they are interested in.
What design strategies are we using to enhance the Mweb browsing experience?
Addressing What Issue？
Due to the differences in platform interaction between Mweb and the App, we need to refine the relevant browsing items experience on Mweb to make it more user-friendly.
Problems & Solution:
「Add a Header and Hamburger menu design across the whole RNWeb to improve the browsing experience and solve the problem of users' browsing not being smooth enough.」
The site-wide Header and Hamburger menu layout are designed to provide a convenient and intuitive browsing experience when users want to continue exploring.
In the shopping process, the Header and Hamburger menu are not included because this aligns with our top goal: "to let users successfully place orders." We want users to focus on placing orders during their shopping journey.
The search page and product detail page have specially designed Hamburger menu layouts for different scenarios, as described below.
➊ Alterations in the header configuration
Ⓐ. item Detail Page
Ⓑ. Homepage
Feature layout : Search, Share, Add to Favorites
⬅️ Feature layout : Notifications, Profile, Cart
On the item detail page, we will first encourage users to click on the Hamburger menu to assist with browsing. The functions of search, share, and add to favorites will be highlighted and feature as sticky options on the right header. If a user is attracted by an advertisement but doesn't particularly like that item, they can easily use a keyword search.
The share button allows users to share the product with friends and family, making it easy for users to spread the word. Additionally, the add to favorites function lets users keep track of products they like if they want to explore more options.
If users are forwarded to the homepage, the header functions will focus on "casual" exploration of the e-commerce platform. On the homepage, the key functions will primarily guide users to essential pages. It also encourages users to register as new members and highlights the shopping cart's location.
➡️ Feature layout : Notifications, Search bar, Profile, Cart
When users scroll down the homepage, the header will display a search bar with the hot keywords. This allows users to directly search for items if they cannot find their preferred items on the homepage
Ⓒ. Search Page
Feature layout : Search bar, Hot keywords layout
When users focus on the search bar, they will enter the search page, which is laid out with more related hot keywords and outfit recommendations to assist users in their browsing.
➋ Layout Strategy of the hamburger Page
Ⓐ
Ⓑ
Ⓒ
Ⓓ
Ⓔ
Ⓕ
Ⓐ. First is the "Register and Login" section. Aligning with our business goals, it is essential for users to become registered members. However, since users who open the hamburger menu often wish to browse freely, this section is designed to be lightweight in terms of space and perception.
Ⓑ. All products are categorized and packaged under the "Featured Products" section, making this section more attractive. We also designed icons that align with VeryBuy's style.
Ⓒ. The "Policies" and "About VeryBuy" section addresses relevant regulations and provides information for new users who may not trust us yet.They can read about the brand's story. This section is designed to be relatively lightweight compared to the "Register/Login" section,so as not to interfere with the main browsing experience.
Ⓓ. Download APP banner will be placed here. The main consideration is that after users have browsed, they will trust our platform to some extent. If users are interested, the attractive banner on the hamburger page will guide them to download the APP and register as our new users.
Ⓔ. Also, there will be some related social media and service locations for users to continue learning about us and exploring our related communities.
Ⓕ. Lastly, it provides a friendly option to switch to the classic Mweb. This allows users who are not adapting well to the new interface to continue browsing items as they did before. The main purpose is to observe users' acceptance of the new RNWeb version.
➌ New RNWeb Announcement & Tutorials
Ⓐ. Create celebratory illustrations to inform users that RNWeb has been updated !
Ⓑ. After clicking "馬上體驗," it lets users see the items they were interested in from the advertisement first. When users browse to the second item, a lightweight tutorial will then appear to assist them in navigating the new RNWeb.
Ⓒ. The lightweight tutorial is arranged based on the three main actions on the "Item Detail Page," which include: "Header Introduction," "CS Channel," and "Zooming In to View Item Details." We chose these three main actions to avoid making the tutorial too long, which could negatively impact the user's shopping experience or cause users to leave the platform. We understand that some users may resist overlay tutorials, so we provide a friendly "Skip" button to allow users to ignore the tutorial.
Usability Test
Business Goal Validation Items
Ensure that users after being directed through paid ads, can naturally and smoothly browse VeryBuy's item detail pages (the landing page after clicking the ad).
Also, evaluate the ease with which users successfully add to cart, place orders, and interact with any page on the new Rnweb.
Design Goal Validation Items
Through usability testing, observe and understand users' shopping behaviors and expectations on the new RNWeb. Use the insights gained to prioritize and optimize the design, better meet user needs, enhance the overall user experience of RNWeb, and achieve the initial launch experience standards.
Ⓐ. Focus on the three main key processes: browsing, checkout process, and order tracking. Develop detailed observation items and tasks related to these experience journeys.
Ⓑ. Since there are similar numbers of new users on Android and iOS, we will choose two new users from each platform. They will test using Chrome and Safari browsers (these are the most used browsers for mobile e-commerce according to our data).
.png)
.png)
Ⓒ. Measuring Usability with SUS
Use the SUS questionnaire to measure and evaluate usability scores to boost the team's confidence in the new version.
.png)
➊ Users smoothly browse the RNW Item page after entering through paid ads.
➋ RNW page elements are clear, and the number of interaction levels has been reduced 👍. From the SUS score of 89 and post-test interviews, we know that users find the updated page much clearer. Finding the "shopping cart," "my orders," and "shipping information" is very intuitive. The homepage elements are also more engaging compared to the old version. The issues of "features being buried too deep," "confusing hamburger menu," or "lack of new ideas" have been significantly improved!
➌ The "Category Products" section in the hamburger menu and on the homepage greatly enhances the shopping and browsing experience: RNW's homepage highlights the categorized products, hitting the mark for users who enjoy browsing 👍. Compared to the old version, the difference in browsing and exploration is evident! (As shown in the image)
Users did not know that the profile section in the hamburger menu could be clicked or where it would lead. During shopping navigation, users wanted to check "My Orders" and tried to find it by clicking the hamburger menu. They didn't realize that the top profile could be clicked to access their main page. Users told the moderator they were stuck and didn't know how to find order information. Post-test interviews revealed the main reasons: users didn't know the top section could be clicked, and they had a weak understanding of the "My" label, so they didn't know where it would take them.
Performance
👍Finding:
🔧 Optimizations
Performance
➊ "ATC (Add to Cart) rates have seen a slight increase, rising from 4.85% to 5%." 👏
.png)
User Questionnaire：
Actual number sent: 16,761
Number of recovered samples: 804
Effective response rate: 50.13%
➋ After the revision was launched, the smoothness of the network/app fell within the range of good 👍 static scores.
Research Method：Net Score :
The net score value represents the difference between the "highest overlap" and the "lowest overlap". Developing countries often use the net score value to calculate the range of merits (sizes). Highlights: 60 ~ 100 is excellent , 40 ~ 59 is good , 30 ~ 39 can be better , less than 30 disadvantages.
The 9th anniversary celebration of the Rnweb revamp met the team’s expectations. Before the upcoming Double 11, we not only feel more confident about the new Rnweb but also want to implement some targeted optimizations to increase the add-to-cart rate (ATC%) and average browsing time, ultimately improving the overall checkout conversion rate.
Further Optimizations for Double 11
➊ Belt
Goals：
Ⓐ. Increase the number of items users browse and the average browsing time during Double 11.
Ⓑ. The belt slot should allow users to quickly view items they are interested in.
Ⓒ. Belt slots should not occupy too much screen height.
It’s important to consider user interaction on the item detail page and the relationship between screen height and information display.
Bench Mark ：
Increase Avg Duration & ATC
Performance:
After the belt function was launched at 10/29, the average number of products viewed per person reached more than 3 times.
➋ Campaign banner
Goals：
Ⓐ. Attract new users to register as members through quality discounts.
Ⓑ. Users should be able to quickly close the product to prevent frustration.
Bench Mark ：
Increase registration rate
Performance:
11/5 After the banner went online, the registration rate increased by 0.4% .
Other Performance
➊ During Double 11, the browsing duration performance of MWeb remains similar but shows a slight improvement.
➋ During Double 11, the proportion of users placing orders 2 or 3 times on MWeb increases.
.png)
.png)