Technical Communication

My approach to clear, user-centered technical communication—turning complex ideas into simple, effective solutions

• Read More

• Chevron Down

Usability & User Research

Researching and evaluating usability—from data collection to user testing, click to read my approach to usability

• Read More

• Chevron Down

Website Revamp

A hands-on, real-world project focused on overhauling an existing website to improve user experience, functionality, and outcomes

• Read More

• Chevron Down

_

❮❯

const carouselSlides = {}; function showSlide(carouselId, index) { const slides = document.querySelectorAll(`#${carouselId} .carousel-image`); const totalSlides = slides.length; if (!(carouselId in carouselSlides)) { carouselSlides[carouselId] = 0; } if (index >= totalSlides) { carouselSlides[carouselId] = 0; } else if (index < 0) { carouselSlides[carouselId] = totalSlides - 1; } else { carouselSlides[carouselId] = index; } const offset = -carouselSlides[carouselId] * 100; document.querySelector(`#${carouselId} .carousel-images`).style.transform = `translateX(${offset}%)`; } function changeSlide(carouselId, direction) { showSlide(carouselId, (carouselSlides[carouselId] || 0) + direction); } // Initialize all carousels document.querySelectorAll('.carousel').forEach(carousel => { showSlide(carousel.id, 0); });

❮❯

const carouselSlides = {}; function showSlide(carouselId, index) { const slides = document.querySelectorAll(`#${carouselId} .carousel-image`); const totalSlides = slides.length; if (!(carouselId in carouselSlides)) { carouselSlides[carouselId] = 0; } if (index >= totalSlides) { carouselSlides[carouselId] = 0; } else if (index < 0) { carouselSlides[carouselId] = totalSlides - 1; } else { carouselSlides[carouselId] = index; } const offset = -carouselSlides[carouselId] * 100; document.querySelector(`#${carouselId} .carousel-images`).style.transform = `translateX(${offset}%)`; } function changeSlide(carouselId, direction) { showSlide(carouselId, (carouselSlides[carouselId] || 0) + direction); } document.querySelectorAll('.carousel').forEach(carousel => { showSlide(carousel.id, 0); });

❮❯

const carouselSlides = {}; function showSlide(carouselId, index) { const slides = document.querySelectorAll(`#${carouselId} .carousel-image`); const totalSlides = slides.length; if (!(carouselId in carouselSlides)) { carouselSlides[carouselId] = 0; } if (index >= totalSlides) { carouselSlides[carouselId] = 0; } else if (index < 0) { carouselSlides[carouselId] = totalSlides - 1; } else { carouselSlides[carouselId] = index; } const offset = -carouselSlides[carouselId] * 100; document.querySelector(`#${carouselId} .carousel-images`).style.transform = `translateX(${offset}%)`; } function changeSlide(carouselId, direction) { showSlide(carouselId, (carouselSlides[carouselId] || 0) + direction); } document.querySelectorAll('.carousel').forEach(carousel => { showSlide(carousel.id, 0); });

Process

But first — an astrolabe?

An astrolabe is an ancient astronomical instrument used for observing and calculating the positions of celestial bodies. It's essentially a portable model of the sky, consisting of a disc with a rotating plate that represents the celestial sphere. The one to the left is a paper model I made at the beginning of this project

1. Program Tree

A program tree is a data structure used in computer science that visually represents the hierarchical structure of a program's code. It allows easy analysis and understanding of the code and it's relationships between different parts. In this case, a program tree was used to map the relationships between the different components of the astrolabe, providing a blueprint for the functions of the astrolabe.

2. Realization Tree

A realization tree is commonly used in math to analyze and represent different ways a mathematical object or concept is understood and expressed. It essentially maps out how the concepts are realized through various interpretations and connections. A program tree was an essential part of this project as it provided a visual representation of complex relationships, crucial for understanding astrolabe.

3. User Persona

The astrolabe is a broad, multi-functional tool that can be used for a variety of tasks. A persona is a crucial aspect of this project as it serves are the guide of who exactly is going to use this tool; the astrolabe is not a one-fits-all tool.

4. Mood board

A mood board is commonly used in UX design to “visually show the feelings or values that the digital product should create”, according to Nielsen Norman. It essentially captures the vibes of the product--or even the person who will use it, giving a visual idea of the product usage.

6. Ten Samples

Understanding the landscape of existing high-quality documentation is essential before starting on a new design. This step was about finding ten high-quality samples, which provided design inspiration and helped me avoid common pitfalls to ensure the resulting documents were effective.

7. Analysis Matrix

Creating a table analysis matrix was the final step before developing the documents. The matrix provided a structured framework for analyzing the ten document samples. I evaluated each sample across criteria, such as visual features, forms, and content, and the matrix revealed the best practices and design choices. This analysis directed my own design decisions, allowing me to identify successful strategies to emulate and potential pitfalls to avoid.

Usability

An Evaluation of The Google Nest Thermostat App

This project evaluated the usability of the Google Nest Thermostat app and provided a valuable real-world example of collecting usability data. The scope of the project was to assess the app and recommend changes to improve the overall usability. As part of INFO 3600 - Usability, this cumulative semester-end project brought together all of the content learned, including different types of data, metrics, visualization, user testing, and user experience analysis. The focus was on how intuitive and functional the app was, especially key actions, like the set-up, temperature settings, and scheduling building. The deliverable was in the form of a proposal, with all data collected, analyzed, and recommendations suggested.

Key Insights

Tools Used

Deliverables

 
_

• Chevron Down

• My Approach to Design

About

I'm Hassan, a creative and tech enthusiast based out of Calgary, Alberta. Currently, I'm pursuing a bachelor’s degree in Information Design, with a minor in Computer Information Systems, and my approach blends creative problem-solving with technical expertise. I focus on merging design and technology to build impactful user-centered experiences and projects.In my two years studying Information Design, I’ve cultivated a passion for designing complex information into digestible and compelling material. Most notably I recently led a team project to redesign a website for a non-profit, enhancing its usability and accessibility. The experience taught me the basics of working in a real-world setting with my skill-set. You can read more about this here.Aside from seeing me on an information design drawing board, you'll see me playing table tennis, painting like Bob Ross, and speaking about cryptocurrencies with friends. Oh, and I also love working with kids—I'm a tutor, and I teach a class on Saturdays. Earlier this year, I also worked as a camp counsellor for kids aged 5-13.I would love to connect if you would like to see a unique skill-set on your team!