CHALLENGE
Design an interface that facilitates personal or social behavior change, addressing the struggle individuals face in maintaining fitness routines, particularly within the context of remote work environments like "Home Office."
AT A GLANCE
SOLUTION
Break App emerges as the solution, offering a comprehensive platform tailored to the unique challenges of staying active amidst remote work. By understanding users' daily routines and behaviors, Break App provides personalized workout plans, expert guidance, and a supportive community to empower individuals on their fitness journey.
RESULTS
Break App's innovative design was presented as the final project, garnering acclaim and recognition within the Interaction Design Specialization at UC San Diego. The app's user-centric approach earned accolades, validating its effectiveness in facilitating personal behavior change and fostering a healthier lifestyle.
THE PROCESS
How I got there
PHASE 01
Discovery
01.
NEEDFINDING
Needfinding, a qualitative user research method employed during the observation stage of my product development, was pivotal. It uncovered user pain points and preferences, guiding subsequent phases. Recognizing challenges with change, I delved into human behavior complexities, understanding motivations and obstacles. Through interviews and observation, I gained insights into users' routines, enabling me to design resonant solutions.
IDEATION
02.
For the ideation phase, I focused on observing users' "home office" activities, emphasizing their daily routines and organization methods, especially considering the shifts since the quarantine began. A prevalent theme from user interviews was the significant drop in activity levels, with many spending prolonged periods sitting at their desks. This insight led to brainstorming sessions centered around addressing sedentary behavior during home office hours, exploring solutions to integrate movement seamlessly into users' workdays, thereby promoting a healthier and more active lifestyle.
03.
REFERENCES
For design references, I explored various apps that address similar challenges and objectives to Break App. One notable example is MyFitnessPal, renowned for its user-friendly interface and comprehensive tracking features, which could inspire Break App's approach to monitoring and analyzing users' activity levels. Additionally, apps like Nike Training Club and Fitbit provide personalized workout plans and guidance, offering insights into effective engagement strategies and user interaction design.
Moreover, productivity apps such as Todoist and Trello offer insights into effective task management and organization, which could inform Break App's features for structuring users' home office routines. These design references provide valuable inspiration for creating a seamless and engaging user experience within Break App, ensuring its effectiveness in facilitating behavior change and promoting a healthier lifestyle.
BREAK APP
Harnessing technology to jumpstart a healthier lifestyle.
OVERVIEW
Break App is your ultimate fitness companion, revolutionizing the way you approach health and well-being. In a world where "Home Office" is the new normal, Break App understands the challenges of maintaining activity levels and offers personalized solutions to fit seamlessly into your daily routine. By delving into your work habits and behaviors, Break App provides tailored workout plans and expert guidance, empowering you to achieve your fitness goals. Join our vibrant community of like-minded individuals and break free from stagnant routines. With Break App, transform your fitness journey and embrace a healthier, more active lifestyle.
1. Consistency:
Ensure consistent aesthetic and design elements throughout the app.
2. Metaphors:
Maintain a familiar language and system that users can easily understand.
3. Clean Functional Design:
Keep the interface clear, understandable, and user-friendly
4. Freedom:
Provide necessary freedom for users to navigate through the app comfortably.
5. User Control:
Include indicators, such as the current day in the calendar, to enhance user understanding.
6. Flexibility:
Implement predictive features to assist users in navigating the app efficiently.
7. Recognition over Recall:
Design interfaces that minimize the cognitive load on users by making actions and options clear.
8. Show Status:
Ensure consistent display of progress indicators to help users keep track of their actions within the app.
9. Prevent Errors:
Include options for password or username recovery on sign-in screens to prevent user frustration.
10. Support Error / Recovery:
Clearly indicate actions users should take to avoid mistakes and provide guidance on error recovery
11. Provide Help:
Include help section with examples to assit users in solving sommon problems encountered within the app.
05.
PERSONAS
I created personas as fictional characters to embody distinct user types within our target audience. These personas were crafted based on thorough research and data analysis of real users, enabling us to understand their needs, behaviors, and goals. By creating personas, I was able to empathize with users, guiding the design process to better meet their expectations and preferences.
Flexi Fiona
-
Feeling overwhelmed by the lack of structure and routine in her freelance work.
-
Difficulty maintaining focus and motivation during long periods of solitary work.
FRUSTRATIONS:
-
Establish a structured routine that includes regular breaks for physical activity.
-
Improve time management skills to enhance productivity and efficiency.
-
Find innovative solutions to incorporate movement and exercise into her dynamic work environment.
GOALS:
-
Embraces a flexible work schedule to accommodate creative projects and personal interests.
-
Values autonomy and independence in her work, often switching between tasks throughout the day.
-
Struggles with maintaining a healthy balance between work and leisure activities due to irregular work hours.
BACKGROUND:
Age: 25 | Job: Freelancer Designer | Pronouns: She/Her
Active Alex
-
Difficulty finding time and motivation to exercise amidst busy work schedule.
-
Lack of clear guidance or tools to facilitate physical activity within the home office environment.
FRUSTRATIONS:
-
Increase daily physical activity to improve overall health and well-being.
-
Find ways to seamlessly integrate short activity breaks into his workday.
-
Enhance productivity by reducing sedentary behavior during office hours.
GOALS:
-
Has been working remotely for the past year due to the pandemic.
-
Enjoys staying physically active but finds it challenging to incorporate exercise into his home office routine.
-
Strives to maintain a healthy work-life balance despite the blurred boundaries of working from home.
BACKGROUND:
Age: 30 | Job: Marketing Manager | Pronouns: He/Him
Wellness Wendy
-
Difficulty balancing work responsibilities with personal health and wellness goals.
-
Limited resources and support available within the organization for promoting employee well-being in a remote work setting.
FRUSTRATIONS:
-
Lead by example by incorporating regular movement breaks into her workday.
-
Implement initiatives to encourage physical activity and wellness among her colleagues.
-
Improve overall health and reduce stress levels by integrating more movement into daily routines.
GOALS:
-
Transitioned to remote work recently after many years of office-based employment.
-
Prioritizes employee well-being and seeks to promote a healthy work culture within her organization.
-
Faces challenges in adapting to the sedentary nature of remote work and its impact on her own health.
BACKGROUND:
Age: 46 | Job: HR Manager | Pronouns: She/Her
PHASE 02
Synthesis
04.
HEURISTIC EVALUATION
Heuristic evaluation is a method to find design issues in software or prototypes by comparing them to usability principles. In this process, evaluators rate interface elements based on criteria like consistency and error prevention. Evaluators provide ratings or severity ratings for each identified issue, indicating the level of impact on user experience. The conducted evaluation focused on paper prototypes related to home office activity levels. By applying design heuristics, issues were identified, and solutions were proposed for a better user experience.
07.
STYLE GUIDE
The process of creating a visual style guide involved establishing consistent visual elements and guidelines for a product or brand. This included defining color palettes, typography, and other design elements to ensure a cohesive and unified visual identity.
PHASE 04
Prototype
"Why would I want to go to workouts if I'm seeing the stats?"
"I don’t know where to go from here"
"The screen looks plain It would be nice to have a message” "
08.
USER TESTING
During the prototype phase, I developed a preliminary version of Break App, which served as a visual representation of its features and functionality. This prototype allowed users to interact with the app's interface and provide feedback on its design and usability. Based on user testing, several improvements were identified and implemented.
One significant change addressed users' concerns regarding the design of the page displaying their schedules. A redesign was initiated to simplify task and workout presentations, with a condensed version of tasks initially visible, and an option for users to expand for more details. Furthermore, thumbnail images for workout programs were diversified to represent various races and genders, promoting inclusivity. Additionally, a new settings menu was introduced, featuring participant profiles and additional app settings for enhanced customization. Throughout the prototype phase, ongoing refinement and user feedback guided the iterative development process, ensuring Break App's alignment with users' needs and preferences.
Further analysis revealed the necessity of incorporating new screens into the app design, prompting me to create paper prototypes to visualize these enhancements. The additions included statistics not only on a daily basis but also weekly and monthly, allowing users to gauge their progress comprehensively, alongside implementing more personalized messages upon completing timers to boost user motivation.
08.
USER TESTING
During the iterative design process, I refined Break App's interface based on user feedback and ongoing analysis. Iterations involved fine-tuning visual elements, optimizing user flows, and incorporating new features to enhance functionality. Final designs were meticulously crafted, striking a balance between aesthetics and usability. Key improvements included intuitive navigation, visually appealing graphics, and seamless integration of new features such as comprehensive statistics tracking and personalized motivational messages. The iterative approach ensured that Break App evolved into a polished and user-centric fitness platform, ready to empower users on their journey towards a healthier lifestyle.
PHASE 03
Design
