Iterating on Devcompile

August 3rd, 2020

Los Angeles, California

A few weeks ago, I set out to make improvements on one of the projects I created in Juno’s Web Development Bootcamp. Here is a little bit about how that went.

A bit about Devcompile

During my time at bootcamp, I was quite curious about how social media apps functioned and wanted to learn more about how developers created a feed of content that users could scroll through. To dive deeper into this curiosity, I decided to develop an application that would take data from the Dev.to API and create a scrollable feed for users to browse. I also thought this might be a good time to learn about how I could save those articles for consumption at a later time.

The Stack in Version 1

With this being our fifth project in the bootcamp, we were tasked with using React for this application and also taking advantage of either an API or Firebase for storage, or both. I thought this would be a great opportunity to set high goals and utilize React while using both an API and Firebase. Styling was done with CSS3.

Problem Statement

To push my app just a bit further, I had to ask: what key elements of a social feed make the experience as fruitful for the user as possible?

My First Steps

In order to get a better understanding of what user interactions were most influential to a good user experience, I set out to do some heavy research on user experience on social media applications and also needs feeds. Lots and lots of scrolling was done and lots of buttons were pressed. One thing that really stuck out to me was that all user interactions on the applications I tested, gave really good feedback. Active states, modals and all different kids of animations really made sure that I knew what was going on as a user.

I also thought this would be a really good time for me to leverage my social circle and get feedback from non-developers and semi-professional social media scrollers. Here’s a few of the points that were brought up:

1. Search field colour scheme is too light

2. Swipe for actions

3. Compile button feedback

4. Addition of a footer on all pages

5. Back to top button

The Stack in Version 1.1

I have some very lofty plans for what I want to do with this app for version 2 but, for now, a few slight changes for version 1.1 should do. After collecting my feedback and research, I decided that my top priority add would be to ensure that users receive feedback when compiling an article. This is, after all, the primary design of the application - to save articles for later consumption.

While adding this, I also thought it would be a good idea to get started on implementing a few of the new things I’ve learned post-bootcamp. With my new components, I would be using CSS-in-JS through a framework called Emotion. This will help me keep both my code and styles organized a bit more clearly, allowing for ease in future changes.

What I learned from this

This undertaking was a little bit new to me as typically, my wife is the only person testing out any of my creations. However, going through this experience, I’ve learned first-hand that getting real user experience feedback is quite important especially for tools that users will interact with lots. The one thing we we humans have most in common is that we all have gone through different experiences in our lives and thus, have a different perspective on all things. As a developer, I want to continue to tap into the experiences of those around me to take my apps to the next level. To those who have helped me level up at this point, cheers!🍻

Written by Lawrence Hebia, a web developer from Toronto, Canada. ✌🏼