IDM241: Microinteractions
By Tynan Drake – 2021
IDM241: Microinteractions
By Tynan Drake – 2021
IDM241: Microinteractions
By Molyna Tep – 2021
IDM241: Microinteractions
By Megan Lam – 2021
IDM 382: Internet of Things by Chelsea James
In today’s world, COVID-19 is rampant and it is in our hands to stay safe and do our best to protect ourselves from it. The Proximity Measurer is a way to determine if you are too close to someone. This Proximity Measurer uses an ultrasonic sensor to determine the distance of a person by using sound waves. If you are within 6 feet (about 183 cm), the device with flash red and you will get a “Too close!” warning message that states your distance. If you are beyond 6 feet, the green light will flash, indicating that you are a safe distance away and you will get a “Safe!” message that has your distance in centimeters.

I was able to add the finishing touches to my project. I ran into many issues before getting to this point and I learned a lot about the process of troubleshooting. I did some experimenting with my project and I even tried it on an Arduino Uno which helped me figure out what my issue was. It took a lot of trial and error to find out what my issues were but once I got it working, it felt very rewarding.
I have had issues with my project for weeks. I tried troubleshooting many different ways and I still couldn’t get it to work. I thought my project wouldn’t work at all and I was ready to use a backup project that I had done a few years ago. The issue that I found was that my ultrasonic sensor is an analog sensor and it did not work in the digital pins. Since it is analog it worked on the Marker 1010’s analog pins (A1, A2 etc.) I’m not entirely sure why it only works on analog pins because when I tested it on my Arduino Uno it worked on analog pins.
#include "thingProperties.h"
// sensor
int cm = 0;
int distance = 0;
long readUltrasonicDistance(int triggerPin, int echoPin)
{
pinMode(triggerPin, OUTPUT);
digitalWrite(triggerPin, LOW);
delayMicroseconds(2);
// Sets the trigger pin to HIGH state for 10 microseconds
digitalWrite(triggerPin, HIGH);
delayMicroseconds(10);
digitalWrite(triggerPin, LOW);
pinMode(echoPin, INPUT);
// Reads the echo pin, and returns the sound wave travel time
in microseconds
return pulseIn(echoPin, HIGH);
}
//CUSTOM TIMERS
long lastMessageTime = 0;
long messagedDelay = 3000;
String lastMessageTimeStr = "";
void setup() {
// Initialize serial and wait for port to open:
Serial.begin(9600);
// This delay gives the chance to wait for a Serial Monitor without
blocking if none is found
delay(1500);
pinMode(5, OUTPUT);
// pinMode(6, OUTPUT);
pinMode(7, OUTPUT);
// Defined in thingProperties.h
initProperties();
// Connect to Arduino IoT Cloud
ArduinoCloud.begin(ArduinoIoTPreferredConnection);
/*
The following function allows you to obtain more information
related to the state of network and IoT Cloud connection and errors
the higher number the more granular information you’ll get.
The default is 0 (only errors).
Maximum is 4
*/
setDebugMessageLevel(2);
ArduinoCloud.printDebugInfo();
}
void loop() {
ArduinoCloud.update();
// Your code here
{
cm = 0.01723 * readUltrasonicDistance( A1, A2);
Serial.print(cm);
Serial.println(" cm");
// if the distance is further than 350 turn LED off
//350cm = 11.5 feet
if (cm > 350) {
digitalWrite(5, HIGH);
digitalWrite(6, LOW);
digitalWrite(7, LOW);
}
// GREEN ON = SAFE
//250cm= 8.2 ft
if (cm <= 350 && cm > 183) {
digitalWrite(5, HIGH);
digitalWrite(6, LOW);
digitalWrite(7, LOW);
}
//RED ON= NOT SAFE
//6 feet= 182.88 cm
if (cm <= 183 && cm > 0) {
digitalWrite(5, LOW);
digitalWrite(6, LOW);
digitalWrite(7, HIGH);
}
// RED ON= REALLY NOT SAFE
if (cm <= 0) {
digitalWrite(5, LOW);
digitalWrite(6, LOW);
digitalWrite(7, HIGH);
}
}
//RED light switch
if (cm <= 183 && cm > 0) {
lightswitch = false;
measurer = lastMessageTimeStr +"Too close!! Your distance is " + cm + "cm!";
messagedDelay;
} else {
lightswitch = true;
measurer = lastMessageTimeStr +"Safe! Your distance is " + cm + "cm!";
messagedDelay;
}
}
//END LOOP
void onMeasurerChange() {
// Do something
}
void onLightswitchChange() {
// Do something
}
IDM216: User Experience Design II
By Jervo Jawns – 2020
IDM216: User Experience Design II
By Victoria, Anna, Mikayla, Reid, Leanna, Dolma – 2020
Pluto is an experimental social network that focuses on fostering meaningful connections. This raises two fundamental questions: What is a meaningful connection, and how can we foster them? For this reason, Pluto must identify what features will best accomplish this goal and ultimately create an engaging platform for our users.
Pluto redefines social media by putting an emphasis on meaningful relationships. It’s an app for close friends only, with extra layers of privacy that other social media platforms lack. Nobody can find your profile unless you send them an invite, and your posts are only shown to the people you choose. The same goes for viewing posts. Say you want to separate the happenings of your family members and your college friends- Pluto allows you to organize your connections into multiple feeds.
| Sarah Bray | Project Manager – Lead project, managed research and design initiatives |
| Mike Carbone | Backend Developer – Built the pluto backend API and pluto site |
| Rob Nashed | UI Designer – Created the color scheme and final screen designs |
| Woo Song | Design Technologist – Prototyped and designed the app via react native |
| Clay Tercek | Frontend Developer – Led the react native development |
| Veronica Lin | UX Researcher – Administered usability testing and user interviews |
When forming a team, a sentiment shared among all members was that people do not feel as though modern social media networks value their privacy. Current leading social media platforms are all about sharing everything with everyone- therefore, our goal is to create an app that is fundamentally focused on creating a private sharing space.
How can we foster meaningful connections in an online space?
The first three months would be dedicated to better defining a need, and seeing how a new social media application could help with the following:
We followed a data driven approach based on various collections of user centered feedback and individualized research. We had a claim, and we needed to back it with comparative research and data surrounding how user’s feel when using social media.
The first phase in research consisted of independent research- following processes such as comparative analysis, gathering research on pre-existing studies, and conducting various inquiry interviews and surveys to get a better grasp on the user perspective.
From the comparative analysis data we were able to better identify a gap in ‘meaningful connections online’ and what current social media sites are providing:
We followed a data driven approach based on various collections of user centered feedback and individualized research. We had a claim, and we needed to back it with comparative research and data surrounding how user’s feel when using social media.
The first phase in research consisted of independent research- following processes such as comparative analysis, gathering research on pre-existing studies, and conducting various inquiry interviews and surveys to get a better grasp on the user perspective.
From the comparative analysis data we were able to better identify a gap in ‘meaningful connections online’ and what current social media sites are providing:
Our target market is for all genders 16-80, who live in English-speaking countries, and like to easily share personal content to those that are close to them. For this research, however, we’ll be targeting potential users aged 18-25 on the presumption that young users are crucial to a platform’s success.
The screener survey consisted of 15 questions surrounding the participant’s social media usage habits. We also used this opportunity to validate early assumptions, asking high-level questions about users’ perceptions regarding privacy and their social media connections’ meaningfulness.
Lasting four days, the survey garnered 250 responses with some notable results:
Next step in the research was to have a discussion with our users. ‘I like, I want, What if’ exercise allowed us to open a discussion with our users about what they value and what they wish from social media platforms. Here are our main takeaways:
User interviews also helped us tremendously in understanding our users more. With over 200 minutes recorded and over 33,000 words transcribed, we used the method of inductive coding to find common concepts throughout all of the interviews. These commonalities guided us in defining our features. The most important concept that we found was that most meaningful online connections are formed around repeated engagement through anything that most closely resembles face-to-face interaction.
Through our research, we found that the main obstacle getting in the way of meaningful interactions was a lack of privacy on current popular social media platforms. Our solution was to make privacythe foundation of our app’s design, rather than make it an option in the settings like most other social media. Here’s how we went about doing this.
One of our first challenges was designing a home screen that allowed the user to easily organize and view their connections. We decided to use ‘groups’ as a way to filter content. Here are some of the various iterations we went through before landing on our home screen:
Prototypes exploring different ways to create and organize groups:

Since we wanted to create a place where people could post privately, audience control became our design’s central focus. We decided that a way to simply control who can see your posts would be to organize your connections into groups. Every time the user makes a post, they can choose precisely who can see it. They can select one or multiple groups, and even individual friends. This ensures that the user knows exactly who can see their content, ensuring that they can post with a sense of security.
Early prototypes showing ways to control post access:


High-fidelity prototype on post access screen:
Designing for Pluto was a highly iterative process, factoring in things such as color theory and associative psychology when developing the brand.
When dealing with a social media interface, it’s important to try and maintain a clean, blank slate- instead of trying to create a kind of perception with the interface, allow for the user driven content to speak for itself.
Our design incorporates all these ideas into one, by creating an interface that is both stylish and interplanetary as well as a blank slate to best feature user’s content.

First few iterations on colors and typography

Our home screen features a fun way to play with your connections and navigate from group to group. We wanted to incorporate that same feeling of delight throughout our app. So, we accompanied an animation with the ability to ‘heart’ a post unlimited times.
Written in Node.js with a Mongo database, Pluto is working off of 39 separate endpoints, each controlling a different action in a very specific way. We developed a few unique concepts to help us in making sure we can push features quickly while also making sure the code is high-quality. With a privacy focus, the server also ensures each piece of data sent with every request is secure and private.
One example of our privacy-first design is our commenting system. If you’re not friends with someone, we don’t want their name visible at all on the platform. So what happens when a stranger comments on your friends’ post? The backend now must prepare each comment section, ensuring that if a comment was posted by someone you’re not friends with, that poster’s name is changed to a pseudonym. We want that pseudonym to be the same if they comment multiple times, but also want it to change on different posts. So, we introduce dynamic name changing each time comments are loaded and sent from the server, to ensure each user’s privacy.
Our frontend is built in react native, which allows us to share code between iOS and android instead of writing, updating, and maintaining two totally separate codebases. It also gives us the performance and hardware access of a native app, like the camera and push notifications, but with the convenience of writing in a language we’re all familiar with.
Our original intent when embarking on this project was to not only design and develop a professional quality mobile app packed with fun interactions and deploy it publicly, but also to assess whether creating a virtual environment where users have more control over their privacy would make it easier to strengthen and maintain virtual relationships.
Pluto has since accumulated over 150 active users during our beta testing, many of which have remarked that they feel more comfortable sharing personal content in Pluto than any currently existing platform. We feel this proves the potential for more intimate relationships online, which are only becoming more relevant and desired in our current state of physical isolation.
Boldly is a unique marketing platform that connects like-minded creators and brands. Social media marketing is one of the most promising and profitable new forms of advertising, yet the industry often lacks accessibility and sincerity. Rather than focusing on high budgets or follower counts, Boldly runs on a personalized matching algorithm based on mutual values and interests.
IDM
CCI
Advisors

Contrary to traditional marketing techniques, social media marketing allows brands to target specific audiences and gain their trust through relevance and reliability. In 2018, 87% of U.S. consumers purchased a product because a company advocated for an issue they cared about. As consumers become more conscious in their shopping habits, marketing campaigns are shifting focus. Now more than ever, care is our greatest currency.
In order to best understand which problems we wanted to solve, we conducted in-depth research on the ins and outs of social media marketing. This began by identifying our target audience and potential users. After speaking with content creators, brand managers and legal professionals from a variety of backgrounds, we were able to form a well-rounded understanding of what success looks like in this market. We found that Boldly competitors have a high barrier of entry – therefore ignoring a large population that can benefit from having a strong presence on social platforms.
Coming into the year with an existing product was beneficial, but this meant that we had some gaps to fill. Thus, our focus for this year was to dive deep into research for our collaborative contract feature. Our intention is to bring more transparency and communication to the processes surrounding contracts, specifically in the influencer industry.
Our research shows that:

Boldly came into fruition through collaborative meetings, copious research and many iterations of usability testing. Our design process followed an agile workflow, which means our process was iterative and showcased a human-centered design — not only within our app, but also within the structure of our team. By following this process, we have created a platform that is transparent, accessible, and familiar.

We started this project in September 2018 for our Interactive Digital Media Junior Workshop. We created a front-end prototype that showcased our user-centered design and won two awards! After six months, we still saw many opportunities for growth and refinement. So, we teamed up with our talented external team and restructured to bring Boldly into the senior project.



In order to create a seamless experience for our users, we put a heavy emphasis on qualitative and quantitative research. This consisted of investigation into the social media marketing industry and existing tools. In the fall term, the four of us took a deeper look into usability surrounding legal agreements. Our findings validated our initial goals and introduced us to some pertinent information that helped guide further research throughout the year.
Much like our general workflow, our research followed a cyclical process. Each major feature began with user interviews to give us insights, which helped us identify the problems to address and understand how potential Boldly users behave. Using our new understanding of our audience, we moved onto whiteboarding possible designs solutions and after getting our initial ideas down we would conduct exercises with users to find out what features they would like to see in our app. For our team, design is a collaborative process filled with whiteboarding exercises, detailed sketches and post-its galore. Based on these work sessions, we figured out how to incorporate user’s input into our product before moving onto the more polished design stages of creating an interactive prototype showing how our app functions.
As we developed the prototype, we conducted usability testing sessions to ensure that the flow of our app was natural. When key themes were identified, we went back to the drawing board and continued testing until all issues were resolved. It was, for example, through conversations with our potential users that we found the perfect length, order, and format for the onboarding survey. Once elements were finalized, we documented them in a design system for handoff to the development team.
Throughout the year, the development team was in constant communication with us, hard at work on documenting and developing our designs. After researching and comparing our options for development tools, we decided on using Amazon Web Services to host our servers, PostgreSQL to build our relational database, the Phoenix elixir framework for our back end code, and we decided on a React Native front end for flexible multi-platform development on iOS and Android.

The team also made use of many tools made for working collaboratively. For organizing tasks and tickets, we used Clickup. For version control and organizing development, we used Github. For shared document storage. We used Google Drive, and for designing the prototype together, we used Sketch and Figma. For team communication, we used a Slack workspace throughout our process.
The opportunity to continue a group project over two academic years brought us many lessons. For example, working across two colleges had its challenges. Each team had different processes and vocabulary, so establishing clear communication and efficient management systems that worked for the full team was very important.
We always try to stay on top of the curve and make realistic plans, but inevitably we had to deal with hard decisions such as scope cuts and unexpected changes — like a global pandemic. The experience of working on a project for two years taught us invaluable lessons about project management, multidisciplinary teamwork, and above all, perseverance.
We finished this process with an award winning Android build and user-experience design. We are proud to announce that this past Tuesday, Boldly took first place in the Corporate category and third place overall in the CCI Senior Design competition. Regardless of your level of experience, Boldly allows you to connect with authentic people who are dedicated to the same cause.
IDM232: Scripting for Interactive Digital Media II
By Melissa Gabriele – 2020
IDM232: Scripting for Interactive Digital Media II
By Gabby Hoover – 2020