Optimising UI for Localisation Accuracy
Rakuten Viki
Role
UI/UX Designer
Duration
6 months
Target Audience
Portuguese speaking users in Brazil
Year
2024
Localisation is crucial for Viki’s growth, especially in non-English speaking markets. A specific focus on the Portuguese (Brazil) market revealed UI issues when translating copy. We achieved a more cohesive and user-friendly interface by addressing problems like text-overflow and layout misalignment, enhancing user satisfaction and engagement in the Brazilian market.
IMPORTANT NOTE:
The GIFs and visual assets used in this project are sourced from Haw Par Villa's official branding and website.
The GIFs and visual assets used in this project are sourced from Haw Par Villa's official branding and website.
Current 429 Error page
🚨 The current Error 429 page on Viki, as shown above, frustrated many due to its minimal design and lack of guidance. Users voiced their frustration on forums, expressing confusion and dissatisfaction with being left in the dark about what was happening or how to resolve the issue.
Design Challenge
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
The initial design challenge was finding creative ways to engage users during high-traffic outages. I explored various approaches, including gamification, memes, and even recipe suggestions related to popular dramas.
These early drafts were reassessed by taking into account the need to balance user engagement with constraints around localisation, ensuring content was relevant across different regions and cultures. Ultimately, the key was to offer universally engaging options while keeping the design lightweight to avoid further strain on the server during traffic spikes.
These early drafts were reassessed by taking into account the need to balance user engagement with constraints around localisation, ensuring content was relevant across different regions and cultures. Ultimately, the key was to offer universally engaging options while keeping the design lightweight to avoid further strain on the server during traffic spikes.
After several iterations and testing, we shifted focus to providing alternative ways for users to stay connected to Viki content.
Final Product
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
1. Messaging: The header, “Oh no, it’s jammed!” aimed to set a light, conversational tone to alleviate frustration. Instead of presenting a cold, technical error message, the phrasing makes the situation feel less severe.
2. User Engagement: An inclusion of QR code allows users to immediately access Viki on their mobile devices, offering an alternative if the desktop version isn't available. A secondary call-to-action directs users to Soompi, ensuring they remain engaged with Viki’s content ecosystem even when facing issues.
3. Visual Hierarchy: The bold typography and short, clear copy ensure that users quickly understand what happened, and the next steps are easily visible. The use of negative space emphasizes the two engagement options (Viki app and Soompi).
4. Error Code Clarity: The actual error code (429) is mentioned with an explanation (“too many requests”) to balance the need for transparency.
2. User Engagement: An inclusion of QR code allows users to immediately access Viki on their mobile devices, offering an alternative if the desktop version isn't available. A secondary call-to-action directs users to Soompi, ensuring they remain engaged with Viki’s content ecosystem even when facing issues.
3. Visual Hierarchy: The bold typography and short, clear copy ensure that users quickly understand what happened, and the next steps are easily visible. The use of negative space emphasizes the two engagement options (Viki app and Soompi).
4. Error Code Clarity: The actual error code (429) is mentioned with an explanation (“too many requests”) to balance the need for transparency.
The redesigned Error 429 page significantly improved the user experience during service disruptions, reducing frustration by offering quick solutions to continue interacting with Viki content. By focusing on user engagement and crafting an efficient design that worked within the server limitations, the page not only served its functional purpose but also helped retain user interest during high-traffic periods.
Why Localisation?
As Viki expands its global reach, localisation becomes an essential strategy to ensure users from diverse linguistic backgrounds feel catered to. Portuguese (Brazil) is one of the significant user target markets where lack of localisation can impact churn rates. However, the challenge lies in maintaining the UI that supports translated content without causing breaks or inconsistencies.
The goal is not just translation, but a meaningful and culturally resonant experience for Portuguese-speaking users, when viewing Asian content.
1. L10n UI copy testing
For Viki, focus lies in offering a localised product to our core markets – the US and Brazil. However, with a minor 5% of Brazilians being proficient in English, we encounter two primary challenges.
- The absence of Brazilian Portuguese translations creates a formidable language barrier, significantly limiting the engagement of Brazilian users with Viki.
- Even when translations are present, we notice discrepancies arising from accuracy issues, which prevents the content from effectively resonating with the users.
Enhancing UI copy
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
The first step of our localisation initiative at Viki involved collaborating with the UXR team to conduct a quantitative comparative review with the Brazil viewers to analyse their feedback when comparing the previous state of UI localisation versus updated state post UI audit and updates implemented.
Users were asked to perform a user flow task from landing onto the homepage to checking out for both the pre and post prototypes designed. And then to indicate which option they preferred, ‘version 1’ (pre) or ‘version 2’ (post), indicating their degree of agreement/disagreement with 10 statements in context of the ‘pre’ prototype experienced.
Scope: Desktop Web, Android App, CTV
Users were asked to perform a user flow task from landing onto the homepage to checking out for both the pre and post prototypes designed. And then to indicate which option they preferred, ‘version 1’ (pre) or ‘version 2’ (post), indicating their degree of agreement/disagreement with 10 statements in context of the ‘pre’ prototype experienced.
Scope: Desktop Web, Android App, CTV
✨ Important Note
We needed to purposely design this study in a way that enabled users to take more conscious notice of UI copy to be able to see the impact of the post against the pre state.
We needed to purposely design this study in a way that enabled users to take more conscious notice of UI copy to be able to see the impact of the post against the pre state.
Results
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
For the survey conducted on Android mobile, 98% of new users preferred the "post" version.
All in all, this indicates that the localisation audit, translation quality, and subsequent implementation does positively influence user experience and brand perception of Viki.
All in all, this indicates that the localisation audit, translation quality, and subsequent implementation does positively influence user experience and brand perception of Viki.
2. L10n UI Design audit
Issue Discovery
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
Moving onto the second step, to identify the problem further, I carried out a comprehensive audit of Viki’s platforms to identify UI issues arising from the translations.
Key Findings and Solutions
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
Buttons
Issue: Buttons were not adapting to longer text, causing them to overflow or break the layout.
Solution: Implement flexible button designs using relative width and text wrapping.
Clients: iOS & Android
However, in a unique case for the Mini channel page, there are two buttons (primary and secondary) within a card and as a solution, the primary button, "Play Eps" is prioritised over "Add to Watchlist" which can be iconified.
← (click to enlarge)
Links
Issue: Links are presented either in a URL format or too wordy and wrapping over 2 lines.
Solution: Use concise link labels that clearly describe the destination for screen readers and touch target success.
Clients: iOS & Android
(click to enlarge)
Layout
Issue: Cluttered layout with translated text causing overlap and readability issues.
Solution: Increase spacing to prevent elements from bleeding into other sections
Clients: CTV (Android TV & Fire TV)
(click to enlarge)
Results & Metrics
Important Note: All visual assets used in this project are sourced from Haw Par Villa's official branding and website.
Following multiple backlog sessions with the development team, we reviewed the newly proposed designs and initiated their implementation on the platform. By doing so, our team has been able to resolve objectives that eliminate language barriers for users in Brazil through an on-platform audit to spotlight major localisation gaps and possible quick wins across all interfaces.
The projected outcome of these localisation design changes and UI copy testing is an enhanced user acquisition conversion rate, leading to an upward trend in MAU to MAV conversions. This improvement is expected to boost both AVOD viewership and conversions from trials to SVOD subscriptions.
It is essential to note that the localisation process is iterative, and this represents just Phase 1 of many more to come. Future phases will continue to refine and enhance the user experience, addressing new challenges and incorporating user feedback to ensure a seamless and culturally relevant interface for all users.
The projected outcome of these localisation design changes and UI copy testing is an enhanced user acquisition conversion rate, leading to an upward trend in MAU to MAV conversions. This improvement is expected to boost both AVOD viewership and conversions from trials to SVOD subscriptions.
It is essential to note that the localisation process is iterative, and this represents just Phase 1 of many more to come. Future phases will continue to refine and enhance the user experience, addressing new challenges and incorporating user feedback to ensure a seamless and culturally relevant interface for all users.
Understanding the Landscape
The objective of this project was to identify the present challenges and issues users encounter in relation to accessibility, ensuring that both technical compliance and usability are addressed to create an inclusive user experience.
With a user base spanning across various devices, including web, mobile, and CTV clients, the need for an inclusive design approach was essential.
With a user base spanning across various devices, including web, mobile, and CTV clients, the need for an inclusive design approach was essential.
Identifying Accessibility issues:
Initially, the task was to conduct a thorough audit of Viki's web, mobile, and CTV clients to pinpoint accessibility issues. This comprehensive process was essential in understanding the current state of accessibility across the platform.
1. Audit process:
To begin, I systematically reviewed the user interfaces, interactions, and workflows on each platform. I adopted a user-centred approach, considering how individuals with various impairments might navigate and interact with the content. This involved walking through the entire user journey, from signing up and browsing content to watching videos and engaging with community features.
1. Audit process:
To begin, I systematically reviewed the user interfaces, interactions, and workflows on each platform. I adopted a user-centred approach, considering how individuals with various impairments might navigate and interact with the content. This involved walking through the entire user journey, from signing up and browsing content to watching videos and engaging with community features.
Image Source: Inclusive design patterns by Heydon Pickering
2. Utilizing Accessibility Tools:
We leveraged several accessibility tools. Screen reader from Chrome, allowed me to experience the platform as visually impaired users would. This helped in identifying elements that were not properly labeled as they got skipped or were inaccessible via keyboard navigation. Colour contrast checkers, like the WebAIM Contrast Checker and the Figma Contrast plugins, were instrumental in assessing the readability of text against backgrounds both on production and the design system.
We leveraged several accessibility tools. Screen reader from Chrome, allowed me to experience the platform as visually impaired users would. This helped in identifying elements that were not properly labeled as they got skipped or were inaccessible via keyboard navigation. Colour contrast checkers, like the WebAIM Contrast Checker and the Figma Contrast plugins, were instrumental in assessing the readability of text against backgrounds both on production and the design system.
Key Findings
Below are some of the findings from our audit, providing a glimpse into our comprehensive analysis.
1. Missing alt text
This omission meant that screen readers could not describe these images to visually impaired users, leading to a significant gap in the user experience.
This omission meant that screen readers could not describe these images to visually impaired users, leading to a significant gap in the user experience.
2. Poorly labeled links
Hyperlinks labeled with generic terms hinder the navigation experience for users relying on screen readers, as they can't discern the link's function without additional context.
Hyperlinks labeled with generic terms hinder the navigation experience for users relying on screen readers, as they can't discern the link's function without additional context.
3. Inconsistent Keyboard Navigation
Certain elements on the platform were not accessible via keyboard navigation, posing challenges for users who rely on keyboards instead of mice. (Notice how in this Gif, the search icon is skipped?)
Certain elements on the platform were not accessible via keyboard navigation, posing challenges for users who rely on keyboards instead of mice. (Notice how in this Gif, the search icon is skipped?)
Four areas of Accessibility
Four principles of Accessibility defined by WCAG 2.0 guidelines (click to enlarge)
By adhering to the POUR principles throughout the project, we addressed specific accessibility issues and encouraged a start of inclusivity into Viki's design ethos.
1. Perceivable: Ensuring text had sufficient contrast against backgrounds, using descriptive alternative text for images, and providing options for adjusting text size and spacing to accommodate different visual needs.
2. Operable: All interactive elements to be accessible via keyboard navigation, optimised for touch interfaces on mobile devices, and designed with considerations for users who might have limited mobility.
3. Understandable: Focused on proposing consistent layouts and labelling, avoiding jargon or complex language, and providing clear instructions and feedback throughout the user journey.
4. Robust: To future-proof our accessibility efforts, engineers were guided to adhere to robust coding practices and standards. This included using semantic HTML for content structure, ensuring compatibility with assistive technologies like screen readers and voice commands, and regularly testing across different devices and browsers to maintain compatibility.
1. Perceivable: Ensuring text had sufficient contrast against backgrounds, using descriptive alternative text for images, and providing options for adjusting text size and spacing to accommodate different visual needs.
2. Operable: All interactive elements to be accessible via keyboard navigation, optimised for touch interfaces on mobile devices, and designed with considerations for users who might have limited mobility.
3. Understandable: Focused on proposing consistent layouts and labelling, avoiding jargon or complex language, and providing clear instructions and feedback throughout the user journey.
4. Robust: To future-proof our accessibility efforts, engineers were guided to adhere to robust coding practices and standards. This included using semantic HTML for content structure, ensuring compatibility with assistive technologies like screen readers and voice commands, and regularly testing across different devices and browsers to maintain compatibility.
Collaboration and Reporting
After identifying these accessibility issues, I created detailed reports for each platform with the team's feedback. These reports were used to discuss improvements with other UX designers, UX writers, developers, and product managers aiming to integrate better accessibility features into future designs and updates, ensuring a more inclusive user experience for all K-Drama enthusiasts at Viki.
Project Timeline through Gantt Chart (Click to enlarge)
Background
Haw Par Villa's story begins with an appreciation for cultural significance and Chinese folklore. Having explored various parts of India and observed the rich tapestry of cultural contrasts, I understood the power of storytelling in connecting people with heritage. This perspective shaped our approach to the project, recognising that Haw Par Villa isn't just a park—it's a treasure trove of Chinese mythology and Asian culture waiting to be explored. Our goal wasn't just to create a mobile app; it was to craft a digital journey that would resonate with visitors, making their experience not just informative but deeply engaging and memorable.
Approach
The user researchers in the team conducted an interview with some Haw Par Villa visitors. We then broke it down into themes of motivations, needs and frustrations of people while visiting the park. The next step was to compare the theme park with some of it's competitors in the industry.
Here are the key insights from our discover stage that we defined into the following:
Here are the key insights from our discover stage that we defined into the following:
Current User Flow
We prioritised ease of use and accessibility,
ensuring that users could effortlessly explore
the park’s narratives. This was also an
opportunity for me to take note of the
reactions from people around the park and
notice certain elements that could be improved
through our pitch for a mobile app.
(click to enlarge user flow)
ensuring that users could effortlessly explore
the park’s narratives. This was also an
opportunity for me to take note of the
reactions from people around the park and
notice certain elements that could be improved
through our pitch for a mobile app.
(click to enlarge user flow)
Problem Statement
User needs a more interactive experience when visiting Haw Par Villa because they find the exhibits dull and not engaging.
Solution Statement
We believe that a companion mobile application with audio/visual features and an interactive map can provide Haw Par Villa guests with a more interactive experience.
Next Steps:
The research team built a user persona - Jennifer Choi who is the embodiment of Haw Par Villa's user - an art soul/museum enthusiast, driven by knowledge and cultural insights.
Her journey was plotted on an as-is journey map, taking in her POV, i.e, what were the high and low points she experienced while planning her trip and visiting Haw Par Villa. Through this process, I was able to identify the key solutions as opportunities that we could pitch to Haw Par Villa, for the development stage of our product.
Her journey was plotted on an as-is journey map, taking in her POV, i.e, what were the high and low points she experienced while planning her trip and visiting Haw Par Villa. Through this process, I was able to identify the key solutions as opportunities that we could pitch to Haw Par Villa, for the development stage of our product.
Sketching & Wireframing
In order to prioritise content and functionalities, I sketched out some screens to better understand the flow of the app and further plan paths between pages while maintaining consistency for information on the user interface.
Key Features:
1. Interactive audio/visual content: Engaging storytelling through audio guides and augmented reality features, making diorama narratives accessible and captivating.
2. User-centric navigation: An interactive map, allowing users to navigate the park with ease and get more information about the theme park facilities without physically having to travel to the point.
3. Combining learning with earning points: Introduced a quiz feature to boost learning, while boosting Haw Par Villa's revenue. Visitors earn points by answering questions correctly, about what they learned at the park, earn and redeem points at the Visitor Centre to purchase discounted merchandise or tickets for the Hell's museum.
Key Features:
1. Interactive audio/visual content: Engaging storytelling through audio guides and augmented reality features, making diorama narratives accessible and captivating.
2. User-centric navigation: An interactive map, allowing users to navigate the park with ease and get more information about the theme park facilities without physically having to travel to the point.
3. Combining learning with earning points: Introduced a quiz feature to boost learning, while boosting Haw Par Villa's revenue. Visitors earn points by answering questions correctly, about what they learned at the park, earn and redeem points at the Visitor Centre to purchase discounted merchandise or tickets for the Hell's museum.
Design System
As the UI Lead for our team, I recognised the importance of creating an organised library of design assets for Haw Par Villa, from their fun and quirky illustrations to the technicalities of typeface, colours and spacing required. A design system allows for consistent user experiences, minimising the gap between design and development.
Outcome and Impact
- Enhanced Visitor Engagement: The app enriched the visitor experience at Haw Par Villa, making cultural narratives more engaging and accessible.
- User Satisfaction: Positive feedback from usability tests indicated high user satisfaction with the app’s intuitive design and immersive features.
- Consistent User Experience: The cohesive design system ensured that all elements of the app were visually and functionally consistent, contributing to a seamless and enjoyable user experience.
Final Prototype
Reflection
As I review this project almost two years later, there are several things I would do differently with the benefit of a little more hindsight and experience:
1. Iterative Design: Implement a more iterative design process with a round of user testing earlier in the wireframe stage and then refining based on prioritisation, ensuring that the app evolves continuously based on user interactions and feedback.
2. Advanced Personalisation: Considering the app did consider accessibility through the interactive app and audio guides for the dioramas, a step further can be advanced personalisation features to tailor content and recommendations to individual visitor preferences, enhancing the overall user experience (example: Upcoming events at Hell's museum).
3. Scalability and Maintenance: Focus more on the scalability and maintainability of the design system, ensuring that it can easily accommodate future updates and expansions.
1. Iterative Design: Implement a more iterative design process with a round of user testing earlier in the wireframe stage and then refining based on prioritisation, ensuring that the app evolves continuously based on user interactions and feedback.
2. Advanced Personalisation: Considering the app did consider accessibility through the interactive app and audio guides for the dioramas, a step further can be advanced personalisation features to tailor content and recommendations to individual visitor preferences, enhancing the overall user experience (example: Upcoming events at Hell's museum).
3. Scalability and Maintenance: Focus more on the scalability and maintainability of the design system, ensuring that it can easily accommodate future updates and expansions.
User Research
The user group was segmented into four categories:
Primary
- Lawyers who are volunteering at PBSG
- Community Organisations working with the clinic
Secondary
- Individuals seeking legal aid
- General Public learning online
Interviews were conducted at the State Court for individuals in need of legal aid.
Our team took steps to ensure that non-native English speakers would be able to understand the interview questions by providing translations.
Primary
- Lawyers who are volunteering at PBSG
- Community Organisations working with the clinic
Secondary
- Individuals seeking legal aid
- General Public learning online
Interviews were conducted at the State Court for individuals in need of legal aid.
Our team took steps to ensure that non-native English speakers would be able to understand the interview questions by providing translations.
Key Insights
Users of PBSG Academy
Online learning impacts two primary personas across varying
roles in seeking legal education.
roles in seeking legal education.
Our user base encompasses a diverse range of individuals, including junior and senior-level lawyers, community organization directors and HR who coordinate the courses for staff, and the staff members themselves who attend the events and courses. Given the limited resources, we must be flexible in our personas, prioritising the primary and most impactful group, which is comprised of lawyers with varying levels of experience in the field.
Problem Scoping
1. User wants to search and attend career-relevant events of interest so that they can fulfil their CPD points in time for license renewal each year.
2. Users needs a way to explore different opportunities to participate in Pro Bono events relevant to their job scope in order to acquire valuable skillset that will be of assistance to their clients.
3. User needs a way to grow their knowledge periodically by obtaining deeper understanding into topics of interest because some lectures do not provided adequate take away.
DESIGN WORKSHOP
We facilitated a collaborative design workshop where we invited Pro Bono’s team to co-create solutions with us. The focus was on generating a variety of ideas based on the problems identified during research, without immediate concern for feasibility or quality. This approach fostered trust and empathy, ensuring an open environment where creative thinking could thrive. Through quick sketching and iterative feedback, we refined these initial ideas into more actionable solutions. The workshop proved essential in addressing specific challenges and developing innovative concepts to enhance their new training program service.
VISUALISING INTERFACE
The outcomes of our design workshop indicated a preference for gamification in the interface. Given the limited project timeline, my team and I opted to integrate gamification elements into various stages of user interaction to provide feedback and incentivise enrolment and continued learning.
USABILITY TESTING & ITERATIONS
The testing process involved 6 participants and was iterated over 5+ times. The objective was to understand the real-world interaction with the website and make improvements to simplify navigation and ease task completion. Success was measured by tracking the success rate of task completion and the user's assessment of the website's ease of understanding and use.
Course information and purchasing
The process includes familiarising the user with the course or class before they make a commitment to register and pay for it. The original approach was to buy modules individually, but now users have the option to enrol for all modules at once.
Impact: lesser clicks for the user and a purchase prompt provides a revenue incentive for the firm
Impact: lesser clicks for the user and a purchase prompt provides a revenue incentive for the firm
Tab Categorisation
The primary objective of this flow is to determine the user's ability to effectively browse. The focus is to understand the user experience and gather insights on the user's ability to locate the desired information and make informed decisions while using the browse function.
Impact: users won't have to scroll in order to reach different tabs or browse the whole page for a particular section.
Impact: users won't have to scroll in order to reach different tabs or browse the whole page for a particular section.
Dashboard: Certificates
The dashboard is an important tool for lawyers as they can use it to view their certificates, track their CPD points, and make any necessary updates. The goal is to design an intuitive and user-friendly dashboard that allows lawyers to easily access and manage their learning journey with PBSG Academy.
Impact: edit function tying back to onboarding feature of customisation, eliminating previous years' CPD scores and portraying module certificates as an incentive to purchase
Impact: edit function tying back to onboarding feature of customisation, eliminating previous years' CPD scores and portraying module certificates as an incentive to purchase
FINAL PROTOTYPE
FLOW 1
✍🏻 Sign Up & Enrol
FLOW 2
🎯 Personalised Learning
FLOW 3
🥇 Course Flow & Dashboard