Coding with User Experience Design Principles
Tags: ux, design
Published: 2020-01-08 00:56:40

Note: This is an older blog I wrote back in June of 2019 but didn't get a chance to publish. 

I am more than halfway through my learning of becoming a software developer at Flatiron school's software engineering immersive. As I look back from the very beginning, it is quite exciting to see how much I have learned from being able to use Ruby to build a command line application to now building web application using JavaScript and Rails for front-end and back-end respectively. One thing I found quite interesting is that when I was in the early stage of designing the outlooks of the application, I would often times find myself trying to see how the application would look like in the perspective of the end user rather than the developer. I would attribute that kind of thinking to the knowledge and discipline that I have acquired from the days when I was studying User Experience design at UW. 

__User experience (UX) design__ is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and desirability provided in the interaction with a product. The main focus is on the end users. How would the users interact with the application? How complex is it for the user to use each feature? Does the application function in a way that the users expect it to? These are some of the questions that the application you are trying to build should be able to answer. 

Since the answer is the users, the problems you are trying to solve should center around making the experience as effective and as efficient as possible for them. I find it beneficial to step back and think about the big picture in terms of the tasks and problems that the application is aiming to solve for the users. Develop empathy for the users. What kind of challenges the users are facing and how can we make the experience better. I would consider this to be the first step of the design process in terms of being able to identify the overarching problem and coming up with ways to solve it. Being able to find and frame the problem and generate ideas and solutions is a big part of design thinking in User Experience design.

Data collection is also a big part of understanding the issues from your target audience in the early stage of design process. Due to time constraint, I wasn't able to perform this part of the design process when I was working on my web application. Ideally you would utilize some means to collect user data such as survey to gain a better understanding of the issues the users are facing in order to confirm initial concerns as well as adjust focus according to the findings.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rixtj0roztzexif086pf.jpeg) 

Once you have established a solid understanding of the issues the next step will be to come up with personas and user stories. Creating personas is good way to make your target audience come to life. Make two to three personas with names, age, occupations and background and stories about them to give them a tangible feel. Their back stories should include the activities they would do normally so you will be able to design functionalities that would be able to accommodate their needs later on in the design phase. Storyboard is also a common tool to map out the activities the target users might do and the environments and circumstances they might do them in. 

During the ideation stage which is also the design stage, brainstorming is a technique that is commonly used to come up with ideas and features that would help accommodate the users' needs that are discovered from the user research phase. The point is to come up with as many ideas as possible as a team so your team will be able to sift through them to find the most relevant features and functions to include in the application.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ishbc6oc86nuhqd3hw1u.jpeg)

Once your team have settled on the most effective ideas and solutions, user flow diagram will help you see how the users will complete each task and the steps they will take to complete them. It is a useful diagram that your team can use as a reference to evaluate the efficiency of each task by seeing the steps it takes to complete each task and help narrowing down the most effective solutions from your brainstorming session.  

Wireframe is a layout of a web page that allows the designer to see where each feature is situated on the web page as well as space allocation and prioritization of content. Using wireframe can give you a better visual representation of the application when implementing each individual page. 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0nt7d1bwecz3ykrzb253.jpeg) 

At this point, you should have solid foundation to start implementing the application by utilizing the information you have gathered from the user research and ideation phase of the design process to help make the user's life easier. 

For the activities/tasks manager app that my partner and I have built, we were not able to use all the techniques described above due to time constraint. However, these ideas still apply when we were designing our application albeit in a less comprehensive manner. We created some users stories to gain a better understanding of our target audience. We brainstormed for ideas that would help solve the users' issues. We used simple wireframe for visual representation of how the web application would look like and just start implementing from there. 

__Conclusion__:

I think learning the principles of User Experience design discipline really help me think in a way that is user-centric. As I start getting more experiences designing and building applications, I will be able to not only see it in the perspective of the developer but in the perspective of the end users which should be beneficial for developing applications that is helpful for the users in need.
 

References:

https://en.wikipedia.org/wiki/User_experience_design

https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer

https://www.usability.gov/how-to-and-tools/methods/wireframing.html