Revise —

How might we promote and encourage protection of eye health in everyday living?

revise-thumbnail2

TYPE

UI/UX, Product Design, Web Design, Marketing

TOOLS

Figma, Sketch, InVision, Cinema 4D, Adobe Illustrator, Adobe InDesign, Adobe After Effects

TEAM

Rachel Solakis, Jasmine Zhang

ROLE

Research, Wireframes, Prototyping, 3D Mockup, Context-Scenario Map, Walkthrough Demonstration, Web Design

What is the current problem?

Some of our everyday tasks rely a lot on the use of our eyes. Especially for those who work long days in an office or to those who are constantly in front of a computer screen for school, it damages our eyes. Everyone has habits that are dangerous for our eyes - whether that is using your cellphone in the dark before you sleep, staring at a screen for too long, or just not giving them a break. In the long run, this can be very harmful to your health in general. You can start to have bad headaches, blurry vision, straining, and the list goes on. It is important to take care of our eyes, as it's the only pair we have.
 

Some of our everyday tasks rely a lot on the use of our eyes. Especially for those who work long days in an office or to those who are constantly in front of a computer screen for school, it damages our eyes. Everyone has habits that are dangerous for our eyes - whether that is using your cellphone in the dark before you sleep, staring at a screen for too long, or just not giving them a break. In the long run, this can be very harmful to your health in general. You can start to have bad headaches, blurry vision, straining, and the list goes on. It is important to take care of our eyes, as it's the only pair we have.
 

The Solution

The Solution

Revise smart lenses not only helps you with maintaining healthier eye care, but it helps you change some of your most harmful habits that contribute to damaging your eyes. With notifications of the smart glasses with the use of tints, it reminds you to make healthier decisions for your eyes. With notifications of simple things such as: moving away from your laptop screen or taking a break, it's one step forward to taking care of your eyes.

Revise smart lenses not only helps you with maintaining healthier eye care, but it helps you change some of your most harmful habits that contribute to damaging your eyes. With notifications of the smart glasses with the use of tints, it reminds you to make healthier decisions for your eyes. With notifications of simple things such as: moving away from your laptop screen or taking a break, it's one step forward to taking care of your eyes.

Research

Research

To fully understand the topic and audience of those who wear glasses, I researched eye problems/issues that the target audience may have. This was also very important while designing the application and what considerations had to be taken (i.e. certain colours not to use, eye exercises that would help, etc.) As I did online research to understand different eye issues, I made notes on the problems that existed which can be seen below (click to enlarge).

To fully understand the topic and audience of those who wear glasses, I researched eye problems/issues that the target audience may have. This was also very important while designing the application and what considerations had to be taken (i.e. certain colours not to use, eye exercises that would help, etc.) As I did online research to understand different eye issues, I made notes on the problems that existed which can be seen below (click to enlarge).

eye problems

Context-Scenario Map

While I started to understand more about the current eye issues and more from user perspectives to those who wore glasses and may have different eye issues, I created a context-scenario map to show how a one type of user can use the application and use it so that it would help in their situation.

In this context-scenario map, Amanada is trying to access an eye exercise she can do to reduce eyestrain. I showed what this flow may look like in a more rough sense to show each interaction Amanda would have to go through to reach her desired destination.

While I started to understand more about the current eye issues and more from user perspectives to those who wore glasses and may have different eye issues, I created a context-scenario map to show how a one type of user can use the application and use it so that it would help in their situation.

In this context-scenario map, Amanada is trying to access an eye exercise she can do to reduce eyestrain. I showed what this flow may look like in a more rough sense to show each interaction Amanda would have to go through to reach her desired destination.

Context Scenario

System Map

Discussing the system map with my team, we thought about the ways in which our application can solve or promote eye health. After our research was done, we got together to discuss a system map and the appropriate features this application would need to solve the issues that we researched.

From the beginning, we knew that we wanted to include a smart device with this application. At this point, we started to think about the requirements of the application first before thinking into detail about the smart device that would work with the application, which would be the glasses. Some of the most important things we found to be useful in an application to help with eye health are: eye exercises, ways to incorporate healthy eyes into their everyday routine, and a way that it can be personalized to their circumstance.

To solve this, we came up with 3 main categories of the application: Calendar, Exercises, and Settings.

Calendar would tackle the component of allowing the smart device and application to be incorporated properly into their everyday routine. This would be done by scheduling times where the smart device would be used or not.

Exercises would help users to practice healthy eyes and educate users by doing eye exercises that will prevent from further eye damage.

Finally, we thought that Settings was an important category to include in such an application for users to easily change and adjust their eye health information, as well as any settings of the smart glasses.

Discussing the system map with my team, we thought about the ways in which our application can solve or promote eye health. After our research was done, we got together to discuss a system map and the appropriate features this application would need to solve the issues that we researched.

From the beginning, we knew that we wanted to include a smart device with this application. At this point, we started to think about the requirements of the application first before thinking into detail about the smart device that would work with the application, which would be the glasses. Some of the most important things we found to be useful in an application to help with eye health are: eye exercises, ways to incorporate healthy eyes into their everyday routine, and a way that it can be personalized to their circumstance.

To solve this, we came up with 3 main categories of the application: Calendar, Exercises, and Settings.

Calendar would tackle the component of allowing the smart device and application to be incorporated properly into their everyday routine. This would be done by scheduling times where the smart device would be used or not.

Exercises would help users to practice healthy eyes and educate users by doing eye exercises that will prevent from further eye damage.

Finally, we thought that Settings was an important category to include in such an application for users to easily change and adjust their eye health information, as well as any settings of the smart glasses.

system map

Wireframes

After understanding the different categories and features of the application, we began to sketch out wireframes of the application to think more about the structure and features into detail. I was responsible for creating wireframes for the categories Calendar and Exercises. Below are sketches of these categories as I was going through the phase of creating the structure of the interface. 

After understanding the different categories and features of the application, we began to sketch out wireframes of the application to think more about the structure and features into detail. I was responsible for creating wireframes for the categories Calendar and Exercises. Below are sketches of these categories as I was going through the phase of creating the structure of the interface. 

Interactions

From this point, we had a good basic understanding of our application goal and features. Now, we wanted to bring the smart device into this thought. From here, we started to think about smart glasses and the interactions the user would have with it. We discussed and sketched out these interactions showing what the glasses would do in different situations and how it would react from user input. 

From this point, we had a good basic understanding of our application goal and features. Now, we wanted to bring the smart device into this thought. From here, we started to think about smart glasses and the interactions the user would have with it. We discussed and sketched out these interactions showing what the glasses would do in different situations and how it would react from user input. 

Look & Feel

Now that we knew our basic categories of the application, we worked together on Figma to figure out the look and feel we wanted to go with. A lot of similar applications we looked at were more serious in tone. For a change, we wanted to go with something a little bit more fun to promote eye health. To do this, we created characters that would live within the application. These characters would also be seen in the Exercise portion of the application.

Now that we knew our basic categories of the application, we worked together on Figma to figure out the look and feel we wanted to go with. A lot of similar applications we looked at were more serious in tone. For a change, we wanted to go with something a little bit more fun to promote eye health. To do this, we created characters that would live within the application. These characters would also be seen in the Exercise portion of the application.

colours

This is the main colour palette that we decided to go with. The application uses fun and bright colours.

This is the main colour palette that we decided to go with. The application uses fun and bright colours.

On the right are some characters that we introduced in the application for a fun twist on encouraging healthy eyes.

Below are some characters that we introduced in the application for a fun twist on encouraging healthy eyes.

Below are some characters that we introduced in the application for a fun twist on encouraging healthy eyes.

characters

For typography, we used a sans-serif for easy reading with a grey colour palette for a softer look.

For typography, we used a sans-serif for easy reading with a grey colour palette for a softer look.

typography

Prototyping

As we started to understand more of the look and feel, we started to arrange the interface with the look and feel on Figma. Initially, our screens looked as below.

As we started to understand more of the look and feel, we started to arrange the interface with the look and feel on Figma. Initially, our screens looked as below.

However, we thought that the green background was a little too harsh. In addition, we wanted to include more fun characters to add a little fun twist. We then revised the interface to fix this, as well as added characters to the eye exercises. This revision can be seen below.

However, we thought that the green background was a little too harsh. In addition, we wanted to include more fun characters to add a little fun twist. We then revised the interface to fix this, as well as added characters to the eye exercises. This revision can be seen below.

revisions_one

High-fidelity Prototype

The prototype can also be viewed at: https://invis.io/CKQFJ2MMB7D

The prototype can also be viewed at: https://invis.io/CKQFJ2MMB7D

Smart Glasses

I was also responsible for creating a 3D mockup of the smart glasses. I rendered different types of glasses on Cinema 4D. These glasses included: the two sensors between the lenses, and the panel on the side of the glasses that the user can use guesstures such as swiping and tapping. Below are a few process screen captures of working in a 3D space in Cinema 4D.

I was also responsible for creating a 3D mockup of the smart glasses. I rendered different types of glasses on Cinema 4D. These glasses included: the two sensors between the lenses, and the panel on the side of the glasses that the user can use guesstures such as swiping and tapping. Below are a few process screen captures of working in a 3D space in Cinema 4D.

SENSORS

SENSORS

Below is a view of the two sensors in between the lenses. These sensors would detect the eye and pupil and watch for cases such as: eyestrain, proximity, and so on. In addition, these sensors would help detect when it may be time to do an eye exercise.

Below is a view of the two sensors in between the lenses. These sensors would detect the eye and pupil and watch for cases such as: eyestrain, proximity, and so on. In addition, these sensors would help detect when it may be time to do an eye exercise.

SIDE PANEL

SIDE PANEL

On the arms of the glasses, I mocked up a side panel that the user can swipe and tap to trigger actions such as snoozing the glasses. 

On the arms of the glasses, I mocked up a side panel that the user can swipe and tap to trigger actions such as snoozing the glasses. 

TINT

TINT

As part of notifications, the edges of the glasses would slightly tint to let the user know if they’re eyes are prone to eyestrain, too close in proximity to a screen, or if they’re using their eyes in poor lighting. All of these can contribute to damaging your eyes further. This is why we thought these type of notifications may be useful for helping to prevent further damage.

A blue tint would indicate if the user has been using their eyes for a long time. The sensors between the glasses would detect eye movement, as well as blinking to understand if a user can be prone to eyestrain.

A green tint would occur if the user is in close proximity to any screens which could cause headaches, blurry vision, and eyestrain.

A red tint indicates that the user is in poor lighting which could also damage their eyes. One example can be when reading in poor lighting which can strain the eye. 

Below is an example of what a tint may look like on the smart glasses.

As part of notifications, the edges of the glasses would slightly tint to let the user know if they’re eyes are prone to eyestrain, too close in proximity to a screen, or if they’re using their eyes in poor lighting. All of these can contribute to damaging your eyes further. This is why we thought these type of notifications may be useful for helping to prevent further damage.

A blue tint would indicate if the user has been using their eyes for a long time. The sensors between the glasses would detect eye movement, as well as blinking to understand if a user can be prone to eyestrain.

A green tint would occur if the user is in close proximity to any screens which could cause headaches, blurry vision, and eyestrain.

A red tint indicates that the user is in poor lighting which could also damage their eyes. One example can be when reading in poor lighting which can strain the eye. 

Below is an example of what a tint may look like on the smart glasses.

DIFFERENT STYLES

DIFFERENT STYLES

Besides the features of the glasses, I also mocked up different styles of glasses to show the variety of glasses and lenses offered.

Besides the features of the glasses, I also mocked up different styles of glasses to show the variety of glasses and lenses offered.

Marketing Materials

As a team, we discussed that we would create 2 marketing materials to promote the application and smart device. Within these marketing materials, there would also be a call to action to encourage buying the product. The 2 marketing materials we decided to create are: a website and a booklet that could be offered separately, but generally would come with the product as an additional way to promote eye health.

As a team, we discussed that we would create 2 marketing materials to promote the application and smart device. Within these marketing materials, there would also be a call to action to encourage buying the product. The 2 marketing materials we decided to create are: a website and a booklet that could be offered separately, but generally would come with the product as an additional way to promote eye health.

WEBSITE

WEBSITE

To start off, the website will address current eye issues to educate the user on the damages that contribute to our eye health everyday. The website continues by introducing all the features of the application and smart glasses as a solution to prevent eye damage.

Below are previews of the website. The website can also be viewed at: https://invis.io/UTSI5XEF5HN

To start off, the website will address current eye issues to educate the user on the damages that contribute to our eye health everyday. The website continues by introducing all the features of the application and smart glasses as a solution to prevent eye damage.

Below are previews of the website. The website can also be viewed at: https://invis.io/UTSI5XEF5HN

Below is a walkthrough video of the Revise website.

Below is a walkthrough video of the Revise website.

BOOKLET

BOOKLET

In addition to the product, we thought that it would be a fun idea to create a booklet of recipes for healthy eyes to further promote the importance of taking care of our eyes. This printed material also goes with the branding with fun colours and characters. This booklet would be included in the package if a user were to purchase the smart glasses and application.

In addition to the product, we thought that it would be a fun idea to create a booklet of recipes for healthy eyes to further promote the importance of taking care of our eyes. This printed material also goes with the branding with fun colours and characters. This booklet would be included in the package if a user were to purchase the smart glasses and application.

Reflection

CHALLENGES

CHALLENGES

Creating a unified product
Although my team was very helpful throughout the process of the project, there were times where it was challenging to separate parts of the project yet have the whole product look unified. To solve this, we sat down and discussed the visual design of how we wanted our brand to play out. Although we did get to split up certain parts of the project, each team member was still very much involved in every part of the project as we were also able to critique each other’s work in order to create a strong unified product/experience.

Designing for disabilities
Another challenge that we went through was designing for disabilities such as colour blindness. Since our smart device notifications relied on tinted colours around the lenses, we thought that there would be a potential problem for those who have difficulty differentiating the colours. To solve this to the best of our ability, we made sure that all three colours were different and used different types of saturation and contrast.

Creating a unified product
Although my team was very helpful throughout the process of the project, there were times where it was challenging to separate parts of the project yet have the whole product look unified. To solve this, we sat down and discussed the visual design of how we wanted our brand to play out. Although we did get to split up certain parts of the project, each team member was still very much involved in every part of the project as we were also able to critique each other’s work in order to create a strong unified product/experience.

Designing for disabilities
Another challenge that we went through was designing for disabilities such as colour blindness. Since our smart device notifications relied on tinted colours around the lenses, we thought that there would be a potential problem for those who have difficulty differentiating the colours. To solve this to the best of our ability, we made sure that all three colours were different and used different types of saturation and contrast.

WHAT I LEARNED

WHAT I LEARNED

Working with a smart device and application
This was my first project making a smart device work with an application. At times, it was a little difficult to grasp both at the same time and had to really think out the flows for both to make sure they made sense working together. However, having a team to really think and discuss it out helped a lot in the process. In this sense, I learned how to strategically think about the way in which a smart device and application work together to create the best user experience.

Figma
Since this project was group based, I decided that it was a good idea to Figma to build out our wireframes and prototypes. At the time, Figma was still quite a new product and I thought that this would be the perfect opportunity to test it out in a group setting. Though my team members and I had little experience to Figma prior to the project, it was really easy to learn and was a very crucial tool in our process. It was really helpful to see what other team members were working on in the same file.

Working with a smart device and application
This was my first project making a smart device work with an application. At times, it was a little difficult to grasp both at the same time and had to really think out the flows for both to make sure they made sense working together. However, having a team to really think and discuss it out helped a lot in the process. In this sense, I learned how to strategically think about the way in which a smart device and application work together to create the best user experience.

Figma
Since this project was group based, I decided that it was a good idea to Figma to build out our wireframes and prototypes. At the time, Figma was still quite a new product and I thought that this would be the perfect opportunity to test it out in a group setting. Though my team members and I had little experience to Figma prior to the project, it was really easy to learn and was a very crucial tool in our process. It was really helpful to see what other team members were working on in the same file.

WHAT I WOULD CHANGE/IMPROVE ON

WHAT I WOULD CHANGE/IMPROVE ON

Smart glasses
If I were to go back and improve this project, I think I would think out the glasses a little more — especially as one challenge of it was designing for disabilities. I would also like to go more in depth and give more knowledge about how it is used in action with its sensors and side panel. I think that this might be important for users who are especially thinking about buying the product.

Smart glasses
If I were to go back and improve this project, I think I would think out the glasses a little more — especially as one challenge of it was designing for disabilities. I would also like to go more in depth and give more knowledge about how it is used in action with its sensors and side panel. I think that this might be important for users who are especially thinking about buying the product.

Measures of Success

If Revise was turned into a real smart device and product available to the public, ways to measure its success would be the amount of smart glasses bought and synchronized through the downloaded application. However, an interesting way to measure that the customer actually enjoys the product after a one time use would be to offer some sort of trial that the user could test out the product overtime and give their opinion afterwards if they were to recommend it. Overall, testimonials of a change of lifestyle could also be measurements of success to see that people are taking care of their eye health, rather than having it worsen.

Creating a unified product
Although my team was very helpful throughout the process of the project, there were times where it was challenging to separate parts of the project yet have the whole product look unified. To solve this, we sat down and discussed the visual design of how we wanted our brand to play out. Although we did get to split up certain parts of the project, each team member was still very much involved in every part of the project as we were also able to critique each other’s work in order to create a strong unified product/experience.

Designing for disabilities
Another challenge that we went through was designing for disabilities such as colour blindness. Since our smart device notifications relied on tinted colours around the lenses, we thought that there would be a potential problem for those who have difficulty differentiating the colours. To solve this to the best of our ability, we made sure that all three colours were different and used different types of saturation and contrast.