Although I’m working towards becoming a capable Full Stack Developer, my passion still lies in User Experience and User Interface Development (UX/UI). In the world of computer jargon, title’s and nomenclature often become cumbersome. I’ll try to use this section to explain what UX/UI is, and how I’ve used it’s tools to improve my web development.


User Persona

To build user personas I define sets of abstract users that would be willing to use my app or website. I basically generalize the users in my target market and it's tricky because I often need to do in depth marketing research just to define the potential users. In my opinion creating user personas should not be the duty of a UX/UI designer but I also can't understate its major benefits. A good user persona can help a developer understanding which of the app's features are essential for launch, important for launch, and/or not needed.


Page Hierarchy

        Page hierarchies are great for getting basic data architectural concepts across. Although they look similar to ERD diagrams, they contain much less data and simply convey a page hierarchy. This diagram allows for easy changes in page dynamics such when the user is sent to the cart in an ecommerce site, or under which page a user can add friends in a social network.



        The Navigation flow takes the hierarchy to the next level by adding more details to focusing on the app or websites navigation functionality.



        A wireframe should be absolutely barebones and provide the means to allocate screen real estate for important elements of an app or website. The wireframe can speed up the design process by standardising CSS attributes such as padding and size for every screen. There are often many wireframes that are created to tackle a single project. The following is a simple mobile chat wireframe that I used to develop the CloudLab mobile chat.



        The last step of the design process is building a prototype. There are lots of tools that allow designers to create prototypes with minimal coding, but these often output garbage code. So on my own projects I tend to fully code prototypes in HTML CSS and Javascript. This is often a time consuming and expensive process, but it's definitely worth it because you end up with a comprehensive list of assets for your final product, and a bunch of useable code.


Usability Testing

        After building a prototype, usability testing is a must. This includes things like analytics, heatmaps, and a/b tests. There are many ways to perform tests but if you’re not willing to code then it is quite expensive. I used a service in the past called crazyegg to manage UX testing for previous employers, but since then I've learned much more about javascript and the library that crazyegg is built on (heatmap.js). I can now build personalized heatmaps and A/B tests for most small-medium sized websites or prototypes. In case you're wondering, a heatmap is a way to view data about how your users use your website or app. Click around in the dark box below to see how it works.


        The following is some starter data that I’ve been capturing from my portfolio since it’s been live.