Allegra
UX designer

Eyecare

Project: Co.Lab, 8-week apprenticeship working cross-functionally with a PM and developers to ship a web app
ROLE: Lead Product Designer
DURATION: 8 weeks

Image alt tag

The problem: During the pandemic, the workforce shifted to work from home. The increase of computer usage has resulted in negative effects on workers’ mental and physical wellness.

The solution: 'Eyecare' is a web app that helps users better manage desktop screen time to alleviate eye fatigue.

Co.Lab



I was brought on as the UX Designer to design the client's idea from end to end. I worked by myself to design the app and presented it to the founder. My role as the UX Designer focused on wireframing and building out user flows. I also focused on business strategy and competitive analysis. For my process, I approached the project in three iterations, presenting to the client each time. It was important to segment the project into three parts so that I could continue to iterate and develop a product that we both were satisfied with. I designed the app in Figma and utilized usability testing with Maze.com

I was given an outline of responsibilities including four scenarios that the client wanted me to design. The client did not want user research and wanted to focus on the user flows, interactions and UI.

I drove the project forward by sticking to a consistent timeline, conducting regular check-ins and being receptive to critical feedback.

Problem Background


The target audience is Gen Z/Millennials without kids who fully/partially work from home. Users have to spend 8-14 hours on their computer for work. They experience physical and mental distress from long exposures to computer screens. This is also caused by being sedentary for prolonged periods of time.

Goal

Our goal is to set up users with attainable computer screen time habits that will provide them with short and long-term benefits.

User Research

Recent user interviews concluded that 33% of users spent 6-8 hours on a computer per day, 50% spent 8-10 hours and 17% spent 12-14 hours. Still, 60% of participants stated that the longest period of time they could work at their computer without taking a break is 2-3 hours, while 40% stated 4-5 hours. 

Studies have shown that the best way to reduce eye fatigue is to follow the 20-20-20 rule. When you’re working on a computer, take a break every 20 minutes. Look at an object 20 feet away for 20 seconds to give your eyes a chance to relax. By developing a web app that serves as a reminder to incorporate habitual screen breaks, users can relieve themselves of physical and mental distress. According to PennMedicine, “regular movement and breaks from sitting enable your body to move and stretch, a natural inclination that promotes spine health. Shifting positions also places less pressure on the spine and enhances blood flow throughout the body.”

User stories

  • As a computer user, I want to make customized and scheduled screen breaks so that I can avoid eye strain.

  • As a computer user, I want to take scheduled stretching breaks so that I can add movement to my sedentary activity.

  • As a computer user, I want to be motivated to take screen breaks so that I create long-term habits that will improve my overall health. 

  • As a computer user, I want to integrate breaks into my schedule so that I avoid burnout.

Proposed Solution

The solution is a desktop application that encourages users to take regular breaks. Users can customize how often they are notified to take breaks where they stretch or step away from all electronics. There will also be an option for users to schedule breaks around the list of tasks they would like to complete in a day. There will be a gamified motivation for users to maintain habits.

Web-App Scenarios

The desktop app will push scheduled browser notifications to the user to help remind the user to stay on track to maintain a healthier lifestyle with their screens. The user will be prompted to incorporate the 20-20-20 rule, stretch and take walks, and be encouraged to take breaks. 

Push notifications are our highest priority. Realistically, our team believes we can execute notifications around a to-do list and create a rewards system but these features are second on the priority list. 

Co.Lab

Research

From here, I sent my first iteration designs to the client in the form of a usability test. I input the four scenarios into Maze.com and asked the client to navigate through the prompts. My thought behind conducting a usability test early in the process was to gain valuable feedback about the core functions such as navigation, buttons and layout.

As you can see, the client felt challenged walking through the prototype paths. This data informed my next iteration of designs.

I had three action items for my next stage in the process.

  1. Level-up the fidelity, include images, colors, buttons

  2. Connect with the client to receive feedback

  3. Conduct a second round of usability tests with the next iteration, clearly explain each mission in the prompts.

Client feedback

"We want to show people browsing, without logging in"

"It would be really good to see a lot more screens showing interactions/experiences of just browsing various perishable items."

"I don't think at any point there was a discussion of a 'cart' metaphor, and I think the design intent of the app is more in line with a craigslist purchase."

"I suggest we remove the search bar. We won't have enough data at the outset of the app to structure items into categories."

Co.Lab

Second iteration

I leveled up the fidelity by adding colored buttons, images and more products for the user to interact with. I added seven more products to the app which expanded the designs from 5 screens to 18 screens of interactions.

I added the designs into Maze again so that I could get in-depth results from the user paths. Again, the client felt it was difficult to navigate through the scenarios. I suggested that we conduct feedback reviews on calls and stick to emails.

I had four new action items for my next stage in the process.

  1. Critically think about empathizing with the user in each scenario, how would a user navigate through discovering a product, negotiating the product, messaging the seller and then completing the payment process?

  2. Be more practical! Think about how a developer would code my designs.

  3. Re-work the button language in order to better suit the user flows.

  4. Re-design the menu to open up more space on the screens.

User feedback

"Can you add an icon to indicate that a person is already signed up / logged in?"

"When a seller receives a notification, what happens next? Is there an action they need to take? It looks to me like there are a number of screens / conceptual jumps that need to be articulated between the last screen and the second-to-last screen."

"I like the idea behind 'buy' 'sell' and 'seek' that you've incorporated."

"Let's simplify the menu so that we can add more real estate to the screens."

Outcome

After the last design critique, the client and I solved the four user scenarios. I learned that providing the client with three iterations was helpful for the design process and aligning to a timeline. It was helpful to gain feedback from the usability tests, moving forward, I will test my peers in addition to the client to gain more feedback. I also learned to be receptive to critical feedback and to leave space to pivot at any moment with designs.