What My Frontend Developer Experiences Taught Me When Switching Career as UI Designer

I am really grateful for having almost 6 years of experience as Frontend Developer. Even though there were still many flaws that could have been improved back then, those years of experience made my switching career to UI Designer easier.

From my perspective, the difference between Frontend Developer and UI Designer is the first one execute the design, and the second one made the design. The big similarity is: both of them worked in the same environment to build the digital product (website, mobile apps, etc.).

In order for those two can work together, they need to understand the requirement and needs of the digital product. Once they have the same understanding, there would be a lot of discussions that lead to the formation of the product.

Here are the big similarities in work detail between Frontend Developers and UI Designers that helped me a lot.

1. Product Flow

Inside the product, there would be a lot of flow that needs to be decided first, before the work can move to the design phase.

• How users can interact with the product?

• How many user roles that the product will have?

• What will happen after the user input certain data?

• How does the product respond to user input?

• and many more.

I used to ask those questions when I was a Frontend Developer, to clients, project managers, or any stakeholders who can give me the answers. Once I got all the answers, the team will start creating the product flow which consists of the task and user flow inside the product.

That flow will be used as guidance during the development process.

The same happened when I work as a UI Designer. I still asked that kind of question and created the product flow with the team to get a better understanding of the project and can do my best work.

2. Data Structure & Processing

In all digital products, there would be users who use it, and many digital products will have more than one user role. Each user role will have a different flow.

All of the flow from all user roles combined to form the product as a whole. And inside those different flows, there would be many objects with their attributes.

This object and its attributes will be considered as data that need to be structured and could be processed inside the product.

This example will make it easier to understand

Inside the note-taking app, all users can create notes.

Now let’s divide it into this:

User role

• 1 type (all users)

Flow

• Create notes

Object

• User and notes. Yes, the user is also part of the object because it has its own attributes.

Attributes

• For the user: it can be a name, email address, profile picture, etc.

• For the notes: it can be a title, content, category, timestamp, etc.

By understanding that, it can be used by Frontend and Backend Developer to create the database structure, create the logic for data processing and display the data into the apps.

As a UI Designer, by understanding that, I can provide a precise design for each screen inside the app.

For example

• Settings screen: it will consist of a profile picture, full name, email address

• Create New Notes screen: it will consist of a title field, free text area, timestamp label

3. Logical Thinking

Basically, what I explained in the previous two points sharpened my logical thinking.
And it will be needed a lot.

For example, when developing a login screen for a note-taking app, these kinds of thinking happened inside my mind:

• What will happen if the user inputs the wrong email address format?
  Did the system need to process the wrong input first and then display the error, Or the system can display the error directly before clicking the submit button?

• What if the user forgot the password?
  A dedicated forgot password screen would be helpful for them with an email address field to be filled inside it

• Is there any easier option for users to log in?
  Options to log in using a Google account would be simpler for them.

Those kinds of thinking when developing a product feature really helped me to produce designs that could cover many possibilities inside it.

In the end, as I said at the opening of this post, there is no such thing as waste. Especially past experiences, with its failure and success along the way. That is what formed our present self.