/mbl-popup

Primary LanguageJavaScript

Young People's Support Popup

Chrome extension prototype

Introduction

Created by Founders and Coders @jc2820 and @bethanyios as part of 'My Best Life' - A partnership between Founders and Coders, New Philanthropy Capital, Uk Youth, The Mix and Leap Resolving Conflict - exploring digital solutions for issues faced by young people and youth services.

My Best Life phase 2 takes the form of three design sprints held with members from each partner group looking to create a testable digital solution to set problem areas.

Founders and Coders task is to take the solution ideas from the design sprints and prototype them for testing, with a potential build phase later in the year.

This chrome browser extension is part of the prototyping for sprint one (How might we improve the online discoverability of youth services?).

The extension

The main solution area that came out of the sprint was a tool that could take input from the user (from questions about mood or interests, previous bookmarks and so on) to create a personalised recommendation of services tailored to each user. Recommendations could be given based on personal profile but also offer 'top 5 in your area' or 'best reviewed this week' etc.

The tool would show reviews for services and also offer a generic search feature and link to more immediate help on a range of issues.

This was originally posed as a chrome extension, where the tool would be available as a popup in the browser, but could also track browsing, offering useful prompts or signposting links if the user was looking at certain issues online.

User research showed us that the majority of young people are more likely to access services via their mobile phone, and may not have regular access to a desktop or laptop computer.

As such we built our main prototype (view it here) with figma as a mobile app which could potentially be integrated later into a browser extension, PWA or standard web app.

However, we wanted to explore the browser extension idea from a technical perspective, and showcase a live prototype of the browser offering dynamic recommendations based on browsing as it might in either a desktop or mobile browser version of our tool. This could be an accompaniment to the main tool, or be integrated completely.

Installation

  1. Clone this repo.
  2. Open new tab in Chrome and go to chrome://extensions
  3. Check developer mode if not already on.
  4. Click 'load unpacked' button
  5. Choose the root folder for this project.
  6. This should load the extension in the extensions window below toggle it on if it isn't already.
  7. Navigate to a page with 'coronavirus' or 'school' in the title to see the action!
  8. Open the popup from the extensions icon area to see potential UI features.