< back to all projects

Peerdea

Fall 2019

Skills Gained

Overview
Languages and Frameworks

In this project, I used React Native with Expo. I had previously learned React.js before, but this was my first time with Native, and also my first time building a mobile app with Javascript. I had not used the many frameworks associated with Javascript app development before. I learned about using GraphQL to query the database. Expo was helpful in allowing the same code to be used on both iOS and Android apps.

General Software Development Skills

Since I was not the first person working on this project, in order to fix old features and add new ones, I had to read through the codebase and figure out how the person before me did what they did. This project taught me about developing software in teams. In my classes, I had used Git for version control, but I pushed directly to master because there were no other people working on the code simultaneously. I learned to use Git and Github more effectively while working on this project. I learned about the importance of well-styled and well-commented code and commits. Not only did that make it easier to look back on what I previously worked on, other people would be more able to understand the code I wrote.

Reasearch and HCI

This project was my first exposure to research and academia. During the research period, I had to keep in mind that this was a small project and I was one of two people working on the project at that point in time. This meant that we had to sacrifice absolute quality in order to get features done on time. Instead of trying to perfect the app's features, I had to settle on a model that just works and gets the job done. In research and development with small teams, it is more important to deploy. In addition to resource (time, knowledge, and money) limitations, while developing the app, I kept in mind the motivation for this project in the first place. Instead of just delivering a product, this app is used for studying human behavior. When I thought about how to improve upon the app, I had to constantly ask myself whether these changes would help us achieve our research goals.

As a creator myself, I put myself into the shoes of people who would use this app. I thought about what I would want in this app if I were a small creator using Peerdea for early-stage design improvement. Always having the user in mind is a central aspect of HCI, because we want to think about how people are going to interact with this new piece of technology. In addition to looking at the app as if I were a user, I also asked my friends to try out the app for me and give me all their thoughts as they explored Peerdea for the first time. This type of heuristic evaluation allowed me to gather opinions from different points of view, and my friends caught many issues that I overlooked while testing alone. After discussing with Yasmine, I did not implement every suggestion. Even for suggestions that go unimplemented, it is important to know what users are thinking when they go through the app.

Near the end of the semester, I had the opportunity to present the app and the ideas behind it to groups of other students and staff in the HCI institute. I presented the app on an iPhone 11 simulator, going through each screen and explaining why we designed the app as we did. After presenting, I received questions and feedback from the audience, which provided more direction for the future of the app. Peerdea is still incomplete, and this demo gave me more insight about how to improve upon existing features in ways I did not think about before. This actually shows the importance of early feedback, which is a main motivator behind this project. This live demo allowed the audience to play around with features of the app if they wished, and when they asked questions about how each component worked, in addition to verbally explaining features to them, we also showed them the features live in the app itself.


App Features and Contributions

Home Page

When I first began the project, the app had an icon at the bottom tab that said 'Home'. Upon clicking it, the user would be logged out. This felt very unituitive to me, because I expected 'Home' to bring me to some sort of screen which would show me the central parts of the app. To solve this problem, I designed a new home screen for Peerdea. While brainstorming what the home screen should include and what it should look like, I had to think about the app's intent as whole, because the home screen should show the central part of the app. In the previous state of the app, the user could only be logged into one group at a time, and it was inconvenient to switch between groups. I decided to make the home screen a place where the user could see all the groups that they were in, and switch between groups with a single tap. It would also be a place where they could add new groups. Groups are a crucial part of the app, because the type of content that a user is comfortable sharing greatly depends on the type of group as well as who else is in the group.

The home screen was the first new component that I added to the app. I had to design the home screen to fit in with the theme of the app overall. To do this, I looked over the code of the other features of the app, and applied existing styles. In order to insert the new home screen into the app while keeping the other pages of the app easily accessible, I also redid Peerdea's navigation system so that logging in would bring the user into the main body of the app. From there, they could add groups. (Previously, one had to both log into their user as well as log into a group in order to see the rest of the app.) The 'groups' portion is now integrated as a part of the main app body. Now that there was a home screen, I could add session remembering. Previously, users had to log into both their user and their group every time they opened the app. This is time-consuming and inconvenient, so I made it so that users that were already logged in would be redirected to the home screen instead of to the login screen.

Push Notifications

I added a push notification system to the application, so that when someone commented on a user's post, the user would be notified. This was implemented with the expo server sdk. I also had to update the schema for the backend so that notifications could be pushed to the right user's device.

Before the notification service was implemented, Yasmine and I went over multiple ideas of what a notification system would look like. One of our ideas was that all group members would be notified when someone in the group posted a concept. However, in our daily lives, constant notifications may be overwhelming. If a person was a part of multiple active groups, there may be a lot of posts. By putting ourselves in the shoes of the user, we realized that we wanted to review and give feedback on concepts on our own time. However, we would want to know when someone gives us constructive criticism on our concept, because we want to make our design as good as possible before we deploy our finished product to the marketplace. By going through this line of thinking, we decided to only send out notifications to the user when someone commented on their posted concept.

Image Caching

This app is centered around posts containing images. Without caching, the app would have to load posts from the server every time a user switched to the screen showing all the posts, which was both slow and costly. Caching images is a small but important backend update that allows faster navigation and loading.

UI and Internal Code Improvements

Everybody on the team that had previously worked on the app mainly used iPhones of the same screen sizes, so when I started up the app on my tablet, the app did not look great. A great part of many of the screens was empty. For phones with smaller screen sizes than iPhones, some buttons dropped off the bottom of the screen or were misaligned to be unclickable, which made the app overall unusable. I changed much of the styling to use screen percentages instead of absolute pixel sizes. I also added padding around various text elements to give the app a more comfortable look.

During the process of restyling the app, I noticed that there were a lot of style elements that stayed consistent across the app, but were re-declared on every screen. I took the repeated code and collapsed it into an external style sheet, cleaning up the code base and making it easier to refactor for future stylistic changes.


Background and Motivation

I worked on this project at CMU during the Fall 2019 semester with Yasmine Kotturi, a Human-Computer Interaction PhD student, advised by Chinmay Kulkarni. Throughout the semester, I learned about software development as a team, front-end development, what HCI is about, as well as general research practices.

What is Peerdea about?

With the introduction of large social media marketplaces such as Instagram, small independent makers and creators can share and sell their work on the internet instead of just locally. A big platform allows for more visibility, but it may also be a daunting place for people who are not used to the global marketplace. Creators may want to know how to make work that users want to purchase. To improve upon their work, many creators ask for feedback on their designs, but they often do so when they are already too far into the design process and unable to make big changes. Peerdea strives to encourage creators to create groups with trusted peers to share early-stage ideas (as sketches or prototypes) so that they can improve upon their designs as much as possible throughout the design process. In addition, a smaller space allows creators to feel secure in sharing their concepts, without fear of mockery or theft. In Peerdea, group sizes cap at 25 people, because when sharing unfinished work in online groups, smaller groups are more trusted. This allows the app to create trusted online spaces for small business-owners and amateur creators to grow.