chris ma | ux designer & alexis anand | lead researcher katrina …€¦ · katrina ezis |...
TRANSCRIPT
![Page 1: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/1.jpg)
Katrina Ezis | Project Manager & Cynthia Zhang | UI DesignerChris Ma | UX Designer & Alexis Anand | Lead Researcher
![Page 2: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/2.jpg)
Meet Bill
Works with computers 8+ hours per day
Wears glasses, doesn’t understand why his eyes
continue to get worse
Little to no eye strain awareness
![Page 3: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/3.jpg)
In a digital world, we’re using more screens
than ever. This long-term and consistent use
of screens slowly causes more and more
damage to our eyes.
![Page 4: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/4.jpg)
tasks
○ Reduce harmful light exposure
○ Reduce eye strain (caused from screens,
reading, and dim light)
![Page 5: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/5.jpg)
glasses
![Page 6: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/6.jpg)
Initial Paper Prototype
![Page 7: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/7.jpg)
overview
![Page 8: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/8.jpg)
task 1reduce harmful light exposure
![Page 9: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/9.jpg)
task 1reduce harmful light exposure
![Page 10: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/10.jpg)
task 2reduce eye strain
smart alert sends eye break
notifications when the user has eye strain
![Page 11: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/11.jpg)
task 2reduce eye strain
![Page 12: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/12.jpg)
Testing
![Page 13: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/13.jpg)
testing process
two heuristic evaluations
in-class critique
three usability
tests
![Page 14: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/14.jpg)
testing process
two heuristic evaluations
in-class critique
three usability
tests
with a lot of revisions in-between
![Page 15: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/15.jpg)
heuristic evaluation
○ Consistency and standards
○ Minimalistic design
○ Help and documentation
○ Allow user to set a goal
![Page 16: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/16.jpg)
add a goal
![Page 17: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/17.jpg)
usability test
○ UW CSE students
○ Tasks:
□ set an eye strain goal
□ view their UV light exposure data
□ enable/disable alert
□ connect a new smart device
![Page 18: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/18.jpg)
usability testfeedback
○ Unintuitive home screen design
○ Misleading data visualization
○ Confusing labels
![Page 19: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/19.jpg)
testing results
○ Improved home screen(added buttons to call actions, added goal progress on the home page)
○ Added more help and documentation (added ? next to many of our features to allow our users to read more about that issue, added a fun eye strain fact as load screen, documented app-specific terminology)
○ Refined data visualization(updated add goal feature, made the user flow more understandable and easy to use)
![Page 20: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/20.jpg)
Final Paper Prototype
![Page 21: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/21.jpg)
overview
![Page 22: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/22.jpg)
records UV and blue light
exposure
auto senses light
exposure
filter out UV and blue light
task 1reduce harmful light exposure
![Page 23: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/23.jpg)
task 1reduce harmful light exposure
![Page 24: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/24.jpg)
task 1reduce harmful light exposure
![Page 25: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/25.jpg)
task 1reduce harmful light exposure
![Page 26: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/26.jpg)
tracks eye movement
indicator that reminds user
to take a break
indicator gets more red the longer a user goes w/o a
break
task 2reduce eye strain
![Page 27: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/27.jpg)
task 2reduce eye strain
![Page 28: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/28.jpg)
task 2reduce eye strain
![Page 29: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/29.jpg)
task 2reduce eye strain
Focus alerts will remind you to take a break through our built in indicator
![Page 30: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/30.jpg)
home screennext iteration
focuses on simple
design
based on user
research feedback
goal oriented, removed nav bar
![Page 31: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/31.jpg)
Digital Mockup
![Page 32: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/32.jpg)
overview
![Page 33: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/33.jpg)
let’s start
![Page 34: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/34.jpg)
task 1reduce eye strain
![Page 35: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/35.jpg)
task 1reduce eye strain
![Page 36: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/36.jpg)
task 1reduce eye strain
![Page 37: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/37.jpg)
task 1reduce eye strain
![Page 38: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/38.jpg)
task 1reduce eye strain
![Page 39: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/39.jpg)
task 2reduce harmful light exposure
![Page 40: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/40.jpg)
task 2reduce harmful light exposure
![Page 41: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/41.jpg)
task 2reduce harmful light exposure
toggle between UV and
blue light
click to find out
more info
![Page 42: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/42.jpg)
Reflection
![Page 43: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/43.jpg)
reflection
○ Design with intent - every design choice
needs to have a reason
○ Research, refine, research, refine
○ Don’t be afraid to try new things
![Page 44: Chris Ma | UX Designer & Alexis Anand | Lead Researcher Katrina …€¦ · Katrina Ezis | Project Manager & Cynthia Zhang | UI Designer Chris Ma | UX Designer & Alexis Anand | Lead](https://reader033.vdocuments.mx/reader033/viewer/2022042312/5edb7c4dad6a402d6665b8f5/html5/thumbnails/44.jpg)
see your full potential