Vosynverse Web User Interface

My Role: UI/UX Designer & Researcher

Timeline: December 2023 - May 2024

Tools: Figma - FigJam - Photoshop - InDesign - Miro - Front-End Development

Project Overview

The VosynVerse Platform Redesign project was an ambitious initiative aimed at transforming the entire user experience of our content display website. This comprehensive redesign covered not only the onboarding process but also the exploration, interaction, and customization features across the site, including search functionalities, global content discovery, profile management, and settings adjustments. M goal was to create an intuitive, engaging, and user-friendly platform that caters to the diverse needs and preferences of our audience.

The Objective

Objective: The primary objective was to enhance every aspect of the user journey on the VosynVerse platform. By addressing feedback and pain points from our competitive analysis and user testing, we aimed to provide a seamless experience from the moment a new user arrives on the platform through to their daily interactions with our content and community.

Key Objectives:

Comprehensive Onboarding Experience:
- Beyond Welcome Messages and Introductions: We enriched the onboarding process with interactive tutorials, customization options, and direct engagement through our AI companion, Airis, ensuring users are well-acquainted with our platform's unique features and interfaces.
Advanced Search and Discovery:
- Innovative Search Mechanisms: Integrating search functionalities with an interactive globe allows users to explore content in a visually engaging manner, connecting video content with geographic locations and cultural contexts.
- Globe and Search Synchronization: The dynamic interaction between the search bar and the globe offers users a novel way to discover content, highlighting the global availability of videos or pinpointing the origins of specific content.
Personalized Profile and Content Customization:
- Beyond Basic Setup: Enhancing the profile setup to include deeper personalization and content preferences, allowing for a more tailored experience with My Highlights and My Playlist features, enabling users to curate and revisit their favorite moments.
Interactive Globe Features:
- Dynamic Content Discovery: The globe serves as a central feature for content exploration, showcasing trending videos by region, viral content highlights, and allowing for an immersive experience in selecting and viewing content from across the globe.
User-Driven Customization and Settings:
- Enhanced Control Over Experience: Users have the ability to modify their experience extensively, from theme and layout preferences to notification settings, ensuring that the platform feels personal and responsive to individual needs.
Engagement and Interaction:
- Creating Playlists and Sharing Content: Facilitating user interaction with the ability to create, share, and manage playlists, alongside options for sharing content with others, fosters a sense of community and personal investment in the platform.
AI Companion - Airis:
- A Personal Guide: Airis acts not just as a guide through the platform's features but also as a personalized companion, offering recommendations, assistance, and a touch of personality to enhance user engagement and satisfaction.

The User Research

In the initial phase of our research, we focused on identifying and understanding the needs of our target users, along with exploring potential gaps in the current market. This involved an in-depth analysis of existing offerings and user feedback to pinpoint unmet needs and areas for innovation. The findings from this study were crucial in shaping our approach to developing user personas, ensuring that they accurately reflect the characteristics and requirements of our primary audience. This groundwork helps us in tailoring our solutions to effectively address the identified market gaps.

Personas

Mia

cute-young-woman-with-african-hairstyle-sending-air-kiss-posing-with-lovely-face-expressio

Age: 25 years old

Occupation: International Trade Analyst at a multinational corporation

Background: Mia graduated with a degree in International Relations and is passionate about expanding her language skills to enhance her career and personal growth. Fluent in English and French, she's been learning Spanish for the past year through online courses and language exchange meetups. Mia is an avid traveler and uses language learning to connect more deeply with the cultures she explores.
Goals: Mia seeks a platform that offers immersive language learning experiences through videos, podcasts, and interactive content. She values user-friendly navigation that makes finding language-specific content easy and effective.
Challenges: Difficulty in finding quality Spanish content tailored to her intermediate level and specific interests in international trade and culture.
Recruitment Channel: Language learning apps, and social media communities focused on bilingualism

Age: 35 years old

Occupation: Senior Software Engineer at a leading tech company specializing in cloud computing solutions

Background: Ethan holds a master's degree in Computer Science and has a decade of experience working on complex software projects. He is highly skilled in programming languages such as Python and JavaScript and has a keen interest in emerging technologies like AI and blockchain. Ethan enjoys attending tech meetups, participating in hackathons, and contributing to open-source projects in his free time.
Goals: To evaluate the technical sophistication of VosynVerse, focusing on its use of cutting-edge technologies, the robustness of its architecture, and the security measures protecting user data.
Challenges: Finding a platform that challenges his technical expertise while offering opportunities to engage with innovative content creation and management tools.
Recruitment Channel: Tech industry conferences, LinkedIn tech groups, developer forums such as Stack Overflow

Ethan

Age: 30 years old

Occupation: Freelance Accessibility Consultant, specializing in web accessibility audits and training for digital content creators

Background: Jordan has a bachelor's degree in Web Development with a certification in Web Accessibility. Due to a congenital mobility impairment, Jordan relies on voice recognition software and a specialized keyboard for computer interaction. This personal experience fuels their passion for accessibility advocacy, driving them to work with companies to improve digital inclusiveness. Jordan regularly blogs about accessibility best practices and reviews assistive technologies.
Goals: To rigorously test the accessibility of VosynVerse, ensuring it adheres to WCAG standards and provides an inclusive user experience for people with a wide range of disabilities.
Challenges: Encountering digital platforms that overlook accessibility in their design, making it difficult for users with disabilities to access content and features effectively.
Recruitment Channel: LinkedIn groups dedicated to web accessibility, social media platforms where they advocate for digital inclusion, and accessibility-focused conferences and workshops

Jordan

joyful-fashionable-woman-with-piercing-beautiful-earrings-white-top-laughs.jpg

User Journey Maps

User journey maps then were developed for different sections and key functionalities of the system. I designed them to provide a seamless, intuitive, and personalized experience from the moment users engage with the platform. From initial sign-up to ongoing customization, the journey was structured to optimize user satisfaction and engagement through a series of thoughtfully crafted interactions.

Sign Up/Sign In: Begins with an efficient account creation process, immediately followed by a guided tour introducing users to the main features of the platform. Users are also prompted to set initial preferences such as themes or content interests, ensuring a personalized start.
Home Page Interaction: Focuses on the first engagement with the home page, highlighting easy navigation and immediate access to key functionalities to facilitate user interaction.
Profile: Users can access a comprehensive dashboard within their profile, showcasing important metrics like daily hours, user interactions, and revenue, alongside options to customize their personal details and settings.
Settings and Configuration: Provides extensive control options including language and theme selection, subscription management, and adjustments to notifications, privacy, and other preferences, further enhancing the personalized user experience.

These user journey maps ensure that every user touchpoint is streamlined and enriched, from the initial interaction to the detailed management of personal and preference settings, fostering a welcoming and engaging platform environment.

Onboarding user flow

The Design

Wireframes

Based on the results of user research and instruction given to me by the software team the initial wireframes were designed to fit a simple but innovative onboarding process allowing users to understand the system's capabilities without getting overwhelmed. Additionally, wireframes for the home page and key functionalities of the system were also developed. I included a section of the wireframe showing the initial sign-up process below.

Design Guidelines

In the Design Guidelines for this project, key standards and best practices were outlined to ensure a cohesive and accessible user experience. Visual elements, typography, and interaction patterns were covered, serving as a foundation for consistent design implementation. This approach was aimed at enhancing user satisfaction and project success through well-defined design decisions.

Final Pages

A sample of the final design pages is included below.

Interactive Prototpes

During the creation of the high-fidelity designs and prototypes phase of this project, I focused intently on refining the user experience to ensure that every visual and interactive element was designed with the user's needs at the forefront. Transitioning from wireframes to high-fidelity mockups, my objective was to embed the principles of good UX design—usability, accessibility, and efficiency—into every aspect of the interface. Leveraging user feedback gathered during the prototyping stage, I made iterative enhancements, concentrating on streamlining navigation, optimizing the information architecture, and ensuring that interactive components were intuitive and responsive. Additionally, the highlighted points gathered throughout the intial phase of user research were taken into account to ensure an innovative and accessible design. The final prototypes can be found below. I have included a sample containg the initial sign-up process here and other sections are accessible though the following Figma links. Due to the ongoing design and the the final product yet being released to the public, I was asked to not sure the prototypes directly, and thus the whole prototypes are only accessible through the following links:

Sign-up

Log-in and password reset

Home page

Profile

Setting

Additional Sections

As Vosynverse can be used in many different areas, a lot of different functionalities are envisioned to be added to the final product. Some of the ones who are yet to be completed or added to the demos but could be part of the essential functionalities of the Vosynverse in the future are the ability to connect with other streaming services and learning platforms such as Netflix, Amazon Prime or Coursera and auto-translate the content directly from them and the addition of a section for audiobooks which again can ideally translate the original book into any languages of the users choosing in real-time. The initial design for these sections are also included below:

Connection to streaming services

Netflix prototype

Coursera prototype

Audiobooks

Audiobook prototype

The Usability Testing

Usability Testing Goals

Currently, we are at the first stages of usability testing, the aim is to evaluate the core functionalities of the system in regard to the target audience and market perception and communicate the result to the software and product team so that the system can be in a stronger position and ensure its user-friendliness from these early steps. The following goals were identified as particularly valuable for the usability testing:

Evaluate navigation and find information on the site
Evaluate System Effectiveness and User Experience
Assess User Interface (UI) Design and Consistency
Task Success and Efficiency
Identify Pain Points and Usability Issues
Evaluate Content Accessibility
Test Compatibility Across Devices and Browsers
Identify Technical Bugs and Security Vulnerabilities

User Demographic

The following user groups were identified as particularly important:

1- Technical Testers:

Individuals with a strong technical background that can help identify bugs, performance issues, and security vulnerabilities.
Responsibility: stress-testing the platform under various conditions and providing detailed technical feedback
Age Range: Adults 21 - 65 (mix of younger and older in age range)
Gender: No specific gender
Education Level: High level of education, including but not limited to bachelor's or master's degrees in computer science, engineering, or related fields.
Occupation: Software developers, engineers, quality assurance testers, IT professionals.
Experience Level: Advanced technical skills, including proficiency in programming languages, software testing methodologies, and system architecture.
Computer Literacy: Highly proficient in using computer systems, software development tools, and command-line interfaces.
Technical Background: Experience in identifying and troubleshooting software bugs, performance issues, and security vulnerabilities.
Communication Skills: Clear communication skills to articulate technical feedback and issues encountered during testing.
Modifications should be made for users that have accessibility needs.

2- Functional Testers

Individuals focused on the usability and functionality of the platform. This group must cover a wide range of users, representing different user demographics
Responsibility: Evaluate user interface, content accessibility, navigation, and user experience
Age Range: 12-65
Gender: No specific gender
Education Level: Varied educational backgrounds.
Occupation: 20% should be non-specific users - 80% should be user experience designers, usability analysts, quality assurance testers, product managers, or individuals involved in assessing the usability and functionality of software products.
Experience Level: Proficiency in evaluating user interfaces, navigation flows, and overall user experience.
Computer Literacy: Moderate to high proficiency in using computer systems and software applications.
Communication Skills: Effective communication skills to provide detailed feedback on usability issues, interface design, and overall user experience.
Modifications should be made for users that have accessibility needs.
Attention to Detail: Strong attention to detail to identify usability issues, inconsistencies, and areas for improvement.

3- Accessibility Testers:

Individuals with knowledge of accessibility standards such as WCAG (Web Content Accessibility Guidelines) and/or individuals with a wide range of disabilities
Responsibilities: test for compliance with WCAG, edge cases with accessibility functions, and feedback on user experience with emphasis on accessibility.
Age Range: Ages 12-65
Gender: No specific gender
Education Level: Varied educational backgrounds, including but not limited to bachelor's or master's degrees in fields related to web development, accessibility, user experience (UX), or relevant domains.
Occupation: 20% can be users that have accessibility needs - 80% should be accessibility specialists, web developers with a focus on accessibility, user experience designers, and individuals involved in ensuring digital content is accessible to all users.
Experience Level: Expertise in accessibility standards, particularly WCAG (Web Content Accessibility Guidelines), and experience in assessing and improving the accessibility of digital content.
Computer Literacy: Moderate to high proficiency in using computer systems, web browsers, and assistive technologies commonly used by individuals with disabilities.
Accessibility Knowledge: Deep understanding of accessibility principles, including but not limited to screen reader compatibility, keyboard navigation, color contrast, and alternative text for images.
Disability Representation: Individuals with a wide range of disabilities, including but not limited to visual impairments, hearing impairments, motor impairments, cognitive impairments, and neurodiversity.
Communication Skills: Effective communication skills to provide detailed feedback on accessibility issues, identify potential barriers for users with disabilities, and suggest solutions for improvement.
Modifications should be made for users that have accessibility needs.
Empathy and Sensitivity: Demonstrated empathy and sensitivity towards the needs and challenges faced by individuals with disabilities.

4- International Users:

Individuals across different regions with different cultural and linguistic backgrounds
Responsibilities: ensure the platform is adaptable and relevant across different regions
Age Range: 18-65
Gender: No specific gender
Education Level: Varied educational backgrounds, ranging from basic education to advanced degrees.
Occupation: Diverse occupations reflect the global user base, including but not limited to professionals, students, homemakers, and retirees.
Experience Level: Varied levels of experience with digital platforms, are influenced by factors such as access to technology, internet connectivity, and digital literacy.
Cultural Background: Representing diverse cultural backgrounds from different regions across the globe, including variations in customs, traditions, values, and social norms.
Linguistic Background: Fluent or proficient in different languages, including but not limited to English, Spanish, French, Chinese, Arabic, etc.
Geographic Location: Global reach, spanning various continents, countries, and regions. Representation from diverse geographic locations ensures a broad perspective on cultural and regional differences.
Responsibilities: Evaluate the platform's adaptability and relevance across different regions, considering factors such as language support, cultural sensitivity, localization of content, and usability in diverse contexts.
Communication Skills: Effective communication skills to provide feedback on cultural appropriateness, language clarity, and usability from an international perspective.
Modifications should be made for users that have accessibility needs.
Technology Access: Access to a range of devices and internet connectivity, including smartphones, tablets, laptops, and desktop computers. Awareness of varying levels of technology infrastructure and connectivity challenges in different regions.

General Usability Testing Task List

VosynVerse_ Ideation and Research-5-2.jpg

Usability Testing sessions

We then conducted the first rounds of usability testing sessions using both internal and external participants. Surveys containing open-ended questions and facilitator and conductor observations on top of the measurement of success or failure of the benchmark tasks were the primary methods of data gathering in this phase. A mixture of quantitative and qualitative analysis methods was used to investigate the results.