YOUWORLD APP
A web application partnered with US top brands to distribute curated shopping and experiences content to Chinese travelers
PROJECT OVERVIEW
YouWorld App (YWApp) is the highest impact product of YouWorld, Inc. who is aiming to promote curated in-store shopping and experiences content to millions of Chinese outbound travelers in the U.S. I was in charge of this product from 2017 to 2020. During this period of time, YWApp released 5 versions. Here I am showcasing the V4 design stories, which included a major product restructure.
Design & Dev Duration: 3 months
Story 1: Redesign product structure
Story 2: Make user experience more immersive
Disclaimer: The information disclosed below has been approved by YouWorld's CEO Yuanbo Wang.
Note: For better demonstration, I have translated the UI into English in this presentation.
PRODUCT BACKGROUND
YWApp is not a UGC community.
Instead, we collected content from our clients, the U.S. retailers, translated them into Chinese and distributed the content through other channels or apps.
YWApp focuses on the offline shopping experience.
YouWorld's niche in the market is to provide IN-STORE offers and shopping information to the customers. Why?
ABOUT VER.1- VER. 3
We have built a successful MVP
which only has two layers in the product structure:
homepage > brand-filtered homepage
THE PLAYERS
We were runing a B2B2C business model
STORY 1
Redesign Product Structure
to Build up a Content Distribution Ecosystem
THE PAIN POINTS
Current product content reach is insufficient
Chinese Shopper
"I can hardly find any trust-worthy information about the outlets in LA in my Chinese travel apps. I cannot make any shopping plan for the upcoming US trip."
"I don't know where and what to buy around the LA area"
The YouWorld Sales Team
"The YWApp feature set cannot support location-based content. I have missed a lot of potential clients from shopping malls and outlets."
IDEATION
Map out the players and their Needs
Then, I led several rounds of product meetings.
I collected, grouped and prioritized the ideas and potential features based on the Impact/Effort Matrix.
LEARN FROM THE INDUSTRY
In-Depth Industry Research
Although finding and signing contracts with the partners is the job of the business development team, how to make the collaboration work smoothly is definitely a product design issue. YWApp and the partners are sharing the same data source. In order to meet the industry standard, I conducted in-depth research on the top well-performing Chinese Travel & Life Apps.
WHAT I FOUND
We miss a store (POI) layer
list the poi page from different platforms.
the store layer contains the major features to improve the in-store experience.
MY SOLUTION
The New YWApp Product Structure
After several rounds of discussion, I finally submitted the product structure design, which had been approved by the sales and engineer team.
Before: Version 3
After: Version 4
How the demand from different players flows in each POI
From this diagram, I decided to leverage Offer and POI (store) as the 2 primary features to fulfil the needs,
each of them contains secondary features under it:
Offer: The marketing promotion tool.
It could be coupons, special invitations, lucky draws, gifts, or any kind of tool that can stimulate customer’s incremental spending.
POI: Point of Interest, namely, store.
Each POI contains basic information of a store, such as the address, the business hours, the on-going promotions, the associated brands, etc.
A low-fidelity page flows with basic features layout
Ver. 3
Ver. 4
STORY 2
Provide Immersive User Experience
for In-Store Shopping
STEP 1
Encourage the user to visit the store
STEP 2
Improve their shopping experience in store
And this is what we can expect...
THE MAJOR PROBLEM
Static UI Components
A confession from myself
The current style utilizes a lot of one-off styles. Even a small UI change will cause a lot of engineering work. We cannot customize it for different scenarios or campaigns at all.
Let's think about...
Restructure the UI into modules and align it with industry standards.
USING BUILDING BLOCKS
Create the Design Modules
We did not implement design modules for the first 3 versions. We just stacked on new features and content onto the original design and the system used to be very fragile.
I decided to improve this situation by introducing design modules in the UI. These modules are either reused from the previous product style or influenced by Chinese travel apps. My goal is to use the most widely adopted styles that users are accustomed to, in order to reduce the cognitive cost of navigating the new version.
A little more on the design for the two primary features: Offer and Store
The store images >>>
<<< The offer logos
From store list to store detail
The Shopping Section
From offer list to offer detail
The Final Interfaces
FEATURE WALKTHROUGH
Page Flows that Involves the OFFERS and the STORES
Flow 1
Flow 2
SECONDARY FEATURE
Brand Story
The "Brand Story" section is where our content team shows their talent.
In this section, there will be an overall brand introduction, latest promotion newsletter, a review from a signed fashion blogger, or even a link to the client's WeChat official account.
Theme Page
SECONDARY FEATURE
Store Locations
The data of these store locations were provided either by the merchants or collected by the YW team from industry sources.
By clicking each address, users can choose to open a map app for navigation.
Theme Page
Navigate to the Store
Store Contact
Store Page
SECONDARY FEATURE
Contact & Navigation
Users can open the navigation within their preferred map apps
It includes holiday business hours for users to plan ahead
SECONDARY FEATURE
Term Search and Location Picker
These features were inherited from the previous versions, but in the new version, there were more categories (brand, mall, etc.) in the search result and the location picker was overhauled.
Search
Location Picker
STORY 3
Customize the YWApp for Client Marketing Campaigns
The Normal Entry Point
To enter our product, there is one type of entry point: users can land on the homepage by clicking the links from the external channels. They can then check more shopping information through the homepage.
A NEW PROBLEM
Clients need exclusive and customized YWApp pages
YouWorld's Client:
"We want a product that customized for us and only displays our content. The search shouldn't get content from other brands. User saved offers only displays the ones from us."
Let's think about...
Create a feature that displays restricted content.
MY SOLUTION
The Direct Entry
To solve the problem, I, together with the engineering team, worked out a feature called “Direct Entry”. For example, let's say, we are helping Beverly Center launch a campaign. There are a lot of Beverly Center owned channels. We will provide those channels with a campaign URL that contains the "utm_term=direct_entry". By clicking or scanning the link, the users will skip the homepage and land directly on the Beverly Center’s theme page with homepage functionality.
Normal Entry
Direct Entry
The Theme Page Functioning as Campaign Homepage
In this scenario, some of the homepage-exclusive features must be shown on the theme page and be fully functional:
location picker, search bar, footer, etc.
UTM parameters used in the campaign URL:
utm_term=direct_entry
utm_content=location_1
utm_source=wechat_miniapp
utm_medium=official_account
utm_campaign=bev_2019
I worked out this diagram that shows the mapping of the UTM parameters
and their values in relation to the product features.
The Appreciation from the Clients and the Partners
With the new features, YouWorld was able to fulfil the needs of more clients,
and has launched more campaigns.
As increasing clients provided contents for YouWorld,
we partnered with more Chinese travel and shopping platforms as well
THE RESULT
This project was initiated by the company business goals. We focused on the success metrics at the very beginning of the project: 1) Obtain 5+ distribution partners from this new version; 2) Launch 10+ campaigns by the end of 2018 with this new version
And this is what we see:
Some of the Campaign Results
A LITTLE MORE ABOUT WHAT HAPPENED NEXT
Research showed that 95% of the in-store shopping experience in China involved the use of QR codes. Crossborder stores had started to introduce QR codes in their marketing strategies in the US as well.
In late 2019, a new client's need emerged from this marketing trend. To respond to the clients, YWApp released two new features on the store page. Both of them can be accessed by scanning the QR codes displayed at stores.
New Store Page
Banners and Offers: inherited features; display sponsored content and featured offers
Social feeds: display product-related content from Instagram, Red(小红书) and Sina Weibo (新浪微博)
Pre-order: each card links to a product detail page, where user can pre-order online and pickup the goods at stores
The Pre-Order Feature Overview
The system will recommend the user to pick up the orders from the same location on the same day. After the user placed the orders, they will see a pick-up instruction page as shown on top.
NOT AN END
In early 2020, our CEO decided to sunset the YWApp as well as the YWSP. The YWApp has retired, but this is not the end. The data it collected is still in use by YouWorld’s new product Plug-N-Pay, a fintech solution that enables native payment and currency via gift cards.
The Retail & Travel Martech Disruptor Seminar
hosted by YouWorld at USC Michelson Center, 2018
<<<
An article about YouWorld
by Los Angeles Business Journal, 2018
>>>
>>>
Ideas from the team in product meetings
Some pieces of the Company Journal I sketched to record the moments of the meaningful three years.
😃I am really happy and proud that I used to be a member of this wonderful team.
Thanks for reading!