Cloning Instagram for a Doctoral Study on Social Media

Context

The goal of this project was to build an Instagram clone tailored for a doctoral study being conducted at the University of Toledo.

The study focused on the impact of different content types on users and experimented with varying levels of interaction to see how users were affected.

As a result, this website needed to mimic the look, feel, and functionality of Instagram.

My Role

I worked alone on this project, meaning I was in full UX Engineer mode. Most of my time was spent doing full-stack development. My main focuses were functionality and feel.

The site was built using Django, the web framework for Python. This allowed for database construction and robust security with relatively little effort.

For the front-end, I used Bootstrap to quickly get a solid UI setup. From there, it would require regular CSS to transform it into anything resembling Instagram.

Planning

Long before even meeting the client, I already had a version of the project built.

A year prior, I had built a blog site based on a series of tutorials from Corey Schafer in order to learn Python and Django (learn why!). That version of the site was never launched and was only utilized for learning purposes.

Client Goals and Needs

At the first official meeting with the client, I shared the blog site and discussed with them how I could make changes to it to work for their needs:

• Photo-sharing was vitally important. The client planned to use photos as the form of content they were testing, and wanted it to mimic Instagram in both look and feel.
• Likes and comments were required. They planned on testing how liking and commenting on posts affected users, which meant those features needed to be included.
• Researchers needed control over what users saw. To ensure consistent results, researchers needed to place users into different test groups that would dictate what content they saw. This also meant that users could not be allowed to follow accounts like they would on Instagram.

Design

Since I already had a website built and knew that we were looking to mimic Instagram, I didn't spend much time on early design. I wasn't aiming to rebuild this site from the group up, but rather morph it into something resembling Instagram.

Ultimately, this project would mainly be about front-end and back-end development.

Early Development

After meeting with the client, I focused on adding the photo-sharing aspect of the site. This would be the crux of the entire website.

Just adding this feature required redesigning a major portion of the UI to accommodate the images.

During development, the images were just saved in a folder. For launch, the images were stored on an Amazon Web Services (AWS) server.

Removing Features

Some of the study's requirements meant that features that had already been built were unnecessary, and therefore should be removed.

• Email Signup. Since the study would be completely anonymous, we couldn't collect user information of any kind. This also meant that I had to remove password recovery, which was an unfortunate side-effect.
• User Posts. Researchers would be the only users that would be creating posts, and they would be able to use the admin side of the site to do so. I decided to remove the feature to avoid confusion.
• User Profile Pages. Since most users wouldn't be able to post, there was no purpose in a page that showed all of a user's posts. Removing this page also saved many hours of development time.

Imitating Instagram

At this point I began mimicking Instagram's look and feel. It started with simple things like fonts, colors, and general layout.

At this point, the site starting to take shape as an Instagram clone in both form and function.

Adding Features

However, some major features were still missing from the site, which were crucial to meet the client's needs:

Likes

A key part of Instagram, adding likes was straightforward. I used a junction table to link the post and the user, with a counter on each post to reflect the like count.

Comments

Essential for engagement, comments were managed similarly to likes using a junction table. To avoid clutter, only the author's caption is visible, with other comments accessible via a modal popup—a solution inspired by Instagram.

Test Groups

Critical for researchers to study Instagram effects. I created two tables—one for each test group and a junction table for user tracking within groups. On sign-up, users were auto-added to the least populated group, and post visibility was adjusted accordingly.

Improving Responsiveness

Aiming for dynamic interactions like Instagram, I attempted to 'Ajaxify' the site for seamless like/comment actions without page reloads. However, due to time constraints and backend integration challenges, this feature was shelved for timely completion of others.

Launching the Site

To launch the site, I hosted the site on Heroku and stored images on AWS.

I also added a gradient to the home button and a stacked wave image (from Haikei) to the login screen to add some personality.

With those added flourishes, the site was ready to launch!

Results

The study is still ongoing, but the site has been running successfully for months now.

The site has over 500 users as of July 2023, and the research team is collecting useful data for their study. They are still analyzing the data to learn more about how different social media content affects people and how they interact with it.

The results will help them understand the impact of various types of content on users and how they use the website. The study is making good progress, and the team is excited to find out what they will discover from the data they have gathered so far.

Appreciation

I wouldn't have been able to even start this project without Corey Schafer. His tutorial on Django allowed me to build the initial blog site and gave me the skills to expand it out further into the final product.