Reports and papers
Accessibility compliance evaluation and reporting
Kuttle: Mellenie, Havaa & Hx
Mellenie is the first application of Hx stemming from my research in AI and Havaa is an extension of that towards empathetic & Human-Centered Machine Learning (HCML).
Please find more details on Kuttle and our products at Kuttle.
Through contextual inqueries, interviews, and surveys, I was able to discover the impact technology has on the human psyche of millennials. Next through an analytical review of some of the approaches, toward creating new technology, and the methodologies of parts of the industry, I began critiquing and creating a methodology where technology and its applications can be more human centered and have more of a positive impact on humans. This is what I call Hx, a methodology for creating technology in a more innovative, problem solving, and purpose oriented way. Lastly, I began researching, across science and philosophy, finding insights, and connecting these and a variety disciplines and understandings to realize this vision.
In protoyping Mellenie, what I had originally built was bulky and inefficent, but worked. I had never single-handedly built something this large, but I learned a lot from it.
In only two months, the second version of Mellenie was more accessible, efficient, and usable than the high fidelity protoype I spent almost two years working on. More importantly, it had also surpassed its previous ability in functionality. Learn more about Mellenie & Kuttle, and our products, at Kuttle.
Mellenie was once known as Monet. We've experimented and tested numerous names and were very happy with Monet, named after Claude Monet for creative expression. However, "Monet" was never always pronounced the French way (with a silent "t"), including by some Assistive Technology (AT). After research & tests, despite being spelled differently, Mellenie was always pronounced correctly and also has great significance—more on that process in the next card.
I would love to demonstrate our research, a prototype of Mellenie and to discuss empathy & Hx—and how they are critical in your work, products, and all of technology. Please reach out to me here.
Kuttle & Mellenie branding
In approaching how to build on our previous research & design sprints to create the final brand for Kuttle & Mellenie, we decided to shift our mindset and adopt an emerging perspective in design. In this human-centered and empathetic approach, we, at Kuttle, began with, as we build our products, a separation from technology. As much as we love technology, we sought to draw inspiration from nature. This includes teaming with creatives and designers, but communicating and collaborating with people above all. We are inspired to solve their problems, to build for people not ourselves—which includes numerous rounds of research, tests, and feedback. As we iterated through about a hundred prototypes of our original interface and experience for Mellenie, two high functioning and high fidelity prototypes of the assistant as a whole, we are comfortable refreshing and reimagining as sometimes needs to be done to realign with a human focus. Lastly, we sought to refine and perfect, but not at any burdensome cost—instead as an investment. Our efforts became oriented around the act of solving, directed by details, and prioritized for people.
Fast forward to 2017 and we officially chose the name of the company to be Kuttle, building off of the ocean theme and being inspired by the intelligent invertebrate, and sometimes overlooked, Cuttlefish. In this official establishment, we decided to start fresh as we were building our products and no longer, prototypes. For the longest time, our sole product and our company was Monet, but we have much more to offer than a single application of our research. More on Kuttle and our products at Kuttle and to come.
In designing Kuttle’s brand, below, we grew fond of the idea of "Dive in with Kuttle” and "Onwards" with our products. What better to describe our vision, the future, and "Onwards" than the new frontier. Inspired by numerous themes including Magellan; the explorer, and Helene the moon of Saturn and Helen of Troy/Sparta, and with a hint of playfulness, delicious melons, we decided on "Mellenie". Please find elements of Mellenie and Kuttle’s brand below.
An important part in designing an experience is to think through every aspect including as many details as possible. Even when it seems like no one will encounter or appreciate them, perfecting a detail can be the ribbon on or paper and card with the gift, the icing on the cake. I aim to do this in every experience I build and in building Mellenie, one of the ways I did and aim to do this was through iterating through about a hundred combinations of instruments, notes, and tones to create a custom start-up sound. A simple, unique, and meaningful sound can go a long way to convey a feeling—a collection of emotions, cultural significance, and a message— and add to a brand significantly.
In our final sprints, I spent hours mixing & editing about 50 sounds, of 70 instruments, working with producers, and weeks conducting listening and association sessions with focus groups.
Brand & interface sounds
Selected tweets: Artificial Intelligence, consciousness, and philosophy of the mind.
On AI as part of Hx
We too often think what makes us human is only Intelligence. We're also creative, desireful, responsive, manipulating and manipulatable—March 30th
Technology that can perform and solve is key. But to act, react, feel, plan, strive, and reflect are valuable tools too—March 30th
Technology that does this for the best possible experience, which can be its purpose, is a major contributor to improving Hx everywhere.—March 30th
AI is a very valuable investment. But it's only part of the future. It is a technology, but as any, there's innovation in application too.—March 31st
Part of my work is the retrospectivity of #consciousness, how we assume we are on the lack thereof and in comparison to those not. #AI—April 24th
An important aspect in my understanding of and research in consciousness, from a philosophical perspective, is that human intelligence and consciousness exists on a continuum. Rather not a line, but a multi-dimensional space. Even on Earth, we see other implementations of sentience, consciousness, and intelligence; for example, in the octopus. Our perception of being conscious can come from a retrospective analysis of things that aren't conscious. Being true for humans, it is very possible that a more conscious or differently conscious being wouldn't consider us conscious.
There is more to inner-self than perception, there's an opinion, a processing that we interpret as thoughts and express in language—April 5th
Feelings although seemingly illogical are instrumental in our decisions. Even the most conscious decisions & chosen goals are through them.—April 18th
Emotions act as a metric and prompt for behavior in an environment. They allow us to long and strive for the fulfillment of plans. Plans that intelligence allows us to solve and achieve. They are critical in our definition of goals, no matter how abstact or determined they are.
If we want to make machines that are an improvement on and for humanity, they can't be only hyper-intelligent...—April 15th
The best of humanity isn't intelligence alone. Smartest!=best or most capable. How can we build on humanity if machines are starting behind.—April 15th
Background videos became a recurring theme in much of the web. AE sought to set the scene of their office space and their personal, expert approach through a background video. However as with any autoplaying video, there is motion and this motion can be distracting, uncomfortable, and even harmful to some users.
Taking the above challenges into consideration, I decided to pause the video, and have it resume, on initial interaction.
When interacting with the site through click and keyboard, if an interaction does not have a directed response or purpose, it pauses the video, which can be easily resumed through clicking or interacting with the video through a keyboard. This proved to be the most accessible and usable solution as the video is instantly paused if necessary and is easily resumable/replayable.
Please view the interaction here, but know the site is in the process of being redesigned and redeveloped to something wholly accessible and newly innovative.
MSU Museum Evolution Exhibit
Museums, especially those at a much smaller scale or with less of an audience and funding are finding it more and more difficult to compete with the digital age.
Don't compete with the digital age, embrace it. Build an experience for the museum involving technology.
A main challenge we faced was how we could be innovative with technology in the limited amount of physical space provided, without needing renovations or causing too much construction in the current exhibit, which may hinder an already diminished audience.
Our response to this problem was to redesign the floor-plan of the exhibit, making space for our visual additions, interactive panels, and an Augmented Reality space
In making museums more interactive, and more of an experience, through technology, we chose the Michigan State University Museum Hall of Evolution exhibit.
In terms of interactive technology, we wanted to go beyond touch screen panels so we played with a VR space, but ultimately went with games and an Augmented Reality experience.
A prototype of a punnet square game in the exhibit.
MSU Libraries Post Mortem
A Post Mortem report summarizing my work as a Project Manager, Researcher, and Visual Designer, on contract, for the Michigan State University Libraries to propose a home-page redesign based on conducted research over the course of two and a half months. They took elements of our proposal into further consideration and implemented some of our suggestions in the Fall of 2015.
How to lead in a UX project, manage other team members and proceed in a professional manner that meets deadlines. A challenge we faced was interpretation of our communications to stakeholders by certain stakeholders. We learned to be precise, neutral, and to write as professionally and concise as possible. Being able to convey design and strategy well and effectively is a critical tool and talent I am still developing and glad I picked up early on.
What does it mean to create a meaningful experience? How can we create a meaningful experience without using psychology to betray, deceive, or play on the user; but, to create something in their favor.
Use emotional, human centered, and visual design principles to create a friendly and serving experience.
In this specific concept, I designed an interface to organize one's most meaningful notifications, conversations, or, essentially, anything digital. It features the ability to search, sort, and filter through them. Due to the interactivity of the cards, I extended an interaction I originally design for smart watches—allowing one to scroll by tilting the device. The experience features a romanticized interaction for adding to the database with a device paired via bluetooth running an app that acts as a hub, storing the digital content.
Scroll by tilt interaction
As I was prototyping Monét as a web app featuring interactive cards, I faced a challenge on multi-touch devices with less screen real-estate. Ideally the best approach in solving this problem would be with a Mobile First approach from the beginning, but the prompt asked to design for desktop alone. However, in testing my prototypes across devices, I encountered this issue. My response to this challenge was to built an interaction where one could scroll through tilting the mobile device.
Moral Meats (system and visual design)
Organic food while being popular for its purity, is still victim to profit margins and capitalist drive. Not that there is anything wrong with that, but all things in excess can be bad. Similarly, some farms have fallen into a cycle of making little to no profit and producing lower quality meat to the gain of the meat industry. And, lastly, the debate for animal suffering in slaughter.
Researching, studying and surveying animals, farms, farmers, and grocery stores to better understand the problem first hand; and, to use design thinking to find a creative solution.
One of the initial challenges we faced is how we could apply design thinking in a way that would have the most impact.
I responded to the above challenges by making the decision to innovate to solve more problems rather than what may make money quicker. This style of investment thinking inspired me to create the hierarchies of innovation and problem solving as part of Hx. These hierarchies help inspect the impact one's innovation will have and determine what needs to be done for a larger or more focused impact. Where a more focused impact will be more viable sooner and the broader the impact, the more viability over time. I plan on writing more about these in future articles on Hx.
I designed a system to stand for a higher standard of/for animal-involved industries. Other considered options included a social network between customers and farmers or a standard by which smart fridges can operate. The final result is Est, a meat brand standing for ethical practice for, to, and with all those involved.
Deliverables of the project include a Mind Map; featuring snippets of research visually presented through connections as a graph (like the datatype), Brand Guidelines (PDF), a tri-fold pamphlet on the relationships one can have with Est (PDF), a welcome pamphlet, and bibliography of the research cited (PDF).
MSU Social Science Student Testamonials
In creating the website for MSU Social Science, of the functionalities I developed, I sought to improve the load time of a page in the site where it was unnecessarily long.
Use lazy loading techniques to store videos and load them when needed—along with the HTML5 video spec to preview the videos beforehand (to know which to load).
I needed to come up with a way to be certian the user wanted to watch a student testamonial.
I decided to house an audio-less preview of videos in place of each student testamonial. Then on hover of the preview poster, play the audio-less version and begin to load the full video.
We played with animated gifs, but the quality wasn't great and there was not a way make the animated gifs long enough with quality and appropriate file size. Using the HTML5 video spec, I play a compressed version of the video without sound and load the full version in an accessible modal on click of the preview. Please see the completed result here.
Accessible video player
For my own presentations and hoping to use it at Addis Enterprises (AE), I decided to build on Able Player and make a complete accessible experience for longer videos.
In building this video player, I improved on Able Player to create a full experience.
If I were to use this across my projects and at AE, it has to be able to make longer videos an enjoyable and usable experience.
To be able to create an experience for videos of all lengths, I built an interaction that allows one to search the live transcript and navigate to parts of the video that are more important and relevant to them.
The live transcript features a filter that can search through it, allowing for the matching parts of the video's content, whether they are courses or presentations, to be easily navigated to. The player also affords the ability to resume playing on a later visit or start from the beginning. It also features the ability to jump to parts of the video through the URL; for example, values of the "t" parameter like t=1m0s or t=00:16. Ultimately, it exists as evidence that I can rapidly prototype and develop an experience from an idea using existing code.View the accessible experience.
Note: This is an experiment in rapid prototyping from ideation, performance and efficiency considerations have not been made and it is optimized for Google Chrome and Mozilla Firefox.
Irfan Motion Design
In learning motion design, I pour my hand at making something I've seen; for example, Ford, Netflix, and Google, and Olive Garden do—an effect that adds more life to a brand, tracing or any motion actually. I did this with an illustration of my name as is below.
In creating a brand for myself, I made the following slab-serif type as a mask over a simplified landscape. I derived and use the same colors in my personal print work.
When making this brand, I came up with a special shade of purple debating through tens of shades, perfecting it over the course of weeks to rgb(84, 39, 132).
Illustrative type promoting pride of Kashmiri heritage, ethnicity, and culture
An illustration of a scene from The Hitchhiker's Guide to the Galaxy by Douglas Adams. In this scene, two thermonuclear missles are transformed into a bowl of petunias and a sperm whale. Also on this planet is Deep Thought, a computer built to calculate the meaning of life.
A piece speaking towards the impugnment of personal gain at the cost of the city. It is meant to be a partially shredded $100 bill whose shredded upper half looks like a city skyline.
Here are some symbols I made to go along with Mellenie's rebrand, before I went with the Caeliy idea only to return to a new logo and logotype for Mellenie.
Woe is he who does not try; Woe is he
who lets one-self cry. Strive forever
Never ending. You’ll see where you will be!
Always ascending; ultimate fever!
For even when you have appeared to lost
Ponder; Wonder until you won’t be found!
Cut your losses—evaluate the cost.
Come back stronger than ever and more sound.
Hope and faith will give you the strength you need
Onward! To each peak, always to the top!
Plant and till as you watch to tree from seed
Only backwards will make you stop
Ay, there is no failure until you drown
Ay, there is no drowning until you frown
How I've endured for reasons I know not
An inspiring repulsion for me
For a chance, i hoped, begged, prayed, & sought
Your grace, a dream, this opportunity
There is not a day I will forget
You gave me the pen; how i owe You so!
You held my hand before, since those first steps
Have mercy on this poet as he rows
To this shore, I must ask that I should reach
How I pine for love— oh, I oft adore
By You, i reach each summit tall or steep
But it is near to You i need not more
Oh You i seek, in this i proclaim
i implore in Your name, grant me my name
Oh Octopus, come out of your hiding!
Do you fear? Something as clever as you!
Or to hunt, to catch what you're pining?
Close; enticed! Precisely what will you do?
Or will you scurry in a cloud of ink?!
Lend me some so I can paint what I see!
What they forbade, you express and think!
You pick, you break the lock just to be free!
3 hearts full of love—dreaming for what's more!
Horizon eyes—I aim for such progress!
I grasp; I clasp suctioned to what's in store
No clone, blended match—no more to regress
I proclaim I believe I will succeed!
From the sea, I rise—for it must to be!
There're not lines to keep thee eternal,
How thy elegance sublime does it so
Need'st not the eighteenth to be immortal
It is a honor I am greatful to know
O mistress mine, ay when I see thy face
Tranquil becomes my heart—now inspired.
Whose eyes are more brilliant than stars in space.
Thy kind friendship forever desired
Her voice unreal, more tender than the night.
Her intellect awesome, I must confess.
a smile that outshines all peril in sight
Makes me wonder what good don't you posses.
Words cannot describe what is so fine!
Beauty uncanny how can one define?