COLAB30 - Web App

Spork

A WebApp that helps individuals with chronic illnesses to track their energy use, discover and share insights to effectively communicate their lifestyle

Problem Background  

Individuals with chronic illness and pain have reported a feeling of difference and division between themselves and able-bodied individuals.

Living with a chronic illness is debilitating and forces an individual to be acutely aware of how they use their energy. Seemingly simple, everyday tasks like making breakfast, or wearing boots, can place a significant strain on individuals, limiting their ability to complete necessary tasks and increasing the risk of a flare-up. The constant pressure to be mindful of how they use their energy can itself be an exhausting endeavour. Additionally, they may struggle to communicate their needs and limitations, leading to a disconnect with those around them. 

As a team, we want to live in a world where people are more understanding of one another. To that end, we want to build a product that can improve the quality of life for individuals with chronic energy limiting conditions. We would like to help these individuals more easily track their energy usage to give them a deeper insight into their energy consumption and enable them to share with and educate able-bodied individuals about their energy usage. 

User Research Insights

We initially conducted secondary user research on platforms like Reddit, Facebook groups and Discord servers to better understand our target customers and their pain points. From the secondary research, we were able to identify what we felt were the biggest pain points in our users: the inability to clearly track their energy use based on their unique energy needs, and the difficulty in effectively communicating their lifestyle with others. Once we felt comfortable in understanding our customers, we started conducting user interviews to get a better idea of their pain points and found that they largely aligned with what we had concluded. 

Solution Mockup

As we were brainstorming potential solutions for our users’ pain points, we came across an analogy devised by Christine Miserandino. She had created the Spoon Theory analogy in 2003 to explain her lifestyle to a friend who wanted to better understand the lifestyle of someone living with Lupus. We felt that the spoon theory analogy could serve as an effective representation of our users’ daily energy availability and the number of spoons each task may consume. Keeping the analogy and user research in mind, we created our user persona, user flows, and Lo-Fi which in turn helped us gather additional user feedback for our MVP.

Feedback 1

The general reaction to our Lo-Fi design and user flow was quite positive. It seemed that users were genuinely excited to have a product that met their exact needs. 

Highlighted user reaction: This kind of app is something I have been on the hunt for myself for quite some time, so I am very excited about it!

From early in our product design, we had intended for the user to have full control over their energy availability and expenditure. To this end, we wanted them to have the ability to change their daily spoons allotment based on flare-ups in their illness and how they were feeling. However, when we presented this to users, we discovered that while they appreciated the control, they did not predict that they would change the available spoons frequently. We learnt that our users considered their flare-ups to be completely separate from their energy availability. Additionally, users commented that the daily check-in that we had incorporated in our user flow might be an additional cognitive load and something a little less intrusive would be preferable. 

Based on these learnings, we refined our Hi-Fi mockup. We added the functionality to log two types of activities: spoon consuming activities, and flare-ups. We added an optional banner to the top of our dashboard that would ask the user how they were feeling to allow them to log qualitative information as well. 

Design Learnings

Once we had a Hi-Fi wireframe and started work on the prototypes, we began regularly updating potential users on our team’s progress. This allowed us to gather feedback and iterate on our design and user flows.

We learned that flare ups are a lot more common than healthy individuals think and the effects from a flare up can linger for a few days. Another important factor was that the act of tracking itself is something that takes time, energy and a cognitive load.

While it may be useful to quantitatively track energy expenditure, our product must be able to strike a balance to ensure that it does not inadvertently place a strain on our users when they utilise our product to track their energy use. Based on this feedback, we made it easier to log flare ups and reduced the complexity of some of the activity and mood logging to ensure that the user experience is very simple and takes the least amount of effort.

Feedback 2

Our users were very excited to see the Hi-Fi mockup and were keen to offer feedback. They were very interested in the type of insights that the product could offer. Particularly, they wanted to find out if it would be possible to identify correlations between their flare-ups and activities. Unfortunately, this level of insights was determined to be out of scope for the MVP, but was added to the backlog to ensure that the valuable user feedback was not lost. 

Future Work / What’s Next

While the CoLab experience has been short and sweet, our team is highly motivated to continue working and learning together! We are very lucky to have dedicated user communities that are excited to offer feedback on an ongoing basis and would like to iterate our product based on their inputs. The feature that was most highly requested (rather loudly requested) was the ability to integrate Spork with wearable devices. This was far out of scope for our MVP, but would be an exciting challenge for our team to tackle and an excellent enhancement for our users. 

Technical Implementation Details

Where is it hosted? 
  • Front: Netlify.com
  • Back: Render
What is your tech stack?
  • Backend framework: Flask w/ SQLAlchemy
  • Frontend framework: React.ts
  • Css framework: TailwindCSS w/ DaisyUI components
  • Other tools: AG Charts used to create data visualisation

Why We Chose These Tools

Backend Framework: Flask with SQLAlchemy

We chose Flask because it is lightweight, flexible, streamlined and easy to set up. For database management, SQLAlchemy was picked since it integrates smoothly with Flask. 

Frontend Framework: React.ts

React with TypeScript is our framework of choice for the frontend. React’s component-based structure is perfect for reusing code and keeping things organised. Adding TypeScript helps catch errors early and makes the code easier to understand and maintain.

CSS Framework: TailwindCSS with DaisyUI Components

TailwindCSS is a fantastic tool for styling that puts utility-first, allowing us to build custom designs quickly without writing tons of CSS. DaisyUI adds pre-designed components, which speeds up the process and ensures the UI looks modern and clean.

Other Tools: AG Charts

AG Charts were chosen for data visualisation because they are powerful and customizable. They support various chart types and make it easy to present data in an interactive and engaging manner.

How to Improve the Product’s Implementation

  1. Better User Experience (UX):
    • Ensure that Spork is accessible to everyone, including individuals with disabilities
    • Accelerate the UX by optimising load times, utilise lazy loading and tweaking assets to be more lightweight
  2. Scalability and Maintainability:
    • Clean up the code, follow best practices and document the code to make it easier to manage and extend.
    • Add automated tests to catch bugs early and make future changes smoother.
    • Set up CI/CD pipelines to make deploying updates faster and more reliably
  3. Better Data Management:
    • Use caching (like Redis) to speed up data retrieval.
    • Optimise database queries and use indexing to make data operations faster.
    • Consider using GraphQL so clients can request only the data they need.
  4. Visual and Interactive Enhancements:
    • Add engaging CSS animations and transitions to the UI
    • Ensure that the design works well on all devices, including mobile.

These improvements can make our product better by improving the user experience, performance, and make it easier to maintain and scale.

Learnings

Product Manager Learnings:

Viswajit Kumar

Effectively manage a cross-functional team across 4 different time zones and adhere to agile practices. Identify and adapt to the different working styles of my team members to build rapport and trust. The value of regular team meetings to ensure that we are all invested in a unified product vision. Logically and systematically prioritise all our tasks to ensure that we would deliver a MVP by the end of our cohort.

Designer Learnings:

Fabian Gutierrez

Effectively communicate design decisions and work with a team. The importance of communicating design decisions early and frequently to avoid any hiccups or confusion later in the process. Be flexible with constraints that you may encounter along the way when it comes to my designs.

Developer Learnings:

Jeff Chebul

Build a MVP alongside a backend developer and a cross-functional team in an agile work environment Communicate about challenges and feasibilities to ensure a well prioritised backlog.

Developers Learnings:

Chris Fletcher

&

Work together as a team to build an amazing product. Gain new perspectives that would help solve complex programming challenges. Express potential technical challenges in an easy-to-digest manner for the non-technical team members.

Full Team Learning

Having all of our team members across various time zones was challenging at first until we found a system that worked for us as a team. All of us faced significant personal hardships during our cohort which brought us closer together as individuals and motivated us to work harder professionally. Consequently, we are very keen to improve Spork and deliver a one-stop energy management solution for our users!