Product Designer
1. Lens
2. Arte
3. BitFont
4. Archive
About
Lens
Boost your learning by using AI
assistant on smart glasses in class.
Project Type
UX Case Study
Solo Project
UX Case Study
Solo Project
Role
UX/UI Designer
Branding / Art Director
UX/UI Designer
Branding / Art Director
Duration
8 weeks
10/14/24~12/2/24
8 weeks
10/14/24~12/2/24
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Adobe AfterEffect
Figma
Adobe Illustrator
Adobe Photoshop
Adobe AfterEffect
Problem
College courses are overloaded with information, forcing professors to rush through lectures.
This leaves students struggling to keep up, leading to a lack of comprehension during class. To fully understand the material, they must allocate additional study time, sacrificing personal commitments.
Solution
Lens is a learning assistant to support college student absorb class materials better.
Lens smart glasses leverages AR technology and AI tools to help turn lengthy lectures into concise notes. With a built-in camera and online search tool, students can also save class materials for future review.
Features
1. Home Page
The home page is where students can review the materials previously captured on the glasses, and study where ever they go.
Lens categorizes the files into images, videos, lectures, and website links.
2. Camera
The camera tool is designed to help users quickly and intuitively capture pictures and videos during class, study, and other scenerios.
During user testing students mentioned
- DIfficulty taking pictures of the slideshow.
- Difficulty raising a giant ipad in the classroom
- it will be helpful if there’s alternatives to capture study materials without causing attentions.
3. Lecture Subtitle
The lecture subtitle tool is crafted to make fast-paced classes easier to keep up with. Studnts can vew two windows.
1. Subtitle (turns speaker’s voice into words, so users can scroll back when missed specific contents).
2. Content organization (turn the lengthy subtitle into structured notes for students to better digest information).
4. Scan Search
The scan search tool is made to assist users searcing information with an easy scan and tap.
This can be helpful when students have question during class but are afraid to interrupt the professor.
Mobile App
The Lens App synchronizes with smart glasses, allowing students to view and manage all captured files and settings directly on their mobile device.
Mission Statement
“Bridge the gap between traditional lectures and the demand of modern academic landscape.”
Vision Statement
“Be the indispensable learning companion for every college student.”
Competitor Analysis
I desk researched multiple products that serve the same user group and purpose as Lens, and laid out their pros and cons to identify market opportunities.
User Persona — Emily
Emily, an undergraduate student, is in the process of preparing for the teacher certification exam.
College Student Empathy Map
I invited college students to share their emotional state throughout a semester, and how different events influence the states.
College Student Empathy Map
To get a complete view of college students’ habits, I pulled out quotes from the interviews and organized them into four perspectives.
User Testing
I conducted testing with initial users who are graduate and undergraduate students to gather feedback on the concept, features, and interface design.
College
Student Empathy Map
Tester’s Voices
Key quotes from each testing participant.
Target User Transition
After conducting user testing with a middle school student's parent, I realized that our original target audience wasn't the right fit.
The feedback revealed that younger students often lack a clear sense of purpose and are easily distracted by technology. I shifted the focus to college students, who are more likely to benefit from the product.
Insights & Metrics
I summarized final insights from user testings, this acts as a guideline for later design iterations.
Final Design Improvements
I revised parts of the UI design and added in new features based on the insights from user testings.
Before
Too many buttons / Inconsistent UI with other features / Too many steps for saving file / Not enough supportive tools for lecture understanding
After
Minimized UI buttons for faster and more intuitive navigation / Added in window size expansion and AI organized content for clear understanding
h
Before
Inconsistent UI with other features / Too many steps to reach to final search results
After
Changed audio and scan tool to only scan, and minimized UI buttons for faster and more intuitive navigation / Added in window size expansion
Before
Inconsistent UI with other features / Too many unnecessary buttons and steps to picture taking and recording
After
Minimized UI buttons and steps for faster navigation
User Flow
In the user flow, students will connected the APP and the smart glasses, andapply all customization and settings through in the initial flow. After that they will use the glasses for classes and study, and save captured materials for future use.
Information Architecture
To keep the products intuitive, I built an information structure that is simple and minimal.
Wireframe
The APP is synchronized with the smart glasses’ home page, and all files can be organized with in the APP.
Wireframe
The glasses has a navigation on the left which includes four features categorization. Each feature page is designed to have consistent UI system, making sure everything is intuitive and straightforward.
Brand Positioning Analysis
(Design Opportunities for Lens)
(Design Opportunities for Lens)
I systematically examined the visual language and branding of existing competitors to pinpoint areas where Lens could differentiate itself through potential design spaces.
UI Directions
For the brand design strategy, I created 3 stylescapes that show friendliness and reliability. By experimenting with various logo treatments and color combinations, I uncovered a wealth of creative possibilities.
Final UI System
I’ve selected the first blue-toned branding direction as the final choice. It aligns with Len's brand voice, projecting a modern, dynamic, and elegant image, and conveys a sense of professionalism and trustworthiness.