Flowspace
Mobile app prototype
Overview
What
Mobile productivity app for Stanford University class CS 147: Intro to Human-Computer Interaction
Who
Helen He - Design guru
Karen Ge- Creative technologist
Roy Nehoran - Hacker extraordinaire
Erin Smith - Curious builder
Timeline
Jan - March 2021
Skills and tools
Design thinking, product realization, prototyping, Balsamiq, Figma, React Native
Final class project website
Flowspace official project website
Background
This project was done as part of the Stanford University course CS 147: Intro to Human-Computer Interaction. Our problem space was about health & wellbeing. We specifically wanted to investigate how people who have shifted to remote work during the COVID pandemic are adjusting to an all-virtual workplace.
Needfinding
Focus on extreme users
We interviewed people from both sides of the remote-work spectrum: those who have been working remotely long before the pandemic, and those who were originally working in highly in-person jobs and had to transition to virtual.
Common themes
Control
Want to be productive
Desire to avoid distraction
Feeling stressed and overwhelmed
Constant connectivity
Notable quotes
“People aren’t equipped yet to realize that in some ways, they might actually be helping themselves by not being always available.”
“It’s kind of like this screen is a duty and it feels like my master at this point.”
“It’s about having a good understanding of what you need to accomplish, and which info channels you use.”
Pinpointing the problem
Burnout by info overflow and 24/7 connectivity
Notifications, messages, other distractions
Difficult for right environment for productive work
Final problem statement: How might we help people get into productive state when working and stay there?
Solution
flow - /fləʊ/
“The mental state in which a person performing some activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment.” - Wikipedia
Coming up with “Flowspace”
Mobile app
Concept inspired by the psychological definition of “flow state”
Uses guided sessions to help users enter their own flow
Also help users develop long-term flow habits with self-reflection and long-term project planning
Main functionalities
🌊
Do flow session
Set up flow environment, flow short-term anytime
💭
Reflect on flow session
Log and track completed flow sessions
📅
Plan long-term flow
Set up flow routine for long-term projects
Prototype iterations
User feedback and changes
Users wanted to flow for long-term goals too, not just a generic flow session
Fix: Added “select long-term goal”
Users wanted to be able to pause or stop flow session
Fix: Added pause and stop buttons
Users wanted to see flow history both visualized and written out
Fix: Added tabs so users can see visualized data and flow history log
Users wanted to directly start flowing for long-term goal
Fix: Added “start flowing” button for each long-term goal
Users confused on how to delete goal
Fix: Added “delete” button
Prototype evolution for flow session functionality
Prototype evolution for reflect functionality
Prototype evolution for long-term planning functionality
Final prototype
Extras
Moodboard
Fun fact: Flowspace's visual branding was inspired by how the Disney movie Soul depicted what a flow state looked like. It was a blast working with the gradients and mixing warm and cool colors!
Moodboard for Flowspace