UX / UI

        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.

UXUItoolbar1UXUItoolbar1
user_persona_iconuser_persona_icon

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.

Cloud-Lab-User-Persona1Cloud-Lab-User-Persona1
hierarchy_iconhierarchy_icon

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.

mobile_hierarchy_cloudlabmobile_hierarchy_cloudlab
user_flow_icon1user_flow_icon1

Navigation

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

cloudlab-userflow-1_2cloudlab-userflow-1_2
wireframe_icon_whitewireframe_icon_white

Wireframe

        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.

mobile-chat-wireframingmobile-chat-wireframing
prototype1_iconprototype1_icon

Prototype

        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.

cloudlab-prototypecloudlab-prototype
usertesting1_iconusertesting1_icon

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.