the-pros-and-cons-of-building-websites-with-third-party-products

Like most industries, web design has changed quite a bit over time. In its early days, people put websites together using a very DIY process. Code was often written by hand in a simple text editor.

But as the industry evolved, so did the way we build sites. Many of the more manual portions of the process have been replaced by tools that bring added convenience and functionality.

For example, many designers prefer to use a CSS framework such as Bootstrap, rather than reinvent a new UI for each project. Likewise, it’s common practice to install a copy of WooCommerce as opposed to building a shopping cart from the ground up. Much like the assembly line forever changed the automotive industry, this massive array of available tools and assets have changed web design.

This power and convenience come with a lot of benefits. Yet, it can also put us into some very difficult situations. With that in mind, let’s explore the effect this has had on modern web design.

Rapid Development and Powerful Features

The old way of building websites was, even at it’s best, inefficient. Constructing everything from scratch (or even your own personal library of code) took up precious time and resources. Projects took longer to complete. Plus, complex functionality was beyond the reach of the average designer.

The fact that we now have at our disposal tens of thousands of free and low-cost pieces of software has leveled the playing field. It means that a solo freelancer can compete for bigger jobs or that a small-time developer can build something that could potentially be used by millions.

But it’s not just professionals who are benefitting. These days, even novices can clear these formerly formidable hurdles. For some, it might be as simple as installing an attractive WordPress theme and a selection of relevant plugins. Within a few hours, they can be selling their products and services online.

A large part of the design and development process is now picking and choosing which pieces we want to utilize. Everything from simple UI components to high-end functionality is within just about everyone’s reach.

A city skyline with motion blur.problem, there’s not much for a designer to do other than wait for a fix (and placate an impatient client).

In a worst-case scenario, perhaps that bug fix never comes. At that point, you’re stuck with something that doesn’t work and forced to find an alternative. While you may indeed find a suitable replacement, it’s still a frustrating experience.

Security and Privacy Risks

This also opens the door to potential privacy and security concerns, as well. We’ve already seen previously-safe software fall into the wrong hands and used for not-so-nice purposes. And the potential for further abuse is always there.

And while the vast majority of people behind these products are trying to do the right thing, the fear of a single bad actor is well-founded. The problem for anyone building a website is that it’s just impossible to know who to trust. Even if you think you’ve made the right choices, the situation is fluid and can change without notice.

Man holding a key in hand.

building-your-personal-brand-with-your-developer-blog
  1. Why a blog is important for every developer
  2. Advantages of your developer blog
  3. Six beliefs that stop you from writing
  4. How to start blogging
  5. What’s next?

Content creation is one of the most popular and efficient ways of building personal brands, accumulating an audience around a product, showing others your point of view, and sharing knowledge. When you are a developer, you can also use content on your developer blog to level up your skills as well as your career. 

In this article, I’m going to show you why running a developer blog is a good thing and why you should not consider blogging as a way to gain attention but as a way to build your personal brand and position in the IT world. Surprisingly, you don’t have to be an expert in any technology to build your own blog from scratch and it doesn’t have to be a time-consuming process. If you are not yet convinced why you should run a blog as a developer, then let me show you how many benefits you can get from it. In the modern world, you really have to sell yourself, and writing content is one of the most efficient ways to sell anything.

Why a blog is important for every developer

The IT industry is growing each year, and there are more and more developers present these days. If you are not satisfied with mediocrity, you have to show up so that other people—your potential clients or employers in the first place—will be aware of your capabilities and skills. Running a blog is one of the best ways to increase your visibility among the crowded marketplace of other specialists and experts, and sharing your experiences and projects with others will increase your audience’s trust in you.

  • You should be visible to clients / employers / recruiters – If you want to be noticed, then you have to show up. Many times, people are hired not because they had better skills than their opponents but because they showed up and presented well in front of the employer. Only around 1% of developers run their own blog frequently, so you are going to join an exclusive group that puts you above other developers who don’t share their knowledge online.
  • You should constantly verify your knowledge – This idea is not comfortable but it’s so powerful—unless you want to verify your knowledge in the production environment and produce extra costs for your company. Knowledge is one of those resources that has to be up to date every day. Nobody is perfect, but the IT community is very friendly, so you can count on other, more experienced developers to let you know if they have a different point of view or think your approach is not right. You always validate your knowledge by confronting it with other people, and the more you do it, the better you become and the fewer mistakes you will make as you grow.
  • Soft skills are as important as technical skills – You need soft skills if you work with the clients directly, collaborate with a team, or even just write documentation for your software. Blogging is one of the ways you can dramatically improve your soft skills. By writing, you practice how to form your thoughts and share your ideas with other people. Albert Einstein once said that if you are not able to explain something in simple words, you probably don’t know it well enough. In fact, many developers out there have incredible technical knowledge, but because of poor soft skills, they are not able to explain it clearly in front of another person. This makes them seem less great than they really are!
  • CV does not matter anymore – When you show up and share your knowledge, it’s obvious what type of skills you have. Only the HR department might be interested in your Curriculum Vitae— it really won’t affect the way other people look at you.

Get the latest articles on Growing Your Personal Brand delivered straight to your inbox.

Advantages of your developer blog

There are many indirect benefits from blogging, but there are also some specific ways you can use it to speed up your work and build extra income. Below are some advantages of blogging:

  • Generate income from sponsored articles – If your blog becomes popular, you can start writing articles for partners on your blog or partners’ blogs. This is possible when you show up and other people notice your skills. Collaboration like this can leave both sides highly satisfied.
  • Sell your own books, courses, etc .– When you give out your knowledge for free, you build an engaged community that is ready to buy something from you because they know you well and identify you with quality content.
  • Build a strong personal brand – A strong personal brand attracts everything good in any career: proper people, chances, opportunities, money, and so much more. If you know someone well, you wish them the best and are ready to help them whenever there is a chance. If you build your brand by writing a blog for free, then you have many people around who know you and are grateful for the knowledge that you share.
  • Do not solve the same problem twice – When you face problems that you’ve solved in the past, you don’t always remember exactly what the solution was. When you are blogging frequently, you can always search through your blog and find the answer—it’s as simple as that.

Six beliefs that shouldn’t stop you from writing

Even if we feel that we are ready to start our writing journey, there might be some beliefs that will stop us from doing it. Be aware of those mentioned below and keep doing great work.

    • A blog is useful only to teach other people for free – if you are not an altruist and teaching others is not your main objective, you can always treat your blog as a diary where you can track your progress. A blog is a great business card for your future employer because it will expose all the skills that you have gained through the years.
    • You don’t have anything interesting to say – write about your daily challenges unless the code you want to post is company IP. If you still think that it won’t be interesting then try instead to gain some new skills and write about the process you are going through!
    • You don’t want to write about something that has been described many times before – each of us has our own unique voice so even if you are going to write about a well-known topic, you are going to do it differently. Undoubtedly there are some people out there that will like your style of writing, eager to hear your unique point of view.
    • Nobody is going to visit my blog – you don’t have to be great to start but you have to start to be great. Remember about the greatest writers of our times? Their writings were rejected many times before they finally publish their work and now have thousands of readers. All you have to do is to keep creating and showing up every single day. Show your articles to your workmates, publish a link in the related websites and you will see that the visits counter will grow every day.
  • I don’t have time for blogging – then you might have trouble selling yourself without a well-developed portfolio that you’ve put together over time in your blog. With every article created on the blog, your portfolio grows and you are able to show what you are capable of any time when there is a need for this.

How to start blogging

If I have convinced you by now that you should start a blog, don’t worry!  It is not that hard to do. First, decide on your blogging engine. One approach could be to use WordPress.  If you love PHP, great! But if you’d rather build a blog with a modern programming language to further strengthen your skills and also to show them off then I’d recommend using a headless CMS.  You can even do so without building the whole blog system from scratch.  Doesn’t that sound great?

This is where  ButterCMS can help you achieve your goals.. You can use a simple yet powerful API to build a blog with whatever technology you like, focusing on the content creation instead of wondering what database you should pick up for your project. You can even use the awesome Hugo framework for building fast websites and take advantage of the JAMStack to quickly build your blog. Headless CMS is a great alternative for monoliths because it gives you full flexibility, a lot of features, and ButterCMS is free for personal, developer blogs like yours.

What’s next?

You already know that blogging is a perfect way to build a personal brand and promote products, ideas, and businesses. And now you know what technology you can use to start your blog platform without wasting time and money. So, the next step is to jump into the creative process and begin writing some articles!

Start small and use a Headless CMS.  It’s easy to do because you have everything you need, no matter how big your goals are. Now jump into Butter and launch your writing career!

Get the latest articles on Growing Your Personal Brand delivered straight to your inbox.

About the author: Paweł is a self-made writer of the digital era, IT samurai and problem solver who loves Ruby. He writes for human beings and computers at pdabrowski.com and focuses on soft skills in the software creation process.

building-mobile-apps-with-ionic-and-react

React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps. In this tutorial, we’ll be using Ionic and React to build a mobile app from scratch.

Ionic has recently added support for React; so now, React developers can get the advantages of Ionic to build hybrid mobile apps and progressive web apps (PWAs). In this post, we’ll show you how to get started using Ionic with React by building a simple demo app from scratch.

Prerequisites

In order to properly follow this tutorial, you’ll need the following prerequisites:

  • recent versions of Node.js and npm installed on your system,
  • working knowledge of TypeScript and React.

You can check that you have the latest Node.js version (v10) installed by running the following command:

$ node -v

Introducing React And Ionic

Let’s start with brief introductions to both React and Ionic.

According to the official website:

“React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called ‘components’.”

React focuses on building UIs and doesn’t provide any built-in tools for the common tasks required in web development, such as fetching remote data and routing, so you’ll need to use some existing third-party libraries for these tasks.

According to the Ionic website:

“Ionic Framework is the free, open-source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web — all from a single codebase.”

Basically, it’s a set of UI components that you can use with plain JavaScript or any popular front-end framework or library, such as Angular, React or Vue, to build a hybrid mobile app and PWA.

In this tutorial, we’ll see and use some Ionic UI components such as the following:

  • IonMenu: With this, a navigation drawer will slide in from the side of the current view.
  • IonToolbar: These top bars are positioned above or below the content.
  • IonHeader: This parent component holds the toolbar component.
  • IonContent: This component provides a content area, with methods to control the scrollable area and other things. You need only one content component inside a single view.
  • IonList: This component contains items with similar data content, such as images and text. It’s made up of IonItem objects.
  • IonItem: This component may contain text, icons, avatars, images, inputs and any other native or custom element.
  • IonButton: This component provides a clickable element, which can be used in a form or anywhere that needs simple, standard button functionality.

Installing Ionic CLI v5

Ionic’s command line interface (CLI), version 5, has support for creating Ionic projects based on React. So, let’s get started by installing the tool from npm.

Open a CLI, and run the following command:

$ npm install -g ionic

At the time of writing, Ionic’s CLI v5.2.3 is the latest.

Note: *According to how you installed Node.js in your system, you may need to add sudo before your command in macOS or Linux or run the command prompt as administrator in Windows if you get any permission errors. You can also simply fix your npm permissions or use a tool such as nvm.*

Next, install Cordova Resources (which is used to generate Cordova resources locally) and Native Run (used to deploy app binaries to devices):

$ npm install -g cordova-res native-run

These are required only if you want to test your application on a real mobile device or emulator.

Creating An Ionic And React Project

Now, let’s create a project based on React. Go back to your terminal, make sure you are in your working directory, and run the following command:

$ ionic start myApp --type=react

We use --type=react to generate a project based on React. You’ll next need to choose a starter template from the available ones. Let’s pick sidemenu for a starter template with a side menu and navigation.

After generating the project and installing the dependencies, you can serve your app locally using the following commands:

$ cd ./myApp
$ ionic serve

Your app will be available from the http://localhost:8100 address, and you can actually use your web browser to start playing with it.

Ionic is called a hybrid mobile framework because it makes use of web technologies that were originally designed to create web apps, along with a native container (Cordova or Capacitor), to build mobile apps without using native technologies for the target platforms, such as Java or Kotlin for Android or Swift for iOS.

Because your mobile app is actually a web application, you can do most development by testing in a web browser without using an emulator or a real mobile device, except for testing native device features such as the camera or the SQLite storage, in case you’ve used them in your app. In fact, it’s even possible to use certain techniques to mimic the plugins that provide the native features and do the entire testing during development in your web browser.

Cleaning Our Project

We have the app’s basic structure, with two pages (home and list) and a menu. Let’s remove the list page since it’s just boilerplate code.

First, remove the src/pages/List.tsx file, then open the src/App.tsx file, and remove the entry for the list page from the appPages array:

const appPages: AppPage[] = [
  {
    title: 'Home',
    url: '/home',
    icon: home
  }
];

Also, remove the import of the list page from the file:

import  List  from  './pages/List';

Next, remove from the App component:

const App: React.FunctionComponent = () => (
  
    
      
        
        
          
            
             } />
          
        
      
    
  
);

export default App;

The App component is the root component that gets rendered by our application. If you open the src/index.tsx file, you’ll find the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

The render() method is used to render a React element into the DOM in the supplied root element.

Theming The App

Having created, served and cleaned our Ionic project, let’s now see how we can change the colors of the UI so that it looks more professional.

Let’s get started with the side menu. Open the src/components/Menu.tsx file, and add a color attribute with a primary value to the IonToolbar, IonContent, IonList and IonItem UI components:

const Menu: React.FunctionComponent = ({ appPages }) => (
  
    
      
        Menu
      
    
    
      
        {appPages.map((appPage, index) => {
          return (
            
              
                
                {appPage.title}
              
            
          );
        })}
      
    
  
);

Ionic provides some default colors (primary, secondary, tertiary, success, warning, danger, light, medium and dark) that can be used to change the color of UI components. A color can be applied to an Ionic component in order to change the default colors using the color attribute. See “Colors” for more information.

These colors have default values, but you can customize them via some predefined CSS variables. See “Modifying Colors“.

This is a screenshot of our menu:

Ionic menu
Ionic menu. (Large preview)

Next, let’s change the color of the Home page. Open the src/pages/Home.tsx file, and set the color attribute of the IonToolbar and IonContent components to primary:

const HomePage: React.FunctionComponent = () => {
  return (
    <>
      
        
          
            
          
          Home
        
      
      

      
    
  );
};

This is a screenshot of the page:

Ionic home
Ionic home. (Large preview)

Installing Axios And Consuming A REST API

We’ll see how to install Axios and consume a third-party RESTful API in our application, and we’ll also see how to display the fetched data using Ionic card and list components.

Having themed our application, let’s now see how to fetch data using Axios. We’ll use the third-party API available from NewsAPI.org.

First, we need to grab an API key, so that we can communicate with the API. Go to the registration page, enter your information, and register an account. You’ll be given an API key; note it, and let’s continue.

Head back to your terminal, and run the following command to install Axios:

$ npm install axios --save

Next, open the src/pages/Home.tsx file, and start by importing Axios and IonButton:

import {
  IonButton
} from '@ionic/react';

import axios from 'axios';

Next, define the API_KEY and URL constant variables:

const  API_KEY  =  "";
const  URL  =  `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

In the URL variable, we’ll add an endpoint to get the top headlines from our source, TechCrunch. You can use any source you want from the available sources.

Note: Make sure to put your own API key in the API_KEY variable.

Next, define the fetchArticles() method as follows:

const fetchArticles = () => {

  return axios({
    url: URL,
    method: 'get'
  }).then(response => {

    console.log(response);
    return response.data;
  })
};

We simply call the axios() method to send a GET request to the news endpoint, and the result from the method is a promise that needs to be resolved in order to get the news data.

Next, update the HomePage component as follows to call the fetchArticles() method and resolve the returned promise:

const HomePage: React.FunctionComponent = () => {

  const [articles, setArticles] = React.useState([]);
  const items: any[] = [];

  React.useEffect(() => {

    fetchArticles().then(data => setArticles(data.articles));

  }, []);

  return (
    <>
      
        
          
            
          
          Home
        
      
      
        

          {
            articles.map(a => {

              return (
                
                  {a['title']}
                  Read
                
              );
            })
          }

        
      
    
  );
};

In our function component, we first call the useState() hook of React to create the articles state variable, which will hold the news articles after we fetch them from the API.

useState() returns the state variable, which has the empty array as its initial value and a function that we can use to change the value of the variable. We use destructuring assignment to unpack the values from the returned pair into distinct variables (i.e. articles and setArticles()).

Next, we call the useEffect() hook to perform a side effect in our component. In our case, the side effect is to fetch data from the news API using the fetchArticles() method, which returns a promise. Once the promise is resolved, we call the setArticles() method to assign the news data to the articles variable.

Both useState() and useEffect() are built-in React hooks that were introduced in React 16.8; they simply let you use state and other React features without having to write a class. The useEffect() hook is equivalent to calling the componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods combined in class-based components.

Finally, in the view template, we iterate over the articles array using the map() method, and we display the title of each news article inside an IonItem element of the IonList component, and also a button that takes us to the page of the full article.

This is a screenshot of the page:

Ionic news app
Ionic news app (Large preview)

You can find the source code in this GitHub repository.

Conclusion

In this tutorial, we have started using both Ionic and React and used them to build a simple mobile application that fetches and displays news data from a third-party API using the Axios client. We have also seen how to use hooks in React — namely, the useState() and useEffect() hooks — to create state and perform side effects inside React function components. With Ionic, we’ve seen how easy it is to generate a project based on React and how we can theme the application using the color attributes of components.

Smashing Editorial(dm, al, yk, ra, il)

building-a-habit-forming-product

Dang Nguyen

*This is gonna be a long one*

I got the inspiration to write this case study after reading an amazing Instagram redesign article. Check it out.

I chose to redesign SoundCloud because I’ve been a user since 2011 and it has been my favorite streaming service ever since. Thanks to SoundCloud, I have discovered plenty of dope tracks and have made friends with a lot of creative people. However, not many of my friends appreciate SoundCloud’s features and valuable contents the way I do. I don’t think SoundCloud is receiving the recognition it deserves. My mission: to help solve its pain points and create a more engaging mobile app.

You can find my redesign prototype at the end of this case study.

Launched in 2008, SoundCloud is well-known for its unique content and features. As the world’s largest music platform, SoundCloud makes it possible for artists to connect directly with their fans. It is the home of millions of creators and listeners.

Dark Mode concept

Before working on the design, I gathered data from 47 people. 8 of those were interviewed via Messenger video, the rest over Google Form. The age of those users ranged from 17 to 25 years old. 95% of the people interviewed are Vietnamese and most of them are still students.

I asked the participants to describe SoundCloud using 3 adjectives. Among 74 adjectives collected, the top three were: Easy, Free, and Convenient.

I also asked what they liked about SoundCloud and what their pain points were.

Top 5 of what they liked about SoundCloud:

  1. It has a variety of unique tracks.
  2. It’s easy to use.
  3. It’s free.
  4. It’s considered a social media platform.
  5. It allows easy access for people to discover and connect with new artists.

Top 4 of their pain points:

  1. There is no download/ offline mode.
  2. The User Interface is bland.
  3. Few “mainstream” tracks.
  4. Most of the content on SC are low-quality songs.

Building a habit-forming product

Among 47 survey participants, only 7 have SoundCloud Go. 19% claimed they use SoundCloud everyday. Some people from the other groups stated that they used to use Soundcloud everyday but the need decreased over time.

With this information in mind, SoundCloud’s 2016 financial trouble started to make sense. And it occurred to me, maybe the problem was that the SoundCloud app failed to be a habit-forming product. I was introduced to this concept in the book Hooked: How to Build Habit-Forming Products by Nir Eyal.

“A product’s habit-forming potential is determined by plotting two factors: frequency (how often the behavior occurs) and perceived utility (how useful and rewarding the behavior is in the user’s mind over alternative solution).” — Hooked by Nir Eyal.

According to Nir, the economic value of a product is proportional to the strength of the habits it creates.

When I asked people how they normally find new music, the top answers were YouTube, Spotify and SoundCloud. Notably, even though Spotify has only been in Vietnam since March 2018, it has already established a strong association with finding good music considering the majority of Vietnamese participants in my interview pool. This fits perfectly into Nir’s theory of perceived utility, as shown through Spotify’s inarguable dominance in generating playlists that understand the user’s taste to a surprising level of accuracy.

Clearly, SoundCloud is not the strongest streaming service in the market right now but as a music social media, its leading position remains unsurpassed. Therefore, I will focus more on how to embrace that advantage in redesigning the mobile app and turning it into a habit-forming product.

Because of the above analysis, my goals for this project will be to:

  • Embrace the social media aspect of the mobile app.
  • Turn the app into a more habit-forming product (and hopefully increase its conversion rate).
  • Create a more engaging and exciting User Interface that solves all the above pain points.
  • Create a more cohesive experience between the app and the web version.

And the goals for my personal improvement:

  • To practice the Hook Model — by Nir Eyal. (Yes I will be addressing point from the book)
  • Finish a project from start to end.
  • Conduct and analyze user research, improve design skillset and to learn how to master crafting animation with Principle.

Now, let’s go to the fun part.

In his book, Nir pointed out that variable reward is the most vital phase of the Hook model. This is the step that provides solutions for users’ needs while leaving them wanting to reengage.

I decided to make Stream the new Home Page for SoundCloud, inspired by the concept of the Reward of the Hunt from Hooked. What does it mean? The limitless saturated contents in the Stream, waiting to be found by a few simple scrolls is a compelling reward that keeps users spending more time with the app. This happens to be the same strategy used by Twitter and Instagram.

So why can’t Discover provide the same result? First of all, Discover is a personal experience thus can not embrace the feeling of social media. Second, rather than making the users feel good, Discover leaves them confused and overwhelmed as it is messy and has a content overload problem (I’m getting ahead of myself, we will continue to discuss this in the next section).

The current feed

I’ve taken on the liberty of removing the boxes/lines that seem redundant. This allows users to focus more on the content of the post while creating a simple yet elegant interface. Many of the participants told me they love the SoundCloud repeat function, so I added it on the Now Playing bar for easy access.

What if there is a popular track in the network and people have been reposting it like crazy? The users will soon find themselves stuck in a sea of repetitive content. To avoid a bombarded feed, reposts of the same track will be grouped as one post.

Message

This is a feature available on the website but not the current mobile app. I decided to put it on top of the home page as it resonates with this social media vibe. SoundCloud claims to be an open platform that helps connecting artists and their fans. Let’s make that a reality.

Now Playing

I like the current Now Playing screen. It looks unique, is easy to use, and definitely is very SoundCloud-ish. The only improvement I would make here is to pull out the well-known “Comment on minute” feature and put it right under the wavelength.

Many of my friends told me one of the things they liked while listening to a track was reading its lyrics. And I’ve noticed some artists do put their lyrics in the descriptions of their songs. After a few tweaks, I introduce you the new Now Playing screen:

I acknowledge that Discover is a critical feature of any streaming service, one that would determine its overall success. So I asked people what their thoughts were on their current experience with SoundCloud Discover.

28% of the responses were positive, 27% negative, and 45% gave neutral feedbacks.

When I looked further into their answers, the reasons 45% of users gave neutral responses were because:

  1. They don’t really use Discover as they already have Spotify. (hint: neutral is actually bad because it means they’re not using it).
  2. They think the experience is just average (How can SoundCloud compete with its competitors if it’s just “average”?).

Among the negative responses, the top 3 complaints were:

  1. Discover is not impressive.
  2. It is not updated frequently.
  3. Suggestions do not fit users’ tastes.

To help further understand the problem, here are the Discover information architectures (IA) I made at the begin of June compared to when I started writing this case study:

Discover information architecture

As it turns out the genres are updated frequently but no one seems to have noticed it (myself included). This is because of content overload. At the moment, there are 17 genres/categories for users to explore. Each of these categories displays 3 options at once. Hence just by scrolling up and down, the users are bombarded with 51 options, pushing them into the paradox of choice (an overwhelming pool of options can lead to stress, anxiety, and less commitment to the final choice).

Additionally, these 17 genres/categories are the same to everyone. This shows a great lack of empathy and reduces users’ interest in the app. Discover is heavily a personal experience and it should be crafted manually, using algorithm and machine learning.

Since flipping bits and writing algorithm are not my jams, I came up with something else:

When you follow someone because you like their content, it makes sense if you would appreciate the music they like. My research shows that other than streaming services, people often find new music through friends’ suggestions. This category will be organized based on interactions between you and your friends, as well as the tracks that they mutually enjoy, given priority to the friends that you interact the most with on this platform.

To make Discover more personal towards users, I reduced the number of categories down to 6 (according to Miller’s Law, an average person can keep only about 7 items in their working memory). These categories are non-biased and can be customized to match each user’s taste:

Friend Recommendation, SoundCloud Weekly, Trending, Lit Playlists, Suggested Artists, Best of SoundCloud — The fabulous six.

But don’t worry, I didn’t get rid of the rest of the categories. I figured if the users want something personal, they can have the feed to themselves, but if they want to explore and find new genres, the carousel of cards is for them! As you can see below, the visual representation uses images that closely resemble themes of the music content, which will make it easier for users to skim through and pick the option most appealing to them without having to read the title.

Real quick on Search

My proposal

The only thing I don’t like about Search is that the results are often messy and unorganized. Currently, users can navigate Search in 2 directions: they can either scroll the filter bar to change the category, or they can move up and down to view the results. Because both horizontal and vertical movements can affect search results, users are left confused.

I removed the filter bar to make the design simpler and less confusing for the users.

Other than that, I think Search fits perfectly into the discover and explore experience. So naturally, I merged it with Discover.

Current Search vs New Search

SoundCloud built its success on independent artists. The reason it became the world’s largest streaming service with over 180 million tracks was because of these creators. According to my research, many people said the biggest thing they loved about SoundCloud was that it offered a variety of unique tracks. Therefore, implementing an upload feature seems obvious. So obvious that I am surprised why SoundCloud hasn’t allowed it to happen.

Introducing The Studio

One of my main concerns when making this was the time it takes to upload a track. If uploading a track takes too long, it will undoubtedly affect user experience. While uploading an audio file is different from a photo, here is a trick I stole from Instagram that might solve this concern.

The trick is simple. While the user is busy picking artworks and filling the title, the track is already being uploaded onto the server. By the time they hit that Publish button, the upload will already be halfway done.

Besides uploading, The Studio also makes it easier for users to create and edit playlists (let’s remember SoundCloud is also the home of music curators).

People can search for a track or add it from their library

In the current version of the app, there is no way to check for account notifications. While SoundCloud created Pulse — a version for creators — to solve the problem, I believe this should be implemented right into the current app.

The reasons why I think Pulse is a bad solution:

  • Jumping back and forth between apps is not fun. If I want to check my Notification I have to switch to Pulse and Pulse kicks me back to SoundCloud whenever I tap on my Profile.
  • Although having a way to check your stats and notification can come in handy, that’s the only thing SoundCloud Pulse does. Therefore, I think it’s unnecessary.
  • The cost and effort of sustaining an app.
  • Artists don’t know about Pulse. One of my friends told me she didn’t know how to turn to ‘artist’ mode in the current app.

“It would be nice if the app has a way to turn to ‘artist’ mode” — A friend of mine — an artist — when asked what improvements she wanted for the redesign.

In my design, Notification will serve as the Reward of the Tribe (another term I learned from Hook). Humans all seek social validation and this is why we have that tingling feeling every time someone likes our photos on Instagram, comments on our Facebook posts, or claps on our Medium article. It is reasonable to embrace that feeling. And although we already have the number of likes and listens displayed on our posts, it is not enough. We have to be notified.

SoundCloud Pulse right in the heart of SoundCloud

The biggest complaint I got was that there was no download/offline mode. When I was looking closely into every part of the app, I found the Download function buried deep inside that 3 dots on top of Library. The obvious solution was to bring it to light.

SoundCloud is good at hiding its features.

A user’s Library should feel personal and resemble a social media platform. I decided to put User Profile here instead.

“More” was unnecessary so I merged it with “Settings”.

“Recently played” refers to the artist profiles or playlists that have been visited while “Listening history” is a list of tracks that have been listened to (do you see how awkward this sentence is?). These 2 are quite similar (they are exactly the same!) and can cause confusion, therefore I merged those into one as well.

Profile

The current Profile and the redesign version

In my vision, Profile is where creators showcase their works and connect with their fans. To improve the visual, I introduced some slight changes.

Artist’s Profile (Yes, I’m a big fan of Trang)

Dark Mode

Ever since Apple introduced dark mode for Mojave, I’ve been obsessed with it. With a content-heavy platform like SoundCloud, having a dark mode helps ease the eyes and increase focus, while providing an aesthetic look.

It took me a week staring at the screen, not knowing what to write. The fear of rejection creeped in, and July heat only made the situation worse. I was slowly consumed.

What if my design doesn’t really solve the problems I found? What if the points I make are all wrong?

I was close to giving in to my inner demon and turning off the screen. Maybe this is it. This whole thing is not meant to be.

Then I saw the initial scribbles in my notebook and realized one thing: it had been a wonderful journey. In an ideal world, this case study would be perfect — but isn’t life all about being comfortable with your uncertainty? I have fears and that’s okay. Screw being right, I’m confronting all of my fears and anxiety all at once by putting myself up here, and that’s all that matters.

I sat down and typed the first paragraph, with nothing certain in mind except for one thing:

I am a product designer.