Visuai Tech: UI/UX Smart Redesign
Visuai Tech: UI/UX Smart Redesign
Industry
Industry
Industry
Gloshine USA / Visuai Tech
Gloshine USA / Visuai Tech
Gloshine USA / Visuai Tech
Role
Role
Role
User Research & Redesign
User Research & Redesign
User Research & Redesign
Team
Team
Team
2 Designers / Researchers
2 Designers / Researchers
2 Designers / Researchers
Date
Date
Date
February 2025
February 2025
February 2025
Duration
Duration
Duration
2 Months
2 Months
2 Months
Overview
Overview
Our transition from AI Home to Visuai Tech reflects our commitment to enhancing user experience and reinforcing our brand as a leading system integrator specializing in advanced LED display solutions and immersive virtual production studio experiences.
Our transition from AI Home to Visuai Tech reflects our commitment to enhancing user experience and reinforcing our brand as a leading system integrator specializing in advanced LED display solutions and immersive virtual production studio experiences.
The goal is to let users can effortlessly explore our premium products and services, connect with us, and access key information through a more intuitive and professional interface.
The goal is to let users can effortlessly explore our premium products and services, connect with us, and access key information through a more intuitive and professional interface.
Problem Statement
Problem Statement
1. Incomplete and Unstructured Design
1. Incomplete and Unstructured Design
– The old website was unfinished, with missing content and disorganized elements, leaving users without the useful information they needed.
2. Poor UI/UX Layout
2. Poor UI/UX Layout
– Misaligned buttons, overlapping text and dividers, and oversized images disrupted the flow of information and confused users.
3. Lack of Mobile Optimization
3. Lack of Mobile Optimization
– The previous design did not differentiate between desktop and mobile experiences, resulting in inconsistent interactions.
Our Design Process
Our Design Process
Application / Competitors Research
Application / Competitors Research
Solo Tech
Solo Tech
ROE Visual
ROE Visual
DVS LED
DVS LED
Vu One
Vu One
Solo Tech
Solo Tech
Solo Tech had a well-organized drop-down menu, which we adopted to enhance our own navigation structure.
Solo Tech had a well-organized drop-down menu, which we adopted to enhance our own navigation structure.
ROE Visual
ROE Visual
ROE Visual's case study section was well-structured and effectively organized, making it easy for users to browse and find relevant information.
ROE Visual's case study section was well-structured and effectively organized, making it easy for users to browse and find relevant information.
DVS LED
DVS LED
DVS LED had a clear and user-friendly request form that streamlined the inquiry process. We implemented a similarly structured form to make it easier for users to submit their project requirements efficiently.
DVS LED had a clear and user-friendly request form that streamlined the inquiry process. We implemented a similarly structured form to make it easier for users to submit their project requirements efficiently.
DVS LED had a clear and user-friendly request form that streamlined the inquiry process. We implemented a similarly structured form to make it easier for users to submit their project requirements efficiently.
Vu One
Vu One
Vu One’s features section was clearly structured, providing a concise yet informative breakdown of its offerings. We applied a similar design to improve the clarity and accessibility of our product information.
Vu One’s features section was clearly structured, providing a concise yet informative breakdown of its offerings. We applied a similar design to improve the clarity and accessibility of our product information.
Vu One’s features section was clearly structured, providing a concise yet informative breakdown of its offerings. We applied a similar design to improve the clarity and accessibility of our product information.
User Pain Point
User Pain Point
Problem Statistics
Problem Statistics
Hard to Locate Information
Hard to Locate Information
Incomplete Products Information
Incomplete Products Information
Unclear Prices
Unclear Prices
Research Methodology
Research Methodology
Data Collection Strategies
Data Collection Strategies
Method 1: User Surveys & Feedback Forms
Method 1: User Surveys & Feedback Forms
Collecting direct user input through surveys and feedback forms to understand pain points and improve usability.
Collecting direct user input through surveys and feedback forms to understand pain points and improve usability.
Method 2: Usability Testing & Heatmaps
Method 2: Usability Testing & Heatmaps
Observing real-time user interactions using heatmaps, session recordings, and usability tests to analyze navigation behavior.
Observing real-time user interactions using heatmaps, session recordings, and usability tests to analyze navigation behavior.
Method 3: Analytics & A/B Testing
Method 3: Analytics & A/B Testing
Using Google Analytics, conversion tracking, and A/B testing to evaluate website performance and optimize UI elements.
Using Google Analytics, conversion tracking, and A/B testing to evaluate website performance and optimize UI elements.
User Persona
User Persona
Name: Gabriel Sebastián Reyes Age: 51
Current Job: President & CEO at iDigital
Name: Gabriel Sebastián Reyes Age: 51
Current Job: President & CEO at iDigital
Goals & Needs
1. Find trustworthy partners for purchases and collaborations.
2. Seek high-quality, innovative solutions for production.
3. Work with companies that offer Spanish-language support.
Goals & Needs
1. Find trustworthy partners for purchases and collaborations.
2. Seek high-quality, innovative solutions for production.
3. Work with companies that offer Spanish-language support.
Challenges & Pain Points
Hard to find reliable, innovative companies.
Challenges & Pain Points
Hard to find reliable, innovative companies.
Name: Erik Kjonaas Age: 35
Current Job: Lighting and Grip Operations Manager at UCLA School of Theater, Film & Television
Accessibility Need: Protanopia (Red-Green Color Blindness)
Name: Erik Kjonaas Age: 35
Current Job: Lighting and Grip Operations Manager at UCLA School of Theater, Film & Television
Accessibility Need: Protanopia (Red-Green Color Blindness)
Name: Erik Kjonaas Age: 35
Current Job: Lighting and Grip Operations Manager at UCLA School of Theater, Film & Television
Accessibility Need: Protanopia (Red-Green Color Blindness)
Goals & Needs
1. Find a reliable film, event, and education partner.
2. Work with an inclusive company that values accessibility.
3. Ensure high-quality visuals and lighting solutions.
Goals & Needs
1. Find a reliable film, event, and education partner.
2. Work with an inclusive company that values accessibility.
3. Ensure high-quality visuals and lighting solutions.
Challenges & Pain Points
1. Hard to find color-accessible and industry-aware companies.
2. Needs customizable and budget-flexible solutions.
Challenges & Pain Points
1. Hard to find color-accessible and industry-aware companies.
2. Needs customizable and budget-flexible solutions.
Name: Amy Gile Age: 43
Current Job: CEO & Co-Founder at Silverdraft
Name: Amy Gile Age: 43
Current Job: CEO & Co-Founder at Silverdraft
Goals & Needs
1. Ensure high-quality visuals for performances.
2. Get expert guidance on the best options for her needs.
Goals & Needs
1. Ensure high-quality visuals for performances.
2. Get expert guidance on the best options for her needs.
Challenges & Pain Points
1. Limited budget for purchasing screens.
2. Unsure which type of screen is best for a dance studio.
Challenges & Pain Points
1. Limited budget for purchasing screens.
2. Unsure which type of screen is best for a dance studio.
Low Definition First Draft
Low Definition First Draft
A/B Testing: Solution Product Page Optimization
A/B Testing: Solution Product Page Optimization
A - Fully Expanded Information (Default Open)
A - Fully Expanded Information (Default Open)
All details visible at once
All details visible at once
Too long, discourages scrolling
Too long, discourages scrolling
Overwhelming for users
Overwhelming for users
B - Collapsible Sections (Dropdown for More Info)
B - Collapsible Sections (Dropdown for More Info)
Compact, scannable layout
Compact, scannable layout
Encourages interaction
Encourages interaction
Keeps users engaged without overwhelming them
Keeps users engaged without overwhelming them
Results & Data Insights:
Results & Data Insights:
Objective: Improve user engagement and conversion rates by optimizing information display on the product page.
Objective: Improve user engagement and conversion rates by optimizing information display on the product page.
User Engagement:
A: Higher bounce rate due to long content
B: 30% more interactions with product details
B: 15% higher conversion rate
User Engagement:
A: Higher bounce rate due to long content
B: 30% more interactions with product details
B: 15% higher conversion rate
Heatmap & Click Tracking:
A: Users dropped off after scrolling halfway.
B: More interactions on “Show More” dropdowns.
Heatmap & Click Tracking:
A: Users dropped off after scrolling halfway.
B: More interactions on “Show More” dropdowns.
Heatmap & Click Tracking:
A: Users dropped off after scrolling halfway.
B: More interactions on “Show More” dropdowns.
Conclusion: Version B performs better, leading to increased engagement and conversions.
Conclusion: Version B performs better, leading to increased engagement and conversions.
Color & Typography
Color & Typography
Elements
Elements
Color Combinations
Color Combinations
Our Goal
Our Goal
1. Consistent Branding & Design
1. Consistent Branding & Design
– We unified colors, typography, and layouts for a professional and polished look.
– We unified colors, typography, and layouts for a professional and polished look.
2. Enhanced Navigation & Content
2. Enhanced Navigation & Content
– We restructured information hierarchy and added new sections like News & Events, About Us, and Contact Visuai for quotes and support.
– We restructured information hierarchy and added new sections like News & Events, About Us, and Contact Visuai for quotes and support.
3. Refined E-Commerce Features
3. Refined E-Commerce Features
– Improved cart management and introduced a Quick View feature for streamlined product exploration.
– Improved cart management and introduced a Quick View feature for streamlined product exploration.
4. Fully Responsive Design
4. Fully Responsive Design
– Our new website delivers a seamless experience across both desktop and mobile devices.
– Our new website delivers a seamless experience across both desktop and mobile devices.
Old User Experience
Old User Experience
Home Screen
Home Screen
Product Page
Product Page
Shopping Page
Shopping Page
New User Experience
New User Experience
Home Screen
Product Page
Shopping Page
Home Screen
Product Page
Shopping Page
Dealing with constraints
Dealing with constraints
Limitations & Risks
Limitations & Risks
Budget Constraints: Limited resources restricted design choices and testing.
Budget Constraints: Limited resources restricted design choices and testing.
Technical Limitations: Platform restrictions and system compatibility issues.
Technical Limitations: Platform restrictions and system compatibility issues.
Time Constraints: Tight deadlines required rapid iterations and decision-making.
Time Constraints: Tight deadlines required rapid iterations and decision-making.
Stakeholder Alignment: Balancing diverse needs and expectations.
Stakeholder Alignment: Balancing diverse needs and expectations.
User Accessibility: Ensuring an inclusive design for all users.
User Accessibility: Ensuring an inclusive design for all users.
How We Addressed Them
How We Addressed Them
Prioritization: Focused on high-impact features within budget and time limits.
Prioritization: Focused on high-impact features within budget and time limits.
Iterative Testing: Conducted quick usability tests to refine design efficiently.
Iterative Testing: Conducted quick usability tests to refine design efficiently.
Collaboration: Maintained open communication with stakeholders for alignment.
Collaboration: Maintained open communication with stakeholders for alignment.
Tech Adaptability: Found alternative solutions to overcome platform constraints.
Tech Adaptability: Found alternative solutions to overcome platform constraints.
Accessibility First: Designed with inclusivity in mind from the start.
Accessibility First: Designed with inclusivity in mind from the start.
Here are the features we enhanced in the new version!
Here are the features we enhanced in the new version!
Outcomes
Outcomes
Old UI
Old UI
New UI
New UI
Navigations
Navigations
Home Page Functions
Home Page Functions
Solutions & Shopping Main Features
Solutions & Shopping Main Features
Old UI
Old UI
1. Optimized user experience with a more visually appealing interface.
1. Optimized user experience with a more visually appealing interface.
2. Added filter & sort by functions so customers can easily find the products they need.
2. Added filter & sort by functions so customers can easily find the products they need.
3. Enhanced product pages with options for different sizes and services.
3. Enhanced product pages with options for different sizes and services.
4. Enabled users to view detailed product information and add compatible accessories.
4. Enabled users to view detailed product information and add compatible accessories.
New UI
New UI
Case Studies Main Features
Case Studies Main Features
Old UI
Old UI
1. Added event-based image filtering, enabling customers are able to effortlessly select case images relevant to their field.
1. Added event-based image filtering, enabling customers are able to effortlessly select case images relevant to their field.
2. Introduced pagination to prevent slow loading from excessive images on a single page.
2. Introduced pagination to prevent slow loading from excessive images on a single page.
New UI
New UI
About Us Main Features
About Us Main Features
Old UI
Old UI
1. Increased the image-to-text ratio for a more visually engaging and readable page.
1. Increased the image-to-text ratio for a more visually engaging and readable page.
2. Added employee email addresses, making it easier for customers to connect with our team.
2. Added employee email addresses, making it easier for customers to connect with our team.
New UI
New UI
Contact / Request A Quote Form
Contact / Request A Quote Form
Old UI
Old UI
1. Separated "Contact Us" & "Request A Quote" to enhance professionalism and enable efficient departmental handling and record-keeping, saving time for employers.
1. Separated "Contact Us" & "Request A Quote" to enhance professionalism and enable efficient departmental handling and record-keeping, saving time for employers.
2. Enhanced the quote request with more detailed questions, allowing users to clearly express their needs and enabling our sales team to provide tailored quotations and product recommendations.
2. Enhanced the quote request with more detailed questions, allowing users to clearly express their needs and enabling our sales team to provide tailored quotations and product recommendations.
New UI
New UI
Other Newly Added Pages
Other Newly Added Pages
Live Events
Live Events
Stage clients seek proven case studies and outdoor suitability details (waterproofing, weight, etc.)
Stage clients seek proven case studies and outdoor suitability details (waterproofing, weight, etc.)
Virtural Production
Virtural Production
Virtual production clients prioritize studio partnerships, tech specs, and performance metrics (color, refresh rate, etc.)
Virtual production clients prioritize studio partnerships, tech specs, and performance metrics (color, refresh rate, etc.)
Technical Support
Technical Support
Added a support page with keyword search and tutorial videos.
Added a support page with keyword search and tutorial videos.
Sign Up & Log In
Sign Up & Log In
User login saves shopping cart data and membership points.
User login saves shopping cart data and membership points.
Conclusion For All
Conclusion For All
Our UX/UI redesign has significantly improved user experience, engagement, and conversion rates. By addressing key pain points, we created a more intuitive and seamless interface.
Metrics & Data-Driven Results
Engagement Boost: +60% increase in time spent on key pages
Bounce Rate Reduction: Dropped by 50% due to improved navigation
Faster Load Time: Optimized performance reduced page load by 40%
Mobile Experience: 50% improvement in usability based on user testing
Key Takeaways
1. User-Friendly Interface: Better readability, navigation, and engagement
2. Data-Driven Success: Improved KPIs prove the effectiveness of the redesign
3. Enhanced Brand Perception: Modern, professional look increases trust
Product Performance Overview
Product Performance Overview
Mobile Website Screens
Mobile Website Screens
