CheckIn
U OK?
Supporting your mental well being.
By Dora Tamas, Tony Jin, Carmen Massel, Garren Sharpe, and Brock Weston
What is U OK?
CheckIn is a technology company that created U OK?, a web-based application that serves to facilitate a platform for businesses to monitor, record, and improve employee mental health, socialization, productivity, and sense of value and belonging to the business while improving productivity.
Before we dive into the specifics, click HERE to watch our first ever pitch to Benevity about what CheckIn and U OK? are and how it can be a valuable addition to your business!
U OK? is the web-based app that will be integrated into any company’s intranet so that when employees log on, they are presented with this short, easy survey. The survey is semi-optional, meaning that it can be skipped, but must be completed twice weekly. The questions revolve around mental health, social engagement, and productivity. Employees, depending which area — if any — they require additional support, can choose that following the completion of the initial three questions. These areas have additional questions to better understand employee problems and how human resources (HR) and executives can help mitigate or solve them. From this form, the employee will be “Zapped” an email that will provide additional resources. These resources can be more links or phone numbers to help with mental health, a planning platform to help facilitate scheduling between coworkers for work or non-work-related things, or a connection with HR or an executive to connect with the employee to address productivity or sense of value concerns.
The U OK? mobile and tablet applications are currently in development and are projected to be completed by the end of 2021.
How It Came To Be
This idea emerged from the ever-changing and growing problem that working from home can have. In particular, the problems arising from the situation that Benevity, a Calgary-based company that recently reached unicorn status at a $1B valuation, is facing. They recently changed CEOs and they are now worried about the state of their employees working from home regarding their lower productivity, decreased engagement and connectivity to Benevity, and their overall mental health.
In our design thinking process, our team identified the need to integrate many technological solutions to create a platform that could mitigate or solve some of these problems. Obviously, there exists no panacea for all ailments, even in the digital world, so we determined there were a few things we needed to address.
We fixated on employee mental health as our primary concern because with improved mental health, employees will be happier, healthier, more productive, and feel committed to a company that helps them be their best selves.
Next, we examined social engagement and camaraderie. With the WFH-induced isolation, we concluded that a platform where employees can schedule meetings, meet-ups, and activities outside of the workplace would improve socialization, minimizing the sense of isolation, and reducing the feeling of “always working” even when they are at home.
Finally, one of the main problems that WFH presents is a disconnect from co-workers and from the company itself. This can manifest in several ways including decreased productivity, a lower sense of belonging or purpose, and disengagement from their work. We thought, let’s make this a bit more personal. So, we conceived an idea that would bring HR and Executives onboard to engage with employees to improve that sense of belonging and purpose within this company. It emphasizes the importance of the work done and the acknowledgement of the employee to the executives is a huge confidence boost. We identified the need to create a platform to enable companies to better support their employees, retain talent, and encourage personal and professional growth.
Throughout our planning process for CheckIn and U OK?, we considered ways to make the web app human-centred. To routinize platform usage, the app has to be quick, easy, eye-catching, and linkable to important information without cumbersome filtering. We chose to offer the employee some decision-making autonomy, which includes both an opt-out option and the ability to select, at the end of the process, an area they feel they may need more help or support in. We felt that this constant reminder of available support options may encourage employees to be more honest about their current state of mental health, social engagement, and productivity/connectivity.
Technological Tools That We Used
Here we will walk you through the different tools we integrated together to create our minimum viable product (MVP) for CheckIn and U OK? and how we see them providing value to your business.
Technological Tool #1 — Canva
It has been taught to us in many courses throughout the Master of Management program that developing a memorable brand image and logo is essential to developing a successful business. A common tool that is used by individuals for this purpose is Canva, a graphic design platform with a simple user interface intended to help amateurs and experts alike develop professional looking graphics and products for a variety of uses. We used Canva in order to develop logos for both our overarching tech business, CheckIn, and our web-based desktop application, U OK?
Step 1: Starting Up
Canva allows users to create a profile, which is a step we had already completed. By having a profile, you can save and refer back to designs, as well as share them with colleagues or have other people collaborate with you. There are several easy-to-read menus and toolbars, making it simple to navigate the platform. Another important note about Canva is a freemium product — that is, there are free and “pro” paid versions of the program. A member of our team has a pro subscription, allowing us full access to all elements of the program. This simply includes more templates, elements, and add-ons (Figure 1.1).
Step 2: Understanding Usability
Canva has a series of tools that include pre-existing templates including presentations, posters, logos, infographics, social media posts, and even the ability to create a custom sized document as noted by the number 1 in the screenshot below. The bar labelled number 2 across the top includes a search bar to look for a specific type of document or find a template. Bar number 3 down the left-hand side has more capabilities for sharing with collaborators, and access to all of your designs.
The interface for the design portion of Canva has the main toolbar on the left side where you can upload elements from your desktop, add elements from Canva, add audio, text, backgrounds, and more. The process of dragging, resizing, recolouring, and removing elements from your design is very intuitive and straightforward (Figure 1.2).
Step 3: Logo Creation
We conducted the logo creation process twice in two different ways. For our UOK? Logo, we developed it entirely from scratch, and we adjusted a pre-existing template for our CheckIn logo. First, we decided on using blue (#67C1F6) as our colour in both logos. Prior to choosing this colour, we did some research pertaining to mental health and colours and found that blue is the most common colour to be somebody’s favourite, and therefore, it is seen as non-threatening, peaceful, and stable. (Cherry, 2020, para. 4).
UOK? Logo — From Scratch
We started this process by selecting the logo template that can be seen right on the home page. If it doesn’t appear automatically, you can always search for “logo” in the search bar. This template gives you a 500px x 500px space to work with and is identical to the template seen in Figure 1.3.
Next, we chose a font that we felt was aligned with the values of both our business and the intentions behind choosing the colour blue. We also opted to design the logo in a square, as we considered that the nature of the application is both desktop and eventually mobile, which both use a square shape for their icons.
Finally, we included a small cartoon image of a brain that was found using the “Elements” tab in the main toolbar on the left side of the screen, by simply searching “brain”. This helped us to carry the connection to mental health through our branding.
CheckIn Logo — Edited Template
For our CheckIn business logo, we wanted to try and match the energy, branding, and values depicted through our UOK? Logo. Our starting place was to ensure we carried the same blue colour through to this logo. Rather than developing another logo from scratch, we decided to browse through the available templates and search for something that we could adjust to fit our brand. Figure 1.4 shows the original version of the template we used alongside the version we created for our company, CheckIn.
Step 4: Downloading and Using the Completed Product
Once you are satisfied with your design, you can save, download, and access the design in multiple formats. For our purposes, we downloaded everything as a PNG, as this ensures the highest quality image. There is also an option when downloading to have a transparent background (Figure 1.5), so we downloaded both logos for a second time with a transparent background to be used for our website, pitch deck, and other purposes.
With these steps completed, we produced two professional-looking logos to brand our business and product.
Technological Tool #2 — Wix Website Builder
Wix is a technology tool that provides cloud-based web development capabilities through the use of drag and drop elements rather than HTML coding (Figure 2.1). Although a website was not a necessary component of this assignment, in an effort to immerse ourselves in the brand and product we have created, we built a basic website to serve as a marketing tool and way to disseminate information to potential clients.
Step 1: Starting Up
Similar to Canva, the first thing to do with Wix is create an account in order to save the progress on your website. You also need an account if you wish to connect a domain you own to the site you’ve built, or you can host the website through Wix, which generates a unique link based on your profile. Also similar to Canva, Wix is a freemium product with a variety of pricing levels beyond the free offering. Figure 2.2 demonstrates a list of these prices as well as a portion of the table that shows the various levels of features available.
Step 2: Understanding Usability
Wix has a few options for website building. There are pre-themed templates that can be taken and adapted to fit your brand, similar to using a logo template on Canva. You can also have a website produced for you through the Wix ADI (Artificial Design Intelligence), which takes answers you give to a list of prompts and develops a site from it.
Wix functions using “drag and drop” tools and omits any coding that is required to build a website, making it extremely user friendly. The number of plug-ins available, as well as the ability to do coding actions like embedding videos, creating forms where people can sign up, and many other things makes Wix a tool that is useful to a wide audience.
For this project, we took a pre-themed template and adjusted it to match our branding. In order to access these templates, you must find the “Create New Website” button as shown in Figure 2.3 From here, you are taken to a library of templates based on what you indicate the purpose of your site is.
Once you arrive on the template, which could look similar to Figure 2.4, all of the tools to create a website become accessible to you. The tools we focused on were colour/font/theming, layout, and accessibility. Due to the nature of the U OK? application, making information easily accessible to users is of great importance.
Step 4: Completing and Publishing the Website
Once you have finished building your website, it is time to publish it. One of the options with a freemium product like Wix is to connect a purchased domain and use Wix as the hosting service. This allows your website to appear with no advertisements, and no Wix-associated URL. For this assignment, we did not connect a domain. Figure 2.5 shows a portion of our home page.
Please click the following link to view the completed website.
Technological Tool #3 — Proto.io
The central aspect of our deliverable is the U OK? web app. We used Proto.io to generate our MVP. This program streamlines the process of creating web apps without needing to know coding languages such as HTML or Dart.
The below image is the blank template screen for proto. The left-hand bar contains a series of basic GUI elements that can be dragged in easily. This includes elements such as text, shapes, interaction areas, audio files, images, and HTML code areas. The UI tab includes navigational elements and progress bars. There are also templates for basic layouts and common elements (Figure 3.1).
The right-hand side contains navigation between screens for the current Proto project. We can set up interactions by simply dragging from the UI element to the desired navigation destination. The inspector tab on the left allows the user to edit interactions and triggers in detail (Figure 3.1).
All of these UI elements come together to make web app design similar to that of a Powerpoint presentation! Due to our time constraints, it was imperative that our process relied on intuitive and familiar tools.
As with all MVP’s, the functionality is of key concern. Here’s the function-only intro page before company-specific graphics is incorporated. Notice the HTML code on the side. Proto allows us to seamlessly incorporate elements from other digital tools. However, a separate navigation button (the blue one) is still required upon completion of the survey. This is due to a limitation with the compatibility between Typeform and Proto. As a result, every page with a Typeform element requires a separate navigation button (Figure 3.2).
Our app seeks to bring mindfulness and a regular check-up for employees working through the troubles of COVID-19 and remote work. We also want to quantify employee wellness to some extent in order for the Benevity HR team to monitor the health of the organizational health over time. Employees can either provide personal information for better HR data and a more personalized approach or respond to the survey anonymously (Figure 3.3).
We follow up the initial survey with the option for employees to reach out to the HR department for specific issues. The minimum viable product (MVP) currently deals with mental health concerns, productivity concerns, and social life concerns. Employees can also choose to opt out and continue on with their day (Figure 3.4).
Each survey option leads to a separate form linked from this main menu. These forms will allow users to submit specific tickets that allow HR to direct specific help and resources to employees in need (Figure 3.5).
Technological Tool #4 — Typeform
All of our correspondence will be facilitated through Typeform, an online platform that makes creating intuitive forms easy. Here’s the title page for our check-in with quantified data for long-term tracking (Figure 4.1).
This platform gives the user access to a wide array of question formats and options (Figure 4.2). The first survey aims to give HR a quantified measure of the mental health, productivity support, and socialization needs of the organization.
While the Typeform survey itself is quite handy, it can be quite cumbersome to open new tabs and windows for each survey. As our web app is meant to be the central point of communication, it doesn’t make sense to have pop-ups everywhere. This is why we need to embed the surveys within our app. Fortunately, both Typeform and Proto.io have infrastructure for HTML code embedded (Figure 4.3).
After three clicks of a button, we now have an HTML code to integrate the survey within the web app with the HTML element (Figure 4.3)!
Typeform also provides limited diagnostics and statistical data to monitor the engagement and completion of each survey provided (Figure 4.4).
This will allow the user to iterate and improve upon the wording and format of the survey to generate consistent and relevant data (Figure 4.5).
To collect the data from the quantified data and personal outreach forms, we will direct data to a spreadsheet hosted by Google Sheets.
Technological Tool #5 — Google Sheets
Google Sheets is a great tool to host simple data sheets, and we have existing infrastructure to connect our various technologies together.
Data from each survey is directed to different pages. We had originally planned on a single survey and data sheet which directs data to other sheets upon certain score criteria being met. The idea was that individuals who regularly post low check-in scores could be detected and supported early on (Figure 5.1). However, this system proved to be cumbersome in addition to the fact that users would likely prefer to reach out on their own accord.
The other sheets are set up to register employees with their email and their specific concerns. HR will be able to evaluate these concerns and send relevant material to employees who reach out (Figure 5.2).
Technological Tool #6 — Zapier
Zapier will be used as an automated email notification system to confirm submissions and send fast resource links to employees. The Google Sheet database will be used as the point of contact. Emails collected in embedded typeform surveys are collected in the Google Sheet. An automated trigger is set up so that each new entry in specific sheets initiates a different action.
Step 1: Setting the trigger action
Step 2: Linking the specific spreadsheet
Step 3: Designing the automated response and messaging
This allows the service to provide immediate feedback upon completion of outreach via email (Figure 6.3). The messaging sent out can be amended to include organization-specific resources and links to initiate the support process.
Impact
Given the current transitory that the world is facing, there many new changes are to come. Businesses and employees alike are struggling to adapt to these changes mentally and productivity-wise. The CheckIn & U OK? technology is aimed to support employee well being, social engagement, productivity, and a sense of belonging to the organization.
References
Amanda Stephenson, C. H. (2021, February 13). New CEO takes reins at ‘unicorn’ Benevity. Calgary Herald. https://calgaryherald.com/business/local-business/new-ceo-takes-reins-at-unicorn-benevity.
Canva. (n.d.). Retrieved from https://www.canva.com
Google Sheets. (n.d.). Retrieved from www.google.com
Proto.io. (n.d.). Retrieved from https://proto.io
Typeform. (n.d.). Retrieved from www.typeform.com
Wix Website Builder. (n.d.). Retrieved from www.wix.com
Zapier. (n.d.). Retrieved from zapier.com
