Technical Research. Information Artchitecture
Technical Research · UI Design · AI
OJO, AI-Powered Visual Design Copilot
Overview
Features
Research
Iteration
INTRODUCTION
How do we design visuals while knowing how to grabs attention? In an era where capturing visual attention is the key, OJO use machine learning to assists designers in accurately communicating visual information to users of all backgrounds.
TOOLS
Figma
Runway ML
Eye Tracking
FOCUS AREA
Technical Research
UX/UI Design
Information Architecture
TIMELINE
Sep 2022- Dec 2022
Week 1-7: Research & Training AI Model
Week 8-14: Design & Prototype
Context
I started this project based on my findings from my TikTok Internship experience.
In TikTok, our team faced the challenge of designing interfaces for users worldwide, carefully considering cultural differences in each country's UI & Visual design. 🇺🇸 🇰🇷 🇨🇳 🇯🇵 🇮🇳 🇫🇷 🇮🇩
For example, our United State website and Indonesia website looks very different.
My Findings
With this experience, I realize that determining the ideal visuals for users is a challenge that UX research team doesn’t solve.
Technical Research. Information Artchitecture
Technical Research · UI Design · AI
OJO, AI-Powered Visual Design Copilot
Overview
Features
Research
Iteration
INTRODUCTION
How do we design visuals while knowing how to grabs attention? In an era where capturing visual attention is the key, OJO use machine learning to assists designers in accurately communicating visual information to users of all backgrounds.
TOOLS
Figma
Runway ML
Eye Tracking
FOCUS AREA
Technical Research
UX/UI Design
Information Architecture
TIMELINE
Sep 2022- Dec 2022
Week 1-7: Research & Training AI Model
Week 8-14: Design & Prototype
Context
I started this project based on my findings from my TikTok Internship experience.
In TikTok, our team faced the challenge of designing interfaces for users worldwide, carefully considering cultural differences in each country's UI & Visual design. 🇺🇸 🇰🇷 🇨🇳 🇯🇵 🇮🇳 🇫🇷 🇮🇩
For example, our United State website and Indonesia website looks very different.
My Findings
With this experience, I realize that determining the ideal visuals for users is a challenge that UX research team doesn’t solve.
Technical Research. Information Artchitecture
Technical Research · UI Design · AI
OJO, AI-Powered Visual Design Copilot
Overview
Features
Research
Iteration
INTRODUCTION
How do we design visuals while knowing how to grabs attention? In an era where capturing visual attention is the key, OJO use machine learning to assists designers in accurately communicating visual information to users of all backgrounds.
TOOLS
Figma
Runway ML
Eye Tracking
FOCUS AREA
Technical Research
UX/UI Design
Information Architecture
TIMELINE
Sep 2022- Dec 2022
Week 1-7: Research & Training AI Model
Week 8-14: Design & Prototype
Context
I started this project based on my findings from my TikTok Internship experience.
In TikTok, our team faced the challenge of designing interfaces for users worldwide, carefully considering cultural differences in each country's UI & Visual design. 🇺🇸 🇰🇷 🇨🇳 🇯🇵 🇮🇳 🇫🇷 🇮🇩
For example, our United State website and Indonesia website looks very different.
My Findings
With this experience, I realize that determining the ideal visuals for users is a challenge that UX research team doesn’t solve.
Problem Statement
How might we help designers to accurately convey visual information to diverse audiences who may perceive them differently?
How did i get here?
INTRODUCing OJO
OJO is a Visual Design Tool that learns your visual perception. With AI-implemented, OJO inform visual design decisions based on real data, that truly understand different people’s culturally diverse visual preferences, It holds your hands along the way, ensuring that what you want to convey is precisely what your audience sees and feels.
FINAL DESIGN
DESIGN GOAL: ENLIGHTEN
Bridging perception gap between designers and users
USER SCENARIO
Designers don’t see the gap between their own perception and users
SOLUTION
OJO will learn about designer’s visual perception by asking them to draw their ideal heat map for the design
DESIGN GOAL: INCLUSIVE
Instant AI Design Feedback at Your Fingertips
USER SCENARIO
Designers want quick feedbacks from their design
SOLUTION
By right clicking a component, designers will see OJO’s AI-generated feedback.
DESIGN GOAL: ADAPTABLE
Culturally Adapted Design Guidance
USER SCENARIO
Designers don’t have time to learn and adjust design based on users’ cultural background
SOLUTION
During their design process, OJO will be hinting with a small dot on the edit window, copilot users to design.
Problem Statement
How might we help designers to accurately convey visual information to diverse audiences who may perceive them differently?
How did i get here?
INTRODUCing OJO
OJO is a Visual Design Tool that learns your visual perception. With AI-implemented, OJO inform visual design decisions based on real data, that truly understand different people’s culturally diverse visual preferences, It holds your hands along the way, ensuring that what you want to convey is precisely what your audience sees and feels.
FINAL DESIGN
DESIGN GOAL: ENLIGHTEN
Bridging perception gap between designers and users
USER SCENARIO
Designers don’t see the gap between their own perception and users
SOLUTION
OJO will learn about designer’s visual perception by asking them to draw their ideal heat map for the design
DESIGN GOAL: INCLUSIVE
Instant AI Design Feedback at Your Fingertips
USER SCENARIO
Designers want quick feedbacks from their design
SOLUTION
By right clicking a component, designers will see OJO’s AI-generated feedback.
DESIGN GOAL: ADAPTABLE
Culturally Adapted Design Guidance
USER SCENARIO
Designers don’t have time to learn and adjust design based on users’ cultural background
SOLUTION
During their design process, OJO will be hinting with a small dot on the edit window, copilot users to design.
Problem Statement
How might we help designers to accurately convey visual information to diverse audiences who may perceive them differently?
How did i get here?
INTRODUCing OJO
OJO is a Visual Design Tool that learns your visual perception. With AI-implemented, OJO inform visual design decisions based on real data, that truly understand different people’s culturally diverse visual preferences, It holds your hands along the way, ensuring that what you want to convey is precisely what your audience sees and feels.
FINAL DESIGN
DESIGN GOAL: ENLIGHTEN
Bridging perception gap between designers and users
USER SCENARIO
Designers don’t see the gap between their own perception and users
SOLUTION
OJO will learn about designer’s visual perception by asking them to draw their ideal heat map for the design
DESIGN GOAL: INCLUSIVE
Instant AI Design Feedback at Your Fingertips
USER SCENARIO
Designers want quick feedbacks from their design
SOLUTION
By right clicking a component, designers will see OJO’s AI-generated feedback.
DESIGN GOAL: ADAPTABLE
Culturally Adapted Design Guidance
USER SCENARIO
Designers don’t have time to learn and adjust design based on users’ cultural background
SOLUTION
During their design process, OJO will be hinting with a small dot on the edit window, copilot users to design.
how DID I MADE THESE DESIGN DECISION?
My Challenges
Knowing the fact that designers do design for people with different background, I didn’t really understand why that matters and how is that a challenges for designers.
I also had very limited knowledge about AI before I did this project in 2022. I didn’t know the technology capabilities and constraints.
Highlights
I went through 3 rounds of research in different field to overcome the challenges:
Design
Research
To learn how to design for users worldwide
User
Research
To understand how designers do it nowadays
Technical Research
To test technical feasibility and capability
Understanding
The Culture,
Standardizations vs Localization
My understanding deepened after perusing the International Human Factors guidelines. Their analysis of interface design across 53 nations revealed key design features that are culturally sensitive, such as language, layout, symbols, structure, navigation, and color. These elements hold diverse interpretations in different countries. It was quite a revelation to learn that Arabic readers scan text from right to left!
Understanding
The Technology,
Eyetracking & Runway ML Pattern Learning
Individuals are conditioned by their cultural upbringing to possess distinct visual structures. How might we ascertain the direction of a user's focus? I carried out research via eye tracking (heatmap) and implemented it into Runway ML's AI system to identify a recurring sequence. The outcome confirmed that machines are capable of comprehending human visual perception.
Understanding
The Users,
Visual / User Interface Designers
In my focus on visual designers, I conducted interviews with 6 designers from varied cultural backgrounds who have had the opportunity to work on global projects. From their disparate levels of expertise, it emerged that unique requirements were a common thread.
Key Features
Overall Structure
Top Bar
Navigate through your target audience
Edit Window
Edit window with perceptual score
Tool Bar
Minimized tool bar space
how DID I MADE THESE DESIGN DECISION?
My Challenges
Knowing the fact that designers do design for people with different background, I didn’t really understand why that matters and how is that a challenges for designers.
I also had very limited knowledge about AI before I did this project in 2022. I didn’t know the technology capabilities and constraints.
Highlights
I went through 3 rounds of research in different field to overcome the challenges:
Design
Research
To learn how to design for users worldwide
User
Research
To understand how designers do it nowadays
Technical Research
To test technical feasibility and capability
Understanding
The Culture,
Standardizations vs Localization
My understanding deepened after perusing the International Human Factors guidelines. Their analysis of interface design across 53 nations revealed key design features that are culturally sensitive, such as language, layout, symbols, structure, navigation, and color. These elements hold diverse interpretations in different countries. It was quite a revelation to learn that Arabic readers scan text from right to left!
Understanding
The Technology,
Eyetracking & Runway ML Pattern Learning
Individuals are conditioned by their cultural upbringing to possess distinct visual structures. How might we ascertain the direction of a user's focus? I carried out research via eye tracking (heatmap) and implemented it into Runway ML's AI system to identify a recurring sequence. The outcome confirmed that machines are capable of comprehending human visual perception.
Understanding
The Users,
Visual / User Interface Designers
In my focus on visual designers, I conducted interviews with 6 designers from varied cultural backgrounds who have had the opportunity to work on global projects. From their disparate levels of expertise, it emerged that unique requirements were a common thread.
Key Features
Overall Structure
Top Bar
Navigate through your target audience
Edit Window
Edit window with perceptual score
Tool Bar
Minimized tool bar space
how DID I MADE THESE DESIGN DECISION?
My Challenges
Knowing the fact that designers do design for people with different background, I didn’t really understand why that matters and how is that a challenges for designers.
I also had very limited knowledge about AI before I did this project in 2022. I didn’t know the technology capabilities and constraints.
Highlights
I went through 3 rounds of research in different field to overcome the challenges:
Design
Research
To learn how to design for users worldwide
User
Research
To understand how designers do it nowadays
Technical Research
To test technical feasibility and capability
Understanding
The Culture,
Standardizations vs Localization
My understanding deepened after perusing the International Human Factors guidelines. Their analysis of interface design across 53 nations revealed key design features that are culturally sensitive, such as language, layout, symbols, structure, navigation, and color. These elements hold diverse interpretations in different countries. It was quite a revelation to learn that Arabic readers scan text from right to left!
Understanding
The Technology,
Eyetracking & Runway ML Pattern Learning
Individuals are conditioned by their cultural upbringing to possess distinct visual structures. How might we ascertain the direction of a user's focus? I carried out research via eye tracking (heatmap) and implemented it into Runway ML's AI system to identify a recurring sequence. The outcome confirmed that machines are capable of comprehending human visual perception.
Understanding
The Users,
Visual / User Interface Designers
In my focus on visual designers, I conducted interviews with 6 designers from varied cultural backgrounds who have had the opportunity to work on global projects. From their disparate levels of expertise, it emerged that unique requirements were a common thread.
Key Features
Overall Structure
Top Bar
Navigate through your target audience
Edit Window
Edit window with perceptual score
Tool Bar
Minimized tool bar space
Design Process
Component Interations
In order to present clearly to the users about OJO's usability and functionality, I designed and iterated 7 rounds to test if it make sense to the users. The refinements are around these topics:
What tone should the AI have?
How strong should the suggestions be?
What kind of hierarchy is more clear to users?
© 2023
Feather Xu • Product Designer
Open to new opportunities
Reach out
© 2023
Feather Xu • Product Designer
Open to new opportunities
Reach out