What is Lenspa?​

When thinking about their community, most people only consider the few circles closest to them: their friends, their family, their coworkers, their neighbors. While the internet has proven to be amazing for connecting to people from all around the world, existing social media platforms do little to challenge cultural and language barriers that keep people stuck in homogeneous social circles. Services rely on written or spoken communication, severely limiting the potential pool of people you can connect with. This problem is important as it contributes to a lack of cultural and world awareness that leads to racism, nationalism, prejudice, and even violence. More needs to be done to usher in an era of global connection and inclusivity.

Lenspa, is a photo based pen-pal app. Each user will be randomly matched with another user somewhere in the world based on their match preferences. Then, each day, both users would be given the same prompt in their respective languages designed to showcase different aspects of their daily experiences, culture, and realities. Both users would reply to the prompt with a picture and would be shown each other’s responses, which they could learn from and connect over.

Low-fidelity Prototype​

Our Low-fidelity prototype was created using Figma. Below are three user flows for matching with another user, unmatching with another user, and responding to a prompt with a photo or drawing:

All screens of the low-fidelity prototype can be found in our Figma file https://www.figma.com/file/i5OlYD1fbrthNZJaj7cOaY/Lenspa?node-id=0%3A1&t=Vv6UAdPZxCw8lGZ9-1.

Working Prototype​

Our working prototype is live at https://lenspa.vercel.app! The working prototype lets users sign up, match and unmatch with other users, and respond to daily prompts with images. The site is currently available in English, Russian, Chinese, and Spanish.

Demo Video​

Link to demo video

Highlight of Evaluation Results​

Task 1: Requesting a Match​

• Successes: 12
• Failures: 0
• Shortest Time to Complete: 6s
• Longest Time to Complete: 21s
• Average Time to Complete: 15s

Task 2: Respond to a Prompt​

• Successes: 10
• Failures: 2
• Shortest Time to Complete: 33s
• Longest Time to Complete: 2:14
• Average Time to Complete: 1:20

Task 3: Unmatch/Report a User​

• Successes: 12
• Failures: 0
• Shortest Time to Complete: 15s
• Longest Time to Complete: 42s
• Average Time to Complete: 1:20

Concerns​

• Uploading photo only works some of the time
• Variable loading times
• Uploading an existing photo needs to be more intuitive
• Reporting/unmatching with a user needs to be more intuitive
• Safety concerns about doxxing yourself, accidentally revealing more information than before
• Text in Russian is longer sometimes, doesn't always fit on buttons

Desires​

• Report individual messages
• Unblock a previously blocked match
• Force delete conversation history for the other match after unmatching (privacy issues)
• Ability to delete specific messages after sending

Positive Feedback​

• Prompt variety is good, good to not have just positive ones
• The website looks put together and modern
• Profile felt more personal than many social medias (didn't show off friends/follower counts)
• Good to have freedom and options on how to respond
• Cute idea, people seem to be excited to use it and interested in where it goes
• Really easy to match

This is the last week of this project! With our final prototype and our evaluations done, all there is left to do is complete our final presentation, report, website, and video, and to turn the project in.

Goals​

• Create the final project presentation
• Create a demo video for the presentation
• Present the project
• Compile the final project report
• Create the final project video
• Update and finalize the final project website
• Turn the assignment in

Tasks​

Ella​

• Create a demo video
• Present the intro/demo parts of the final presentation
• Write up the back-end details for the final report
• Create the final project video

Kayla​

• Present the user requirements gathering part of the final presentation
• Write up the front-end details for the final report

Miranda​

• Work with Sarah on creating the final presentation
• Present the use cases and low-fidelity prototype parts of the final presentation
• Compile the introduction and low-fidelity prototype sections of the final report
• Put all required information on the project website

Sarah​

• Create the final presentation
• Present the evaluation section of the final presentation
• Write up the evaluation section of the final report

Challenges​

• None!

Reflection​

We wrapped the project up quite nicely and are done! Thank you for reading about our journey. This was a very exciting and fun project to work on and build, and I am proud of all the work that we’ve put into this.

The final prototype is almost done, and we have just slightly over a week until our final presentation. We set out to test all our functionality and to add a few last finishing touches, and then to deploy and evaluate the final prototype.

Goals​

• Test and troubleshoot functionality on mobile and wide-screen devices
• Add automatic image filtering
• Add user notifications
• Localize all strings to all four languages
• Deploy the final prototype
• Begin conducting evaluations of our prototype

Tasks​

Ella​

• Test all functionality and report issues
• Add automatic image filtering
• Translate strings into Russian
• Deploy the website with Sarah
• Test functionality on deployed version
• Evaluate Russian users

Kayla​

• Test all functionality and report issues
• Add user notifications
• Fix CRON jobs being lost when server restarts
• Test functionality on deployed version

Miranda​

• Test all functionality and report issues
• Translate strings into Spanish
• Test functionality on deployed version
• Evaluate Spanish users
• Begin compiling information for project website

Sarah​

• Test all functionality and report issues
• Finalize evaluation plan and surveys
• Translate strings into Chinese
• Deploy the website with Ella
• Test functionality of deployed version
• Evaluate Chinese and English users

Challenges​

• There were the regular issues with deployment and making sure everything was still working, but we were able to resolve them in the course of our initial deployment session.
• Everything else went smoothly.

Reflection​

This was a very productive week! We have our final prototype and most of our evaluations completed and are ready to put together the final presentation, report, video and website.

With the due date of the project and our presentation coming up in just a couple weeks, we wanted to get as much of the technical development of our final prototype done by the end of this week as possible in order to have time to translate everything we needed to translate, deploy the application, run evaluations, and make our presentation next week. Due to team member schedules and wanting the codebase to be consistent and smoothly interconnected, we decided to have Kayla and Ella take on most of the remaining development responsibilities in exchange for Sarah and Miranda taking a lead on the evaluation and presentation aspects of the project in the coming weeks.

Goals

• Implement random daily prompt assignments
• Implement user messaging
• Implement unmatching and reporting
• Come up with an evaluation plan
• Gather everything that will need to be localized in JSON files / spreadsheets

Tasks

Ella​

• Create the socket.io endpoints for loading in conversation and match data, getting user data, sending a new message, and blocking/reporting a match
• Set up prompts to update every 24 hours after a conversation is first created
• Complete the individual evaluation plan assignment
• Add prompt ideas to the prompts spreadsheet

Kayla​

• Finish the front-end pages for conversations, user profiles, and picture selection/taking/drawing
• Integrate the back-end API and endpoints into the front-end client Complete the individual evaluation plan assignment

Miranda​

• Complete the individual evaluation plan assignment
• After group evaluation plan is determined, work with Sarah to create a detailed procedure outline and necessary pre/post surveys
• Add prompt ideas to the prompts spreadsheet

Sarah​

• Complete the individual plan assignment
• After group evaluation plan is determined, work with Miranda to create a detailed procedure outline and necessary pre/post surveys
• Add prompt ideas to the prompts spreadsheet
• Double check the list of front-end strings to be localized

Challenges

• Besides lots of troubleshooting and debugging, everything went pretty smoothly.
• Programming actual functionality made us realize that some changes should be made to our database schema, but all were easy to implement.
• Ella unfortunately was busier than anticipated with other classes and onboarding documents for her new job but Kayla really stepped up and drove the development of the prototype further, jumping in on some of the back-end tasks as well.

Reflection

While a few layout and technical issues remain and there is additional functionality we’d like to add if we have time (such as email notifications), the vast majority of our final prototype is now functional! We will use the first few days of next week to iron out those last technical difficulties while also getting translations and our evaluation plan ready to go and should still be on schedule.

Since we fell somewhat behind last week, we wanted to regroup and catch up to where we wanted to be by the start of the week. Then, since we anticipated our team members having more time this week, we wanted to focus on implementing what we foresaw to be the hardest technical aspects of the project - real time server/client communication and the penpal matching system. We also planned to have an extra meeting to work on the project in the same space for three hours to make sure the front-end and back-end development was on the same page.

Goals

• Configure user creating and authentication on the back-end
• Decide on framework for real-time communication between client and server
• Implement match requests and matching algorithm
• Experiment with the color-scheme, making the design look less like U of R colors

Tasks

Ella​

• Create user authentication functions and endpoints on the server with JWT
• Discuss real-time server communication with the rest of team
• Start implementing real-time endpoints for user matching

Kayla​

• Discuss real-time server communication with the rest of team
• Create the requests/conversations page

Miranda​

• Discuss real-time server communication with the rest of team
• Assist Kayla and Sarah on front-end

Sarah​

• Discuss real-time server communication with the rest of team
• Start collecting strings from the front-end for localization

Challenges

• While setting up websockets and getting real time communication functioning between the server and the client took a lot of time and troubleshooting, having scheduled time to all work on it together in the same place helped us sort it out
• Everything else went pretty smoothly

Reflection

We were able to make a lot of progress this week and catch up more or less to where we wanted to be at this point. Having almost fully tackled the match requests system got an important technical hurdle and milestone out of the way.

With the technical specifications document and mobile mid-fidelity wireframes finalized, we set out to start implementing our final prototype, as well as creating wide-screen mid-fidelity wireframes and finalizing the design stack of the website.

Goals

• Set up a hosted database so that all team members can use the same test data
• Configure a NodeJS and Express web server
  • Implement user authentication
• Configure a React and NextJS client
  • Implement landing and authentication pages
• Create wide-screen mid-fidelity wireframes

Tasks

Ella​

• Create a github repo for the project
• Create a NodeJS and Express server and connect it to an AWS MySQL database
• Implement user authentication

Kayla​

• Create the NextJS app
• Create sign in and sign up pages

Miranda​

• Create mid-fidelity wireframes for wide-screen interfaces

Sarah​

• Help Ella set up the database and configure the schema
• Create the landing page

Challenges

• Multiple members were very busy with other classes, projects, and tests
• One member had a job interview get scheduled in the middle of the week and had to dedicate a lot of resources towards it
• The database schemas decided upon last week had to be adjusted

Reflection

Due to members being busy, having unforeseen conflicts, and having to temporarily prioritize other things, we did not make as much progress this week as we wanted to. Particularly, while we got the Express server set up and the database connected with the schema properly loaded in to Node, we did not get to creating user authentication on the back-end. The wireframes as well as the front-end tasks got mostly completed, though we did not finalize the color scheme and fonts of the website.

This was our first week of development following the completion of the midterm report. We focused on finalizing the scope and design of our final prototype in anticipation of starting both front-end and back-end development next week.

Goals

• Write internal documentation and technical specification
• Design database schema
• Create mid-fidelity wireframes for mobile interfaces Set up documentation website

Tasks

Ella​

• Finalize product design
• Write internal specifications and guidelines
• Meet with Sarah about db design

Kayla​

• Proofread internal specifications and guidelines
• Set up documentation website
• Put midterm project report info on website

Miranda​

• Proofread internal specifications and guidelines
• Create mid-fidelity prototypes of mobile interfaces

Sarah​

• Proofread internal specifications and guidelines Design database structure and schema

Challenges

None this week!

Reflection

Everything this week went smoothly and we completed all our planned tasks. We now know exactly what we need to build going forward and are ready to start developing our final prototype

This blog is created to document the creation and development of Lenspa for CSC211.

What is Lenspa?​

When thinking about their community, most people only consider the few circles closest to them: their friends, their family, their coworkers, their neighbors. While the internet has proven to be amazing for connecting to people from all around the world, existing social media platforms do little to challenge cultural and language barriers that keep people stuck in homogeneous social circles. Services rely on written or spoken communication, severely limiting the potential pool of people you can connect with. This problem is important as it contributes to a lack of cultural and world awareness that leads to racism, nationalism, prejudice, and even violence. More needs to be done to usher in an era of global connection and inclusivity.

Lenspa, is a photo based pen-pal app. Each user will be randomly matched with another user somewhere in the world based on their match preferences. Then, each day, both users would be given the same prompt in their respective languages designed to showcase different aspects of their daily experiences, culture, and realities. Both users would reply to the prompt with a picture and would be shown each other’s responses, which they could learn from and connect over.

Our documentation​

Our plan is to create a mobile-first web app that will be available on any device with modern internet browsing. We plan to use NodeJS, Express, React, and MySQL. We will most likely use the free AWS plan for hosting.

We'll be documentating updates each week here.