Three Pillars of Development

Development and design insights can come from anywhere

For the month of July, I've been working on improving the design of the Left Off app, specifically the screen that shows the user's saved videos (the Videos Screen). Throughout this process I've been learning a lot about UI/UX design and how to practically improve the app as a currently solo developer. Over time, I've found that three major concepts of building a great product have started to emerge: (knowing) Features Users Find Valuable, What You Know how To Implement, and A Great Design. Below are three examples of how these pillars, or concepts, have influenced the app's design. Each example can be referenced in the first image at the top.

These three areas illustrate how the main elements of building an app can overlap

Feature Users Find Valuable - Updating Ad Placement

First, and arguably most impotant, is to make something that helps solve a user's problem. If someone needs to solve a problem severely enough, they will use a solution even if the implementation or design needs work. Think of being on a road trip. When you needed to use the bathroom, depending on how badly, you'll probably take any option available for relief (it can be the dirtiest of gas station bathrooms)! If you are able to accurately determine a problem that a group of people share, this is a major accomplishment. With regard to Left Off, there are many examples where this can be applied, but one example is the placement of the advertisement (ad) in the Videos Screen. In the earliest verisons of the app, I had an ad placed on top of the user's video entries that appeard at the bottom of the screen. This was not a great idea because it directly prevented the user from using the app properly. I've since moved the ad from this screen, making the experience much better.

What You Know How to Implement - List Item Height

Now that you've learned what your target audience wants, you have to know how to create it and get it to them. This part consists of putting things together to make a working solution. For Left Off, I use React Native for development, Google Firebase for saving user's data, and the Google Play Store and Apple App Store for distributing the app to users. There has been a ton of learning that has gone into this for me, given that both iOS and Android have their own types of bugs to resolve (not to mention all the requirements of getting the app published in the Google Play Store). One example of knowing how to implement something for Left Off is with optimizing the height of each list item in the Videos Screen. React Native's documentation for FlatList (used in the Videos Screen) and VirtualizedList mention optimizations that can be achieved by making each list item a consistent height. Once implementing this, I realized how much it helped to also improve the app's design.

Has a Great Design - Adjusting Background Colors

A product's design can immediately draw users in or push them away. Given that humans are very visual, we tend to judge books by their cover, for better or worse. Working on improving the design of a product can win over a lot of potential users, at least initially - so it is important to back this up with functionality. With Left Off, one major design improvement was changing how a list iteam was displayed when a show was set to complete. At first, I had the item background color change from its base color (a light-blue color) to a green color. I didn't choose these two colors specifically, but they just came to mind as I was coding. As I gathered feedback, I quickly learned that this didn't look great. The interesting thing is, I knew this in the back of my mind and put it off for the sake of creating a minimum viable product. However, many of those that I showed the app to early on noticed that before other features. I decided to change the completion to a small green check-marked circle which has increased visual appeal, so hopefully usage will follow.

The larger you can make the "Golden Spot" the better

The more these three pillars are able to overlap, the better. You figuratively push in the top left circle, Features Users Find Valuable, by learning more about your target audience. Sure, your family and friends may tell you that all the features are great, but they will also tell you what isn't if you ask. It's important to learn what actually solves a user's problem. Doing so is easier said than done, but the more you can piece together what users really need, the more overlap you get between the pillars/areas.

For What You Know How to Implement, this area expands by learning more. This can come from classes, learning from others, by doing, etc. It's important to be strategic here and learn what is relevant and timely to your current stage in development. You wouldn't want to be learning how to implement playing media in your app, if you don't have account creation working properly. That's how you "push in" this circle, while expanding your knowledege. Also, although the circle says "What You Know..." this also includes your team. Working with others with complementary skills is a way to more quickly expand this circle.

The Has a Great Design area is the skill I'm excersizing the most at the moment. Pushing this circle in can happen in many ways. I've found that sitting and staring at a screen, imagining how different elements can be improved is very helpful for me. Additionally, since my background isn't specifically in design, I've been learning and implemented design strategies from others to help.

These concepts are related to app development and design, but definitely can be applied to essentially any building process. There is still much more to learn, but these are some of the takeaways I've experienced during this process of improving this single screen in the app. Thanks for reading!