Cards For Productivity
If We Have To Start Somewhere…
For anyone who follows either mine or any of Intoware’s social media posts, you may be aware that after many weeks of hype and cryptic social posts, last Friday was the highly anticipated debut of Contributefest. This event, devised by our CTO James Woodall, was a way for us tech nerds to give back to the tech community during these dark COVID19 days.
WWE Eat Your Heart Out! A Beautifully Ironic Logo, If I Don’t Say So Myself
With many of my friends and colleges set to work creating interesting articles about misconceptions in developer contracts, high tech break downs on Android background sync, artificial intelligence lead RPG gaming, Kubernetes clusters (Apparently not a delicious cereal) and exploring new avant-garde coding languages, as a creative operating in the tech world, I wasn’t hugely sure how to make my presence felt in such a development lead jamboree.
With all of the aforementioned projects being far too impressive and complex for my right-sided creative brain to comprehend, I dusted off my crayons, got my thinking cap on and set about getting some good old fashioned design work done.
Forgive Us, Mike Cohn, For We Have Sinned…
Our Lord & Saviour Mike Cohn, Pioneer Of Story Pointing Cards
For the past few months, Henry Bettany (a developer at Intoware and friend) and I have been talking about joining forces and working on a project together, and with Contributefest quickly approaching we thought there was no better time to execute this than now.
After numerous brainstorming conversations and a few refinement sessions, we settled on creating a web app that would help developers remotely point stories during sprint planning sessions.
While the concept of pointing stories digitally wasn’t necessarily groundbreaking or new, we noticed a very obvious gap in the market for an application that offered this service whilst also looking good doing it (No pressure Tom), and so with that Cards For Productivity was born!
Keep It Simple Stupid!
We had the idea, and we had the hopefully non-copyright infringing name, now I needed to get to work and try to bring our vision to life! I’m a big fan of the infamous KISS design approach and for an idea as beautifully simple as this, I thought it should 100% be applied.
I took inspiration from popular web apps such as Slack and Kahoot. These apps are used in professional environments by hugely impactful companies, and educational institutions, but still manage to maintain a light-hearted nature and sense of fun. By following these principles I think we managed to end up with a vibrant minimalist design that is not only functional but also easy to use.
My Sketch Layers Have Never Been So Neat!
Player 2 Has Entered The Game
With my designs complete, it was over to the dark arts of development and Henry to do his thing. I’ll leave you in his capable hands to explain how he went about building our magnum opus…
Thanks, Tom. Cards For Productivity was built using a few different technologies. I used ASP.NET Core 3.1 to create the back-end, utilising SignalR to push data in real-time to the front-end clients. On the front-end, I decided to use Angular 9; Angular is a framework that we use extensively over at Intoware when creating web applications.
With the appropriate tools in hand, I set off developing Cards For Productivity, starting with the back-end REST APIs that would be used to create and join story pointing sessions. Throughout the development of the APIs, I used Postman to test and refine the various endpoints. Once I was able to create a session and join it through Postman, I moved on to creating the front-end.
Postman - The Collaboration Platform For API Development
Tom’s clean and thoughtful designs were easy to replicate and build in Angular. Thanks to my knowledge of the framework that I acquired during my time at Intoware, it was easy to plug the front-end into the back-end, and within a couple of hours, I was able to create and join sessions from the front-end. I also used Bootstrap to help with building the layout of the website, and Angular Material to make things like adding ripple effects to button clicks very easy.
Both MVPs In Their Own Rights!
However, at this point, that was all the user could do. They couldn’t view stories set by the host, or select the story points that they would like to assign to each story. This is where SignalR comes in. I created a SignalR Hub on the backend — this is what allows the server to send messages to connected clients. SignalR can send messages in a few different ways: to every connect client, to a group of connected clients, or individual clients. With that in mind, I added a way for clients to ’subscribe’ to a group so that they could receive messages sent to that group from the hub. In this case, a group was created for each session.
Building from this, I added various types of messages that could be initiated by the host, such as a “session start” message which told clients that, you guessed it, the session had started. Other messages include “story changed” or “story points revealed”. Similarly, clients can send messages to the hub telling it which points selection they had made for the round.
After these messages were in place, it was just a case of putting all of the pieces together, testing the website, and refining it.
“It’s Alive! IT’S ALIVE!” — ℌ𝔢𝔫𝔯𝔶 𝔅𝔢𝔱𝔱𝔞𝔫𝔶 2020
And there we have it, folks! I’m proud to say that V1 of Cards For Productivity is out there and live for the world to use!
Designed By Tom Yaxley, Developed By Henry Bettany, Powered By Intoware
Feel free to give it a spin at www.cardsforproductivity.com it’s completely free and in the current remote climate, we hope it will help at least a few people out.
We already have some quality of life improvements in the works so CFP will continue to evolve as we grow as developers and designers. It would be an absolute honour for us both if you would give it a go and join us in this journey, thank you very much for reading, and stay safe out there…