Overview
Breaktime is my teams' award winning submission for the BrainStation's Industry Project Hackathon. I worked with other UX Designers (Rachel W. & Dakota N.) and Web Developers (Ahmed R., Elke D., & Veranika K.).
Product: Breaktime is a desktop web app that helps reconnect and re-engage employees.
Role: Product Designer
Skills: UX Research, Product Design, Cross-Collaboration, Presentation
Timeline: 24 hours
Problem Space
At the start of the hackathon, we were given this problem space: How might we use a digital solution to address the challenges of a post-pandemic world for professionals and businesses in the BC area?
We began with a discovery phase to see how employees have actually been feeling working remotely.
Research
With research, we found out the following:
• A total of 40% of workers struggle with collaboration & communication, as well as loneliness.
• Workplace cultural effects were stronger than influences of the labor market and demographic characteristics. It is estimated to have resulted in over 6 million dollars' difference in HR costs between firms with different cultural values.
• Social isolation in stress leads to decreased perceived remote work productivity
Source: The 2020 State of Remote Work
Ideation
Topic Selection
To start, our team decided to quickly write down any solution ideas we had right after reading the prompt. We then categorized this into themes such as Job Search, Management and Workplace Wellbeing.
After discussing, we voted Workplace Wellbeing as the topic that resonates with us most.
Work Wellbeing Notes
Pain Points & Motivations
To further explore the topic, we brainstormed pain points and motivations that are associated with Workplace Wellbeing.
Pain Points ( left), & Motivations (right)
Themes & Insight Statements
Theme 1: Team Support
Insight Statement: Workers feel lack of value and support in a remote workplace.
Theme 2: Work Balance
Insight Statement: Workers lack a sufficient amount of breaks and would like to have a say on their schedule.
Theme 3: Environment
Insight Statement: Workers lack healthy and comfortable remote environments
Relevant How Might We's
How Might We
How might we foster a social remote environment so that teams can remain connected, satisfied and engaged in the workplace culture?
How might we foster a social remote environment so that teams can remain connected, satisfied and engaged in the workplace culture?
Solution
A platform for reconnecting and re-engaging
A desktop web app wherein employees can do the following:
• Play work-appropriate version of social games with ease & earn points
• Join department or company-wide events
• Check the leaderboard
• Shop and redeem points for swag and gift cards
Competitive analysis
The current space only consists of unprofessional templates and articles of suggested activities that the workplace would have to organize.
Remote Work Bingo (left) & War of Wizards (right)
UI Inspiration
Landing Page
We were inspired by the cards, left navigation panel and bright colours from these UI designs.
Landing Page UI Inspirations from Dribbble
Lobby
We wanted to create an interactive space for when users wait for others to join. We took inspiration from existing games such as Gartic Phone, Among Us and Jack Box.
Jack Box (top), Among Us (bottom left), & Gartic Phone (bottom right)
Leaderboard
We wanted to incorporate a gamification aspect so that employees are encouraged to take their well-deserved break and be involved in the workplace culture.
Leaderboard UI Inspirations from Dribbble
In-Game
We took inspiration from the UNO online game for the card, point-keeping, table and profile photo display layout.
UNO online game UI
Concept Sketching
Given the time constraint, my team only had 1 series of sketches before moving onto the HiFi Prototype.
Concept Sketches
Styles & Branding
Typeface
Inter is a highly readable, open source typeface crafted specifically for computer screens.
Wordmark
We decided to go with the brand name breaktime because it connotes the idea that even though you’re working hard, it is important to take that break!
We picked the task flow from Jonathan The Depressed Developer's perspective.
The task flow begins as Jonathan hops into the web app and opens up the chat. He quickly asks if anyone else is on their break and is down to play. Three other people join, and everyone decides to play a clean version of Cards Against Humanity.
Jonathan is sent into a lobby. Everyone’s video feed is on and they chat around the campfire as they wait for others to join.
After some time, Jonathan wins the game and gets to see the final scores and Tina's stellar play.
He checks the company wide leaderboard and see that he's currently ranked 4th! Jonathan realizes that he's so close to the top monthly prize from HR, and is encouraged to play again later.
Hand Off
Throughout the design process, we were openly communicating with the dev team to understand which elements or features are feasible given the time constraint. Therefore, our design hand off went smoothly and was on schedule. We made sure that the devs are comfortable and set up in Figma for redlining.
Although no longer working synchronously, our team still maintained open communication for any questions or further adjustments. The chat function was a last minute idea from the developers, but we were able to create a design and incorporate it within the task flow without any hassle.
You can check out the developed product on my teammate Elke's Github.
Conclusion
Design Impact
During our presentation alone, we got real feedback from managers and team leads saying how they would love to have the app and could envision using it with their own teams. It was encouraging to hear that it resonated because this is the exact gap we sought to fill in the current remote and hybrid work culture where employees are feeling increasingly burnout and detached.
With a fun and easy-to-use platform, Breaktime focuses on connecting and engaging employees in a safer and interactive manner. It features all the classic games people know and love, but without bombarding users with ads, tedious onboarding, and zoom breakout rooms.
Key Takeaways
I learned a lot through this project as it was my first time working with developers and engaging in industry cross-collaboration. We only had 24 hours to design and develop the project, so efficiency and open communication were key. To be successful, we had to trust one another. The developers trusted the designers with research, ideation, and design, and after handoff, we had to have confidence in our developers to follow through on their end. Furthermore, our communication allowed us to be more flexible.
It was also helpful that despite the time constraints, my team still followed the fundamental UX processes, which I feel gave us the edge that led to our victory in the Hackathon challenge.
Due to the enthusiastic interest expressed by classmates and industry professionals, my team has agreed to fully develop the rest of the app in the coming months.