Thinking through UX/UI as a Software Engineer

A reflection on lessons learned at the midway point of a coding bootcamp.

In six weeks, barring any fatal missteps, I will have graduated from the coding bootcamp I am attending and be able to call myself a Full Stack Developer. We just wrapped up our third project, this one finally utilizing both frontend and backend development. Up to this point in our projects, I have only been focusing on functionality, making the code work. A few weeks ago though, I had the opportunity to learn some CSS as we worked on our second project, but decided against it, and just threw some basic Bootstrap on the project and called it good. I reasoned that I would learn CSS later when I really needed it, but wanted to focus on other things now.

On our third project, I again focused on functionality first, knowing this time around, I would need to do some more CSS to improve the user experience once we had our functionality in place. Once we were done with the functionality though, turning to the CSS we ran into multiple issues. In order to have the user experience we wanted, much of the Javascript needed to be rewritten to accommodate how we wanted the user to interact with the page. Instead of rewriting the Javascript though, we opted for a different UI and somewhat different UX. While I’m not unhappy with the results (the design ended up feeling very retro and matched the humor of our project), I learned a valuable lesson on how I should start my projects going forward, with UX/UI design first.

As I researched this topic, I found a common thread among software designers. Design teams design the UX/UI first, then give it to the software engineer to make it functional. Looking at it now, it seems logical that you want your product to have a great look and ease of use for your end user in order to make it stand out, and not starting with the experience first, you risk building the functionality in ways that aren’t as user friendly. But it’s been something of a revelation to me. In the 8 weeks I’ve been in this bootcamp, we’ve been building up from the backend to the front, functionality first. CSS isn’t taught, it’s more an add on suggestion to learn on the side. Don’t get me wrong, I’m enrolled to be a software engineer, not a UX/UI designer, functionality should be my priority. And in a 15 week bootcamp I can’t expect to learn all of the basics of design along with full working knowledge of backend to frontend development. But I also know that as I get out into the world of software engineering, I won’t be working in a bubble. The apps I build need to look and feel great for users in order for them to attract users.

Ironically, in the first week of our lessons on Javascript, I noted that I wanted to build habits of how I write my code now, as I am first learning, so I am consistent and can write code faster as I move forward. Yet in focusing so much on the functionality I was ignoring what my projects were going to look like in the end. Imagine building a house by installing all of the plumbing and electrical without planning out where the sinks and outlets would be first!

What this means for me is I need to be intentional on how I want my apps to look and respond before I build the functionality behind them. It doesn’t need to be pretty, function should still be the most important thing I learn and develop, but being able to think through a design and implement the functionality behind it will help me build those habits now to working with design teams who will be giving me the design and the vision and asking me to make it functional in the future.

Developer in the making