Love in the Time of COVID-19: The Next Step in Online Dating

Shamus Westra
Technologies of Innovation
11 min readApr 23, 2021

--

April 23, 2021

Contributors:

, , , ,

Figure 1: Bumble Meet Cover Photo

Despite the overwhelming ease of using dating apps and approximately 1,500 options to choose from, dating has become a passive experience (Lin, n.d.) In the past, dating and finding one’s true love was all about odds and experiences. Individuals would meet their other half through friends, family, work, or serendipity. Experiences ranged in success, however, one constant was the fact that the first date set the stage for the relationship. Studies show that daters utilize non-verbal cues on the first date to predict whether the relationship will be viable and result in a long-term commitment (Sharabi & Caughlin, 2017). Regardless, whether daters were apprehensive, excited, or weary about the first date, they agreed that a live, in-person first interaction was the best way to get to know someone.

This is the issue with online dating apps. While Tinder, Match, Hinge, and Bumble allow users to conveniently connect with a large number of potential matches, the experience has become impersonal. The new norm is to swipe left for no or right for yes (Paska, 2020). However, have we not been taught that we should never judge a book by its cover? This is only further complicated by other risks such as the potential of being catfished or sexually harassed. Despite these concerns, 36% of individuals ages 18–36 disclose that they have used a dating app at least once, albeit with low success rates (Smith, 2014). The pandemic and its associated ever-changing government health regulations has spurred a significant shift toward online dating. This presents existing dating apps with an opportunity to expand their market share and generate sizable returns. Now is the time for leaders in the dating industry to adapt and innovate their current platforms to sustain their competitive advantage in a concentrated market.

Vision

Our objective was to recommend an innovative platform for Bumble to help increase their market share, drive customer engagement, and better position them in the Canadian market. We leveraged our diverse background as Master of Management candidates in conjunction with the tools acquired from ENTI 674: Technologies of Innovation taught by Kris Hans. This allowed us to develop the new application, Bumble Meet.

What is Bumble Meet?

Figure 2: Welcome Page, Calendar View, and Match Page from a User’s Perspective

This application stemmed from a common issue identified during the design thinking process which was the universal lack of personal interactions on dating apps. Bumble Meet merges the pro-feminist benefits of Bumble’s original platform with the personal aspects of face-to-face meetings. Unlike other apps, this innovative model encourages users to set a date and meet with their matches. Individuals have the choice of selecting from a menu of dates proposed by other users, or to create their own date. Dates can be designed using a list of activities and locations proposed by the app, emphasizing local venues.

Daters will still have the opportunity to explore their match’s profile before making any commitments, although the information provided may be less extensive than a typical swipe-based app. However, once a match and date are agreed upon, both parties will be notified using a match page that confirms their date’s details. This page will also include an interactive map to help users navigate the city. More importantly, date information can then be exported into the user’s personal calendar.

Reason for this Application

Our team sought to provide a more personable online dating experience that no dating app has been able to fully achieve. Many existing apps have operated on the underlying assumption that technology will one day emulate a human and provide unique insights. Regardless of technological developments, the problem with technology such as artificial intelligence (AI) is the fact computers can never be empathetic. Therefore, AI will never supersede judgements made during face to face interactions. By expediting the process of achieving in-person interactions with matches, this recommendation will also indirectly resolve other issues, such as transparency and a lack of engagement.

App Development Overview

There were many considerations that influenced how we developed the minimum viable product (MVP). Our first priority was to ensure that the application showcased the functionality in a user-friendly fashion. Bumble’s current app was used as a template due to its simplicity and sleek design. Additionally, emulating the already successful app would increase trust, simplify the transition to the new platform, and stay true to Bumble’s brand, which is their most valuable asset. Therefore elements such as the icons, colour scheme, filters, and conversation starters remained the same.

One weakness for our team was a lack of coding experience, so we looked for codeless app developers to create the MVP. Adobe and Glideapps were considered, but we chose to proceed with Figma as it allowed for collaboration and was less restricting than Glide. The ability to collaborate was especially important given our time limitations, as Figma helped expedite the development process.

Utilizing Figma

Figma is a versatile app prototype developer. Our first step was to choose a device to use as the base for the page design. We chose one of the most recent iPhones as the basis for our content. The right-hand side menu allowed us to change the colour and layering of each page.

Figure 3: Figma Design Menu

The top left corner contains a toolbar that allowed us to add elements such as shapes, lines, and text boxes (“T” box) that form the basis of interactive app components. These shapes were modified using the same right hand menu shown in Figure 2. The toolbar also enabled us to flip between selection (mouse icon) and scrolling (hand) modes.

Figure 4: Figma Element Toolbar

Text and shape tools were used to create an interactive button. Once we put both elements on our sample page, we grouped them by selecting both and pressing Ctrl+G. Grouping made it easier to align, modify, and duplicate our buttons. To make buttons pop, we included effects such as a drop shadow.

Figure 5: Inserting a Drop Shadow

We also grouped the button elements into a component by selecting them and pressing Ctrl+Alt+K. The key difference with components was that changes to one component carried through to every other one. Components integrated with the Google Sheets Sync plugin, which imported data into Figma based on rows in a spreadsheet. This allowed us to include images by putting a shape into our button that would later be filled by a picture.

We then integrated a Google Sheet. This step included renaming component elements based on spreadsheet columns. For example, if we wanted a text box to pull from the column named “Phone”, we would rename the corresponding text box in our component to say “#Phone”. The best way to integrate images was to put a link into the respective column of the Google Sheet. If we wanted to develop buttons for three different restaurants in the city, for example, our spreadsheet and Figma would have looked like this:

Figure 6: Google Sheets Sync Integration

With this set up, we imported the data from our Google Sheet by selecting all three components, right clicking, and selecting Plugins > Google Sheets Sync. This prompted us to input a shareable link to our spreadsheet, which updated the information when “Fetch and Sync” was clicked.

Figure 7: Google Sheets Sync Results

We also incorporated interactive maps using the Mapsicle plugin. This was accessed using the leftmost button on the toolbar (See Figure 3)and selecting plugins > Mapsicle > Open Mapsicle. We then navigated to the location we wanted and input a map:

Figure 8: Mapsicle Integration

For our purposes, we utilized a larger image (1000 px height by 1000 px width). This ensured that the map exceeded the page borders, which would allow users to move it within the application. Then we pressed “Create map” and dragged the image into our page limits. Keeping the map selected, we sent it to the back of or page by pressing Ctrl+Shift+[. Then, we selected all the shapes we wanted to remain stationary and clicked “fix position when scrolling” on the right hand menu.

Figure 9: Fixing Figma Elements

Switching from “design” to “prototype” in the right hand menu allowed us to dictate page behaviour when users interacted with the map. Selecting “Horizontal and vertical scrolling” allowed us to move the map up, down, left, and right.

Figure 10: Scrolling Behaviour Tab
Figure 11: Scrollable Map Page

Now, we will discuss linking pages. Let’s say we wanted a details page to pop up whenever we clicked on one of these restaurants. We achieved this by duplicating our initial page (Ctrl + D), then put a layer blur on all the components so they faded into the background behind our pop-up. This was done using the right hand “Effects” menu.

Figure 12: Layer Blur

We then made a pop-up window to set over this blurred image and changed the page’s scrolling behaviour to “No scrolling” to minimize layering issues. Then we filled this pop-up with additional information.

Figure 13: Pop-up Page

Then we linked our pages by switching the right-hand menu to the “prototype” tab. Then we clicked on the element we wanted to trigger a page transition, which brought up a little circle on its right-hand side. Clicking and dragging from this to the next page would ensure the transition.

Figure 14: Connecting Pages in Figma

Now we have a working prototype! To view what our app looked like from a user perspective, we clicked on the “play” icon in the top right hand corner, which opened a mockup.

Figure 15: Demo Application Prototype

These tools were crucial when developing our MVP. Google Sheets Sync was used to populate the proposed dates that appeared when the user selected a day from the calendar view.

Figure 16: User Date Information Google Sheet
Figure 17: User Date Components Figma

The mapsicle plugin was used to provide an interactive map for users who accepted one of the proposed date options.

Figure 18: Accepted Date Screen with Interactive Map

Layer blurs were also valuable for our “Ask a Question” popups and the “Create Your Own Date” Dropdown menus

Figure 19: Layer Blurs in Bumble Meet

One drawback of using Figma is that we had to hardcode many of our pages. We needed a list of proposed dates and a create your own date tab for each day of the calendar month. This increased the workload significantly, and due to time constraints the team elected to take shortcuts that limited the prototype’s functionality. We also included profile and messaging tabs to replicate Bumble’s app experience, but linkages to these tabs needed to be made from every page as a result. This led to a complicated network of prototype linkages.

Figure 20: Bumble Meet Page Connections in Figma

We were still able to showcase key app functions, including accepting a date, reporting users, and creating your own date. However, we could not find a way for our app to accept user inputs. As such, the final product is a prototype that cannot be brought to market as is.

A full demo of our prototype is shown below. If you want to get a better look, follow this link to view our Figma page: https://bit.ly/2QUHg97

Figure 21: Bumble Meet Navigation Demo

Generating Buzz

Figure 22: Services Used in Bumble Meet Launch Page

While software development is a vital aspect of this project, it is also important to collect feedback and initial reactions to Bumble Meet. As we know, prototyping is a trial and error process requiring multiple product iterations before it can be introduced to the market (Martin, 2014). During the debugging process, marketing will be crucial to maximize exposure and ensure app adoption.

To facilitate this, the team created a landing page which Bumble can use to introduce the product prior to the launch date (https://bumblemeet.weebly.com). This site covers the main benefits of Bumble Meet and why customers should feel compelled to switch to this platform. Similar to our belief that the application should be easy to use, this value was reflected in our site (Martin, 2014). We adopted a sleek format, free of tech terms to connect with the everyday user. This is why we picked weebly, a website maker, as it uses minimalistic templates.

Moreover, weebly uses a .com domain which is recognized as a business site by North American countries. This is crucial as the domain should reflect where the company is operating to instill greater trust in the service.

We also included a typeform with an automated response messaging service generated by Zapier. These services were utilized as they streamline repetitive tasks with little need for continuous monitoring, a cost saving measure. The typeform automatically sends responses to a Google Sheet. Then, using an individual “zap”, Zapier can connect the information stored in this sheet to a boilerplate, automated email response. This allows for some level of email personalization by including the recipient’s name in the email itself. We set up our zap so it executes every time a new row is added to the sheet (which occurs whenever the typeform is filled).

Final Remarks

In summary, utilizing multiple technological tools and approaching the problem from a customer-centric perspective allowed our team to address a key challenge of online dating: a lack of personal connections. Addressing this concern indirectly resolves other issues daters experience, such as user honesty and transparency. It is important to remember that AI is unable to completely replace humans as these systems lack the ability to empathize, alongside other small nuances that computers have yet to master. Thus, technology should simply be a tool to support human functions and should not replace them.

Additionally, innovation does not require fanfare or significant changes. Understanding the consumer and addressing one major pain point is sufficient. Hence, Bumble Meet is a disruption by design, simply by taking the next logical step, scheduling dates. We have one question left for you to answer. Would you try Bumble Meet?

References

Lin, M. (n.d.). Online dating industry: The business of love. Finance. Retrieved on April 15, 2021 from https://www.toptal.com/finance/business-model-consultants/online-dating-industry#:~:text=If%20you%20continue%20to%20have,a%20moment%20of%20its%20own.

Martin, R.L. (2014, February 11). The unexpected benefits of rapid prototyping. Harvard Business Reviews. https://hbr.org/2014/02/intervention-design-building-the-business-partners-confidence.

Paska, I. (2020). Fast choices and emancipatory spaces: Complex reality of online dating apps. In Medias Res, 9(16), 2545–2557. https://doi.org/10.46640/imr.9.16.6

Sharabi, L.L. and J.P., Caughlin. (2017, April 11). What predicted first date success? A longitudinal study of modality switching in online dating. Journal of the International Association for Relationship Research, 24(2), 370–391. https://doi-org.ezproxy.lib.ucalgary.ca/10.1111/pere.12188

Smith, A. (2014, February 13). 5 facts about online dating. Pew Research Center. Retrieved on April 13, 2021 from https://www.pewresearch.org/fact-tank/2014/02/13/5/5-facts-about-online-dating/

--

--