Helping people learn about Neokyo's proxy service
Role:
I worked as the UX designer and collaborated with Neokyo's front-end developer and key stakeholders.
Tools:
Figma, Hotjar, Google Analytics
Method:
Data Analysis, Wireframing, Prototyping, User testing
Neokyo is a Japanese proxy shopping service, which by default introduces more complexity compared to traditional
e-commerce platforms. Users need to navigate various steps such as item searches, order consolidation, and international shipping logistics.
However, the existing introduction page made it difficult for new users to understand these processes, leading to frequent questions for the support and moderation teams. Essential information was either hard to find or too complicated for users to quickly grasp, resulting in a frustrating onboarding experience.
Specific Goals
Simplify the information architecture to make key details more intuitive and easier to locate.
Make content more concise and digestible to improve user comprehension and reduce feeling overwhelmed.
Create multiple exit points on the page, allowing users to seamlessly begin their journey or dive deeper into specific features of the platform.
Key Metrics
Decrease in the number of support requests and community inquiries regarding basic platform usage.
Increase in click-through rates on shortcut buttons, indicating improved user navigation.
Higher onboarding conversion rates and enhanced engagement with key content on the introduction page.
My responsibility involved creating a fresh introductory page to demystify the concept of a proxy service, its functionality, and Neokyo's advantages versus its rivals.
1
Define User Problem
2
Research & Analysis
3
Sketch & Ideate
4
Wireframe & Prototype
5
Test & Release
My initial step involved assessing and interpreting user communications and community Discord messages for the purpose of identifying recurring pain points. Both these mediums displayed an abundance of new users seeking elementary information about the services we provide. Most were directed to the existing guide or to multiple pages to find further explanations.
I categorized the majority of these inquiries into three main groups:
HOW TO
“How do I make a buy request for {Insert store}?”
“How can I find out what I’m allowed to purchase?”
“How can I cancel my package request?”
“How can you find more information about {topic}?”
HOW MUCH
“How much does the service cost?”
“Is the fee per item?”
“How much is domestic shipping?”
”How much does it cost to create a package?”
“How much can I save if I combine orders into one package?”
WHERE CAN
“Where can I purchase items from?”
“Where can I see what items aren’t allowed to be shipped?”
“Where can I see how long until my order arrives?”
”Where do I pay for my auction items?”
The existing information on both the newcomer guide and help sections was lengthy, wordy, and packed with technical jargon. The material was dull and frequently ignored as users found it simpler to inquire elsewhere, such as Discord, Reddit, or Twitter, for the desired information. Yet, not all users may opt to follow this route, and the elevated departure rate signaled a failure to effectively inform users about the operations of Proxy Shipping.
My aim was to comprehend user interactions with our new guide page, so I examined session replays and heatmaps provided by Hotjar.
Session replays revealed a less than ideal mobile compatibility, leading to users scrolling back and forth on the page in search of pertinent content. Moreover, those who did uncover the information of their desire were obliged to browse through 1 or 2 additional pages for more details. The page's bounce rate surpasses that of most other Neokyo pages and there's a slightly elevated quantity of recordings marked by user exasperation signs/rage clicks.
This points towards users growing irritated due to their inability to easily locate information related to their queries.
Page Performance
Bounce rate: 14%
Most clicked link: Fee’s page
Visitors scrolled to end: 5%
Additional Findings
High number of clicks on elements that are not interactable.
Post reviewing customer remarks, analyzing the webpage, and studying data gathered from Google Analytics and Hotjar, I spotted three principal issues with the earlier user experience:
Insubstantial content: The webpage failed to present useful information, and instead, supplied links directing to other pages that featured large, intimidating text blocks. This methodology irritated and bored the users.
Unidimensional Layout: The unidimensional layout led to extensive scrolling, prompting users to leave before locating the required information.
Poor Information Architecture: Despite providing numerous links, it wasn't apparent what information the page encapsulated and whether it pertained to the user's specific inquiries.
My subsequent move involved outlining the framework of the pages. Using the existing page as a foundation, I conferred with stakeholders, determining which novel or tweaked segments we might incorporate. Afterward, I set about creating a user journey for the fresh user guide page.
Sketching & Ideating
Once the plan was detailed, I transitioned to drafting and jotting concepts for page components.
At this juncture, the quantity of content blocks for sections like “Neokyo Steps” components like the fee breakdown were under evaluation and trial. This phase was utilized to get ready for wireframing and to discuss my thought-out ideas with key team figures (such as the frontend developer) to comprehend the optimal strategy for Neokyo.
During this project's timeline, Neokyo was yet operating on JQuery 3.5 and had tight restrictions on UI elements.
In this phase of the project, I primarily concentrated on reorganizing the current page content and integrating new features. After finishing the initial low-fidelity prototype, I presented it to the primary decision-makers and customer support staff to identify potential enhancements. This led to suggestions for incorporating a table comparing services and a catalog of forbidden items. With this input, I proceeded to design the high-fidelity mockups.
Prior to making the page accessible to all users, we implemented a short two-week A/B analysis to appraise its performance and detect any problems not caught in our internal QA tests.
The preliminary outcomes were promising, and after a couple of essential bug fixes, we fully rolled out the New User Guide page.
We remained vigilant of its performance and studied user engagement heat maps to gauge its effectiveness and determine any further tweaks or enhancements. This page's overall performance has improved, contributing to improved comprehension among new users, which resulted in a higher conversion rate and a decreased volume of usual support inquiries.
The page now offers a mobile-friendly experience, and the deployment of rapid access links at the upper part turned out to be a successful strategy that can be applied in forthcoming page updates.
Page Performance
Bounce rate: 5%
Most clicked link: Fee’s page
Visitors scrolled to end: 25%
Additional Findings
Noticeable reduction education of incoming questions related to Fees, Prohibited items, and buy requests
Increased number of new users converting to purchasing users
