- The Vision
- Gathering Requirements
- Brownie Points
- Funtimes v1
- Funtimes v2
- The Working Prototype (Launch Funtimes Timer)
The Vision
The Funtimes web app was built as a result of good old fashion team camaraderie. I was once a part of a remote team where each day, a 15 minute morning meeting was held to share status of all the tasks in play. While extremely helpful, the meetings became a bit monotonous – so a handful of us decided to spice things up a bit.
While each meeting was slated for 15 minutes, we noticed that depending on a few unpredictable factors, the meetings could last anywhere from 8 – 19ish minutes. We all know where this is going right? We had it down to a science – no sooner than 15 minutes before each meeting, we would place a number, representing the duration in minutes, into a chat. Person with the more recently passed duration ( Math.floor(endTime) ) won for the day. At the end of an arbitrary season, the person with the most points won a bag of their favorite snack.
The thing is, we didn’t really have a way to keep the “official” time. In order to avoid confusion we limited our guesses to minutes, because with no central timer, disagreements on how many seconds had passed were inevitable. Exciting as those 15 minutes (or however long) were, the experience could use some improvements.
Based on this specific scenario – I designed the Funtimes web app – a timer that is run off your local environment and managed by a synchronized start and end time.
Gathering the Requirements
An Easy transition
While designing this experience, my biggest concern was making the transition to using the timer would be easy – making sure I wasn’t adding extra steps to our already working system. For example, in a chatroom, users are required a name, but in our current flow, our names were already assigned. We also didn’t need to type in a group name, we just clicked the group. All that was needed was to type a number so I had to make sure there was a way to pre-fill both a users name and a room name.
This was solved with a URL. And when the user arrives at the page, the input for the time is auto focused and the user can easily enter their minutes and either hit “Enter” or click “Go”.
https://funtimes-portfolio.glitch.me/Space/standup?name=Kaitlin
Prominent Winner
Once in the room, the user is assigned a color for two reasons. 1) In addition to their name, the color will help other users identify messages (their text appears in the same color) and 2) As each user assumes a w inning position, a bar at the top of the screen appears with that users color – so can you easily tell who is winning at the moment. To alleviate the pressure on the user, you a random color is initially picked. If you happen to get the same color as someone else, you can change it once you’ve entered the room. This is to 1) Yet again ensure the easiest path to participation and 2) Necessary to avoid confusion of the winner(s).
Accurate Time
The very reason for the app was so that we could accurately track time. To do this, I decided that the app would use a local Date/Time and web sockets to communicate start and stop flags and to provide current times if a timer had already started when a player joined an existing room. To build a working prototype, I used the socket.io library.
Brownie Points
Unnecessary, but 100% cool, features of the app.
Rudimentary Chat Box: Mainly for logging who joined/left the room and starting, stopping, and restarting of the timer – but also so that we can still carry out the friendly banter as we watch the ticking clock.
Custom Avatars: A little bit of branding never hurt – part of building good products is being proud of your work. The Timer app features some of my favorite characters designed for my Kait the Ambi brand.
Timer Mode: A savvy designer must always keep scalability in mind when designing so I built in a countdown timer too.
Funtimes v1
Once I had my prototype working it was time to put the Funtimes app through the first round of user testing. I pinged the group to visit the URL of Funtimes.
- I included the room name in the URL so that they wouldn’t have to fill in the room name
- I purposely left off the name parameter to give everyone a little freedom
- Then later followed up with a tip on how to add it to the URL in case they didn’t want to add if again the next day
- I did not prompt them on how to enter the minutes because I wanted to see if the mechanism for the minutes was intuitive
- I did let them know how to change the color because I knew this would NOT be super intuitive
Everyone joined successfully and some of the the initial feedback:
- Great that the bets go in at the beginning because you you can make your guesses without being influenced by others
- Positive feedback on the avatars
- Best of all, there were zero questions on how to use!
But we all know nothing is perfect on the first try. About a minute after starting the timer, the app began to mysteriously boot people out of their sockets. And not only was it being rude to that user, but sometimes it wouldn’t update the other user’s screens and everything including some of the timers were out of sync. Ultimately bringing my hopes of a useful app crashing to rock bottom. I later discovered it was because user’s were placing there windows with the app in the background causing the socket to disconnect but not always update. The issue was fixed for v2!
Funtimes v2
UPDATE 9/1 – Relaunched and testing of v2 was a success. No users were kicked off during the duration of the timer! I will continue to collect feedback and suggestions.
The Working Prototype
Traditionally, a UX/UI designer would use a tool like Sketch or Adobe XD to create a prototype. I do believe in prototyping tools because they are efficient in communicating concepts. I also find a lot of value in being able to build a working prototype that uses real logic. Every team will have different steps to carrying out these processes. For this particular project – with my team of just me – I had the luxury of building and testing my prototype at the same time.
I used the popular dev server glitch.com and vue.js for the main development and then a few smaller libraries for some features. Please feel free to use the Funtimes prototype and send feedback!