close


fitbuddy project image overview


Rutina



Facilitating routine and connection through social and productivity features

Scope: UX/UI, Design Course   Duration: 7 Weeks   Team: Elizabeth, Fisayo, Angela & Katie


rutina homepage

Overview

Rutina is an app dedicated to facilitating routine and connection through social and productivity features. At our core, we are a to-do list. Users can establish routine through the completion of tasks and organized lists, something that users noted was lacking in quarantine.


Objective


Conduct user research and develop an application on the topic, HOME ISOLATION:

❓ How might we support the millions of people stuck at home due to the COVID-19 quarantine?


The COVID-19 pandemic has created a situation unprecedented in the history of the human race. Never before has such a high-percentage of the world’s population been isolated in their homes. At the same time, the internet has enabled many to continue to connect for work and play. For many others, the situation has led to stress and uncertainty. Understanding and addressing these challenges not only helps people in the current situation, but could help society prepare for future crises.




Secondary Research


Our team began our research phase by conducting secondary research and online community observations where members discuss their situation isolating at home. From our findings, we saw an increase in the need for mental health support.


What we know:


Online Observation on Communities such as: reddit, mental health message boards/forums, facebook groups, etc.


quote

Many people have posted similar anecdotes to reddit pages (threads such as r/living-alone, etc.), detailing their experiences in isolation. Many, like this reddit user, expressed sentiments of guilt for unproductivity as well as their wishes for coping mechanisms, specifically methods of warding off negative, unwanted thoughts (stemming from whatever: general anxiety/depression, restlessness, boredom, and loneliness).



User Research


The team created an online questionnaire for individuals who have adapted to home isolation to find opportunities for an application. Through this questionnaire, we aimed to gather information regarding how people are handling social isolation in the context of mental health. We wanted to learn about the resources people are using to cope, and how this affects their daily activities and mindset.


questionnaire prev picture

Questionnaire Results: 101 Responses, 68 Isolating Alone


Main Demographics:


Quantitative Data



User Research Interviews


Each team member conducted one interview with a participant, focusing primarily on mental health and subsequent protection and improvement of mental well-being during times of isolation.


Interviewee 1: Working from home and prefers this lifestyle, giving him flexibility and comfort. However, isolation also deteriorates his mental health sometimes.

Danielle (Interviewee 2): Main concerns during self-isolation was a lack of social interaction with friends and loneliness

Jerry (Interviewee 3): Recently unemployed and hasn’t been able to socialize as much due to isolation/ not being able to go to work

Diana (Interviewee 4): Recently unemployed and isolating alone, Diana has no structure to her day, feels like everyday is blending together



Annie (Interviewee 5): Annie had recently been isolating alone, she sets deadlines with which to keep in touch in friends, makes it easier to keep track of

From our interview results, the majority of interviewees agreed that there was a decline in their mental health due to a lack of socialization and routine. However, those who have focused on continuing to improve themselves, continue health habits and consistency, have found their mental health to be improving.



Persona


Based on insights from the team user research thus far, we created two personas to illustrate the archetype stakeholders.

two user persona images

The first persona represents the primary stakeholder, who lives alone and is experiencing frustration due to feeling disconnected from friends and family. The second persona portrays a stakeholder who interacts with the primary stakeholder as his sister, wanting to spend more quality time connecting with her brother.



Problem Statement


Through our research, we discovered that people's mental health suffers during self-isolation primarily due to disrupted routines. This disruption often results in decreased motivation and an increased need for support systems. Our mission is to develop a program aimed at motivating individuals to maintain productivity. By integrating a social component, we aim to incentivize people to achieve their goals. So...


❓How might we help those who experience worsening mental health symptoms due to the absence of routine and productivity in their lives?

Competitive Analysis


The team created a competitive analysis to help us distinguish our potential competitive advantage by comparing our idea to five other productivity apps by features, incentives, interactivity, and critical pain points.


competitive analysis chart


There exists a wide range of innovative strategies for boosting productivity within the App Store; mostly having to do with game-ifying the idea of being productive. The versatility of many of the apps that we researched came from the absence of an actual in-app task list-  the apps were meant to be used in conjunction with whatever the user had in mind to accomplish, but there often seems to be no space in the apps to organize these goals.


Consequently, we propose an integration of an organizational checklist feature into our productivity app, incentivizing users to be productive by mimicking a social media platform. Our competitive advantage lies in the social aspect, which seems to be lacking from other productivity apps: our users can collaborate with friends on tasks while being able to keep in touch with their friends in a unique way.

Sketches


After creating our competitive analysis, the team began to write out a list of key functions for our mobile system based on the support needed from our research. Each team member then created sketches for the user interface with the focus of creating a social incentive: feed showing other’s tasks and lists, compare lists with friends.



sketches

All five team members presented their version of the application to the group for discussion. We then reviewed which aspects of the sketches we liked and the features that communicated our content the strongest, which would then be used to merge our core functionality into one.



Lo-fi Prototype


Building on our sketches, our team collaborated on Balsamiq to create our lo-fi prototype to consturct our main interactivity and illustrate how the user would move between each screen.

lo-fi Prototype

Once we evolved this idea of incentivizing productivity between friends, we prototyped our ‘activity feeds’ (where you could see what friends had accomplished or added to their to-do lists) with personal organization templates, allowing users to have a maintain a virtual to-do list and share it with others.

User Testing


To validate our lo-fi prototypes, we tested with five users and devised a comprehensive approach. This included crafting task lists for users to complete and preparing interview questions to delve into their perceptions and interactions with the prototype. Each tester received clear, tailored instructions to structure their day around the prototype tasks.


User Testing Results



Creating a MoodBoard


Drawing inspiration from our user research and personas, our team created a moodboard to capture the essence, mood, and color composition of the emotional experience we wanted to create with our app.



moodboard

We wanted to find a balance between clean and sleek design, while maintaining a familiar and playful vibe. Emphasizing productivity and collaboration, we wanted the app to be familiar and inspiring.



Developing our Style Guide


Following our moodboard, the team created a set style guide with specification that shows our choices for colors, typefaces, and design elements.



styleguide

To achieve the clean and sleek design we envisioned, we chose sans-serif fonts exclusively and incorporated boxes with rounded edges. A subtle drop shadow was strategically applied to add depth and dynamism without overpowering the design. Additionally, we utilized vibrant blobs of color in the backgrounds of various pages to create an inviting and playful atmosphere. Our color palette juxtaposes softer tones with bold accents of teal and yellow, ensuring a visually engaging experience throughout the app.



High Fidelity Prototype


We refined our prototype based on feedback from our previous user testing sessions. After establishing our style guide, the team and I collaboratively crafted the high-fidelity prototype of our app, Rutina


prototype


Seeing friends complete tasks and be productive will hopefully inspire users to do the same. We see this as a way for friends separated by distance to hold each other accountable to their responsibilities. Additionally, we are combining some ideas of our competitors, such as implementing achievements, reminders/notifications, and usage stats. This will allow our users to use the app to keep track of all their responsibilities, while providing them with valuable feedback on their productivity habits to allow them to make changes if necessary.



Hi-Fi Prototype User Testing


Before finalizing the interface, the team conducted a second round of user testing with six users to provide us with feedback on the prototype’s usability and whether users found it purposeful. The users were given specific directions to plan their tasks and see what progress their friends have made in their tasks.


The Overall Consensus

The prototype was intuitive to use and it would be practical to have, especially the collaborative features which would make task projects with peers easier. Although there were minor difficulties due to some connection errors within the prototype, most users were able to complete each task. At times, users felt overwhelmed by the app, so our team decided to make small changes such as reducing drop shadow, colors, and overall simplifying aspects of the design to ease users.



🎉 Completed Design


This is our finalized prototype after iterating and refining our figma prototype, guided from our user testing feedback.


rutina gif

check out the final prototype -> here


Conclusion


Through this project, I leveraged design insights gained from previous classes to develop Rutina. I deepened my understanding of user research and embraced user-centered design principles through new tools and techniques. Given more time, I would have expanded the scope to include additional scenarios, tasks, and a third round of user testing to refine the updates further.