At a glance
This app helps Monday users play to their strengths to get more done.
Built, from scratch, for this hack. See more on Optino.app.
- Reflection Overview
- Energy Level Breakdown
Item View (Beta)
Monday APIs used
Repo access? It's private for now. If you'd like access, give us a shout!
We're 100 Shapes and we're on a mission to energise work, for everyone. For the past eight years, we have been creating tools, products and features for companies such as BBC, ITV, Facebook and Burberry that solve common workplace problems: making work more enjoyable.
We are now on a new path; creating our own products that give people the tools to be their best at work. We know that people work in different ways, so we need to tailor the experience for each individual.
That’s where Strengths come in; they are our unique skills which can be applied to different situations to help us get things done - making work more joyful. In order to discover your personal strengths, we needed to find a way to encourage the daily, weekly, monthly practice of reflecting on what is working and what isn’t. The discovery is about recognising when individuals are at their best; acknowledging what strengths are at play, and then finding opportunities to use those strengths more.
We want to give people the tools to be more aware of themselves; how they can grow, celebrate successes and have meaningful conversations with their team. And there is no better place to do this than where employees are working - in the middle of their workflow on monday.com.
What it does
We added three new features to monday.com:
1. Reflection View While a monday.com user is working through items in their workflow, Optino allows them to reflect and track how their work is making them feel - choosing from:
The practice of asking how energised someone feels is crucial to discovering personal strengths; energy is about what you find motivating, what you enjoy doing, and what gets you out of bed in the morning. We’re giving users the opportunity to discover, track and learn from what motivates them and what does not.
2. One-to-one View One-to-ones are the most powerful tools that teams have to affect performance, to establish trust and to build strong relationships. From our research, teams are unprepared, ill-equipped or simply in the dark about how to capitalise on this time. We wanted to give managers, team leaders and employees the structure to be able to run effective one-to-ones as well as facilitating a conversation around Strengths. Optino embeds this preparation inside monday.com and displays it alongside the employee’s items and private notes to ensure their discussion stays focused on the work as well as offering opportunities to develop their strengths, share feedback and set goals together.
3. Approach Cards We wanted to encourage employees to view their items ahead differently, in a way that played to their strengths, that energised them - so we created Approaches. The approaches are surfaced in a Board View prompting individuals to start seeing their work differently. Compounded over time, the Approaches will accelerate individuals toward better, more positive work habits, and will change the way teams communicate, work together and achieve their goals - while remaining energised.
How we built it
To kick-off, we ran a two-day workshop with our team of designers, developers and employee experience executives to decide where best to introduce the benefits of strengths to monday.com. After a few rounds of iteration, we pitched our idea to our workplace, positive psychologist who helped us to refine the concept.
Our designers then began wireframing and prototyping the user flows within Figma: starting with stylising the wireframed elements using Mondays Design System as our single source of truth.
Meanwhile, our development team began by studying the example projects on monday’s Github. There was the ‘Quickstart Project’ as well as Dipro’s collection of repositories. They helped the development team understand how to integrate with Monday’s API and respond to events like filtering and Context.
We organised our codebase as a monorepo with our API app living alongside the Monday app.
We published a custom TailwindCSS for our version of Monday’s Design System too, this was also a separate project within the repository.
The docs were helpful and it was easy to get up to speed quickly. To get the hang of things we built the background settings app, like everyone else. From there, we kept adding features.
React.js is our go-to framework so we started with create-react-app, but we switched to Gatsby.js for its pre-caching, PWA features that way, we’d get a faster app.
We used Framer-motion to build some transition effects and loading animations.
Given London’s COVID-19 lockdown, it was important to keep in touch with the team and share progress. We regularly created loom videos as we went, and developed all components with Storybooks to make it easier for remote reviews.
While the development team finalised the app and squished the bugs that popped-up through user testing, the design team were busy coming-up with a name (hence the devpost url being wrong), brand, logo and website for the product.
A bunch of features got developed, but got pushed further down the line as we opened up comms with the Monday team and new priorities came to light.
Speedbumps and frustrations
It was really easy to follow the monday.com design system but would have been great to have a Figma or Sketch file to begin with, this would have saved time setting up components.
Overall, the build was smooth, but Ngrok was a bit slow for development as we have a free subscription, so we often hit the bandwidth limit and had to restart the server. We fixed this by “publishing” a URL of localhost – it seemed to work completely fine. That way, we also got the benefits of live-reload and debugging.
From a backend point-of-view, we struggled with Auth for a while. We were treating the result of
monday.getSessionToken as an OAuth token before we got to the bottom of understanding that it wasn’t. Monday’s
What's next for Optino
Whilst the hackathon gave us a solid deadline to work towards, it meant features we wanted to design and build had to be moved into our backlog. Once the hack is over we will assess any feedback from monday, further test the MVP with users and re-prioritise features and tasks.
Some features in the backlog are:
Personalised strengths profiles As an employee-experience focused agency, we regularly send Strengths surveys to our team. This helps us understand which approaches we find energising and which we find draining. Soon, we plan to Include a similar survey in Optino that allow us to tailor the approach advice for each individual user.
Assigning better team Once we understand where an employee's strengths lie, whether through our survey or via a One-to-ones, we’re able to give guidance on which members of a team would be best suited to a particular item or task. For example:
- Who would enjoy this the most?
- Who is most effective at this?
- Who wants to practice this?
- Which team members compliment each other well?
Widgets Giving managers an overview of their teams energy levels at a glance is something that would transform how managers interact and check-in with their team. Using mondays widgets we can surface information such as:
- Overall team energy breakdown
- Project team energy breakdown
- Approaches being used and their effectiveness
- Drained team members who might need a quick check-in
- Most selected approach
- Highest / lowest energised team member
- Total energised / drained items completed
- Quick tips - nudge drained employees in the right direction
One-to-one Sharing With some minor privacy adjustments we could facilitate, and document, One-to-ones directly within monday. Either via Google doc integration or via Monday’s forms feature, it would simplify the process for users and make for a better sharing experience between manager and employees.
Overall we really enjoyed putting together Optino for this hack, the deadline helped keep us on track and it has set us on the path for our new company strategy.