INTRODUCTION:
website migration:
Vans Korea Hub ( Brand identity and activation ) and Vans Korea E-Commerce.
Here was a project to migrate two websites which are different aspects and functions. The Korea Hub is mainly focus on the brand and cultural aspect. Skateboarding news, brand activations, skater and artist showcase in website strengthen the relationship between local youth culture and Vans's "Off the Wall" value, in order to build a long-term advocacy. On the other hand, the E-Commerce website is separated from Hub, which is more directly to buy and sell products. However, this is different with the Global and South East Asia E-Commerce practice.
In the beginning, I was working closely with Korean Brand Communication team, APAC E-Commerce team and assisted the research studies to provide design solutions in order to fulfil the user needs, business challenges and Korean local market. At a later stage, starting with wireframing, sitemap and metric style guidelines for UI design, and communicated with Korean development agency to complete the whole site in mockups and for AB testing.
Customer/ user need a way to… (Pain Point)
Directly purchase the desire product instead of redirect them to different websites which is confused them during the journey.
New content and pages are hard to be categorised by stakeholders between two websites. Customers are unable to find the certain content, such as: skateboarding news, Vans activation and latest collaboration.
Challenge
Increase the opportunity of dropping off.
Because of function overlapping, some contents are miscategorised in the navigation menu, even in websites.
Product Listing Page traffic account for 62% of total traffic. This is due to core source come from Naver display ad.
Research Finding
Product Listing Page accounts over 60% of total traffic. Customers mostly browse and stay between Product Listing Page and Product Detail Page back and forth.
High Bounce Rate of Product Listing Page.
No matter where the users' entry point (Product Detail Page, Content Page, Home), their 2nd step usually go to PLP.
Insight
The information/ CTA/ guidance in PDP is not sufficient enough to convince customer to take an action to check out flow.
Four columns product showcase is not attractive at all. Also, the filter section is not obvious enough. Besides, without relevant contents that keep users stay in the site.
Users are less likely going back to homepage, meaning that top navigation bar and navigation menu help to identify the right Product and Content in certain extent.
1. Discard the overlapped content between two websites but also consider to add new functions
2. Improve the user experience of PLP and PDP
3. Improve the the existing navigation bar and navigation menu
Despite of the Naver display ad led users land on PLP greatly, I see it is important to direct users to PLP, so flows to PLP were funneled from Content Pages (for example: News Detail Page, Skateboarding Page).
For Typography, Global provided a standard guideline in English. Considering the Korean market, I decided to develop a set of reference styleguide (text in buttons, forms and product badges) in Korean for developers. So the wireframes in English that I designed can easily switch to other language without changing their interfaces. Also, there are icons for Korean social media and specialized functions in a regional website.
One of the purposes of migration is to reinforce the brand communication in a E-Commerce. For UI elements, there are several sections (News section and Recommended Products section) that appear frequently in different pages, designed a responsive elements for PC and mobile to increase interactions between product showcase and news media.
Adopted the previous layout of E-Commerce Home Landing, Primary and Secondary Banners, New Arrival, Best Seller and Event sections are kept, and made several suggestions. For example, buttons and html text are added on Primary Banner, finished with User Generated Content plug-in section to show the diversification of our products. Also, based on the research studies, our competitors (Converse, Nike...) use grid layout in Korean market, we believe that Korean are more focused on visual uptake rather than only standard product shoot in Home Landing, so I proposed another version in New Arrival section for local audiences.
Here are the Sub-meun in a responsive layout. In PC version, there is a mouse over interaction, and reduce the height of previous version of sub-meun which has occupied 2/3 of a screen. In mobile version, there is a navigation drawer menu with hierarchy.
Since PLP contributes over 60% traffic, without changing the basic functions and layout, few functions are added to improve the user experience. There is a limitation of four columns product showcase, first is product standard photos were too small and not attractive enough, that might reduce the interest of potential customers and not encouraging on sale. Besides, the filter section merged with the background, it was not clear enough to classify categories.
The categories in filter could be add/remove depends on Apparel, Accessories and Footwear Listing Page, and the size measurement units correspond to different product types.
The limitations of previous version could be solved by two new functions which are show/hide filter and three/four columns layout selection (as below).
Recommended Products section is added. According to specific Product Listing Page, users can choose between four corresponding products (Best Seller, Customs, New Arrival, Recent Viewed) in the backend system. Also, other color choices, rating, content slot, Add to Favourite functions are added to improve user experience.
Quickshop pop-up is shown as below.
Referencing the design of Korean and Global version, we decided to follow the Korean consumer practice, the product informations are shown as same as the previous version. Furthermore, Smart Size Guide is added and User Generated Content plug-in section was placed under the PDP Carousel to motivate brand-consumer interaction through social platforms (Facebook and Instagram).
Before migration, news articles are shown on Hub Landing Page, which were unorganized. I decided to develop an organized News Page with breadcrumb navigation as Global and classify into different categories (action sports, genders, events, collaborations, cultural aspects) with breadcrumbs navigation. Combined with CMS, the Content Coordinators could easily adjust the latest contents.
In News Detail Page, I suggested Related Products section was placed beside the news contents. Consumers can click into Product Detail Page directly in order to shorten the time and distance to PDP, strengthen the connect between marketing and sales.
Log In and Check Out as Guest versions are considered.
01 - 04
Considering Korea is real-name authentication on the internet. Phone Number Verify, Day of Birth are required in Sign Up Page. Also, the Terms and Conditions should be listed out before confirm to Sign Up, unlike other regions.
