The Making of Collect

A 5-Step App Design Process to Reimagining Social Media

There are a plethora of social media platforms available, many very addicting.

With the rising popularity of mobile phones and the increasing availability of the Internet, people spend more and more time on social media apps and screen addiction has grown dramatically over the years. With Collect, I am reimagining a new approach to social media that encourages users to spend more time enjoying the present and connecting with others, rather than indulging in the endless feeds. In the following section, I will entail how Collect comes about.

Step 1: User Interviews

By directly observing and interacting with our potential users, I studied why and how users engage with their current social media platforms. I found three major motivations for users to use social media: 1) the need for connection 2) the need for recording memories, and 3) the need to get rid of boredom.

User interviews offer us key insights into how I could potentially reimage social media. I decided to design Collect with the following goal in mind:

By creating a clean and efficient platform, people will reduce the amount of time on social media while still being able to feel the necessary human connections and record their life.

Step 2: Storyboard

In order to have a more vivid representation of how users might interact with Collect, I created a fictional character Jack and drew out how the platform could integrate into his daily life while serving the goal I created earlier.

A terrible drawing but illustrates how our users would engage with our platform.

Step 3: Prototype

Drawing out the storyboard allowed me to consider the key features for an MVP Minimal Viable Product). I started with “paper prototyping,” meaning I hand drew what the interface might look like as well as important features.

Again, a bad drawing but the key to understanding important features.

Once I modified my paper prototype to a satisfactory level, I started to create wireframes of the end product using Figma.

Step 4: User Testing

After I completed key interfaces for a wireframe prototype, I recruited several friends and families to test it out. Though I saw a lot of memes of developers and users not on the same page, it is still amusing to see how they interact with my wireframe in completely unexpected ways.

For the multiple user testing I conducted, I found a couple of areas for improvement. Here are just a few interesting observations and adjustments I made:

Users could not differentiate a collection from a post, so I used different icons to represent each.
Users have trouble finding posts with certain keywords, so I added a search feature.
Users want to explore other people or communities with similar interests, so I added a recommendation system to improve user engagement.

Step 5: Turn into an app!

To turn the ideas into an actual product, I learned to code in Flutter for cross-platform support and utilize Firebase for cloud service. This is perhaps the most time-consuming part, but it is well worth the effort!

For the full trailer, visit: https://youtu.be/KhcPTrxbY3s