Hello, thanks for visiting, please look at some FAQs about me and my approach in Product & Experience Design.
I can be wordy in this portfolio, but what I am doing is detailing the process I took in select projects; paying attention to details turning them into delighters and other elements that create an experience conscious of the user and in the way it serves, which I believe is important in a UX portfolio rather than just the finished product. I hope you take the time to read through some projects I have been a part of and I appreciate your interest & consideration.
Reports, papers, and presentations
Accessibility compliance evaluation and reporting
Kuttle/Willomy: Perige, Hx & Ellsi
Ellsi is the first application of Hx stemming from my research in goal creation, accomplishment and consciousness. This research and its specific application to Artificial Intelligence towards creating empathetic AI is one of Willomy's products known as Perigee and is Fenchurch's mission. In the process of prototyping Ellsi, we developed the techniques for great Hx (Human Experience Design & Development).
Please find more details on Kuttle/Willomy and our products at Willomy's website.
Research
Through contextual inqueries, interviews, and surveys, I was able to discover some of the impact technology has on the human psyche of millennials. Next through an analytical review of some of the approaches taken 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, techniques 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 of disciplines and understandings to realize this vision.
Challenges
In protoyping Ellsi, what I had originally built, then known as Monet, was bulky and inefficent, but worked. It was an early prototype. I had never single-handedly built something this large, but I learned a lot from it.
Response
I made an important decision, which is sometimes very necessary, to rebuild Monet from scratch, giving it the name Caeliy (and then after later improvements, the name Mellenie). Refreshing & reimagining are key parts of the Hx process. In this process, I widened my knowledge and ability in javascript tenfold. I knew how I had done things before and now, how to make it, through those techniques, more efficient. Rather than getting it to work, I wanted to get it to work well.
Solution
In only two months, the second full prototype of Ellsi was more accessible, efficient, and usable than the high, but lower, fidelity prototypes I spent much more time developing before. More importantly, it had also surpassed its previous ability in functionality. Learn more about Ellsi & other Kuttle/Willomy products at Kuttle/Willomy's website.
Ellsi was once known as Monet. Before that Irfan and then Aernn. 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). Yes, it might be able to be done in some cases with a lang attribute, but not in labels and alternative text that are values of existing attributes and most of the words are of a different language (English/French). After research & tests, despite being spelled differently, Ellsi was an equally significant, well pronounced, and well received name. More on that process in the next card.
I would love to demonstrate our research, a prototype of Ellsi and to discuss empathy & Hx—and how they are critical in your work, products, and all of technology. Please reach out to me here.
Willomy, Milkywae & Fenchurch
Kuttle, Inc is a business I started to promote people with technology through creating Human-Centered experiences as solutions with empathetic AI and Hx (Human Experience Design & Development). We do this through the creation of our own products and the development of techniques, which we also offer, with our expertise, as a service towards making other's products empathetic and Human-Centered. Kuttle does business as Willomy.
Milkywae is a collaboration to research philosophy, science, and technology. It is an offer to pursue understandings and research, together, for the gain of industry and humanity alike and as one.
Fenchurch is Willomy's dedicated effort to making Human-Centered & empathetic AI directed towards intelligent technologies for everybody.
UI elements
A statement on detail engineering
As mentioned in the card "Detail engineering", I am a proponent of precision as it can truly make or break an experience. The aesthetic-usability effect demonstrates that eloquently designed experiences are easier to use; perhaps, often because when visual concerns and investments are made, there are often resources and the ability to make similar considerations in accessibility & usability. However, my experience in the latter two do show that while there is potential, that unfortunately doesn't always happen. In designing brands for Willomy, Milkywae, and Fenchurch, I aimed to take visual and accessible considerations balancing aesthetics, contrast, and message-delivery. In my accessibility evaluation reports, in the Hx (Human Experience Design & Development) techniques, and in recent presentations, I emphasize "The 3 P's of Experience Design"—one of which is precision. And while I can be a perfectionist, I know I am not perfect, I know when to "cut my losses", so to speak, and cherish my mistakes, and feedback, as opportunities to grow and improve.
The ship of life twists in the currents of negativity, capsized by the waves of dismay & discouragement, in the sea of failure. But it is the lifeboat of recovery that reaches the greatest shores of success.
Audial elements
In considering the details and as a form of musical expression, I love composing, picking, mixing, and editing sounds to create audial elements for a brand or interface—for the experience—to help be the wax seal on the heartfelt note.
Here are some I designed for Willomy
The name comes from Swedish meaning to gather to escape everyday routine and waking up early to hear the birds sing. Together, these promote interaction & community and individuality & poise.
Kuttle/Willomy brands
Process
In approaching how to build on our previous research & design sprints to create a brand for Kuttle & Ellsi, 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 Ellsi, 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.
Present
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. In this spirit and through reflection and definition, we aim to be more than Ellsi and more than our research, so we chose an operating/assumed name of Willomy to do business as. More on Kuttle/Willomy and our products at Willomy's website and to come.
Theme
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. Please find elements of Kuttle and Kuttle/Willomy's products next.
History
Animated entirely with web technologies (SVG, path manipulation in javascript, and CSS animations), screen recording
Willomy's brands
Please find previews and more details on the brands of Perigee & Woullee (a mascot for Hx) next. Perigee is my research, theories, and understandings in/of emotions, goals (accomplishment & creation), and consciousness—and its applications towards creating Human-Centered, empathetic AI. Woullee, also known as Hx, is a series of techniques refined from our process and lessons learned in prototyping Ellsi and applying Perigee towards building an assistant. Ellsi is that assistant.
Feel free to visit Milkywae & Kuttle for some more information.
Ellsi
Animated entirely with web technologies (SVG path manipulation & CSS animations & transitions), screen recording
Detail Engineering
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 wrapping-paper and card with the gift, the icing on the cake. I aim to do this in every experience I build and in building Monet, Mellenie, and now Ellsi, one of the ways I did and aim to do this was through iterating through about about one hundred combinations of instruments, notes, and tones to create a custom start-up sound and other notification/UI elements. 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 65 sounds, with a variety of instruments, working with producers, and weeks conducting listening and association sessions with focus groups.
Brand & interface sounds
Initial
For Monet
Extending from our theme of this release, the Mediterranean, we sought to compose a sounds inspired by instruments therein.
For Caeliy
Final sounds
Deciding that the "new frontier" was a better theme to represent us, the future, we decided to go with this sound.
Aiming to remain playful yet, true to our spirit: ambitious & explorative—curious, yearning, and peacefully expeditionary.
This is our solution, our representation of our element of playfulness, fun, and friendliness.
The full, longform version of "Explore."
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
On consciousness
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
On emotions
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.
On intelligence
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
AE 2017 site
Prompt & summary
Towards the Spring of 2017, we at Addis Enterprises began conceptualizing a more modern & more responsive website to display our new diverse areas of talent (Ux & marketing). I participated in research and meetings to ideate the nomenclature of our core fields (Define, Engage, Capture, and Impress) as well as participating in out-of-domain competitive & heuristic analysis in defining, designing, and developing interactions.
I prototyped and contributed to the development of the gestures and interactions of the Team navigation (displayed next), tilt background motion using the DeviceOrientation API (similar to what I had once developed for Monét Memories (recording of that interaction also in this portfolio)), and prototyping the Page State interaction & designing and developing the Page State motion design.
MSU Museum Evolution Exhibit
Problem
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.
Strategy
Don't compete with the digital age, embrace it. Build an experience for the museum involving technology.
Challenges
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.
Response
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
Solution
In making museums more interactive, and more of an experience, through technology, we chose the Michigan State University Museum Hall of Evolution exhibit.
An initial sketch of our redesign for the floor-plan.
This began by studying the floor plan and remapping how we could best use the space. Please find a PDF of the floor-plan here.
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.
There would typically be a YouTube embed here, but as per a bug in Google Chrome/Chromium, sites using YouTube embeds and hosted on Google domains or using Google nameservers will not periodically render in Google Chrome. This bug has been reported in early March and the YouTube video will return once Google fixes the bug, hopefully soon! This bug is resolved in Google Chrome 66.0.3336.0. Please update to that version when it becomes available. When it is released and adopted, the YouTube embeds will return. For now, please watch the video on Youtube.
Augmented Reality
Furthermore, we built a prototype with device motion to create a lens into the prehistoric world and potential future.
The experience in reality would serve more information on areas of the exhibit and detail the effect humans can have on the environment through interacting with the environment throughout time.
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.
Lessons Learned
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.
Monét Memories
Problem
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.
Strategy
Use emotional, human centered, and visual design principles to create a friendly and serving experience.
Solution
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.
Add to database interaction once the devices are paired transferring from a memory hub on the phone to the web app on desktop.
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.
As mentioned at the previous YouTube embed, there is a known bug in Google Chrome/Chromium causing pages with YouTube embeds to not render in Google Chrome. The issue is fixed in Google Chrome 66.0.3336.0. Please update to that version when it becomes available. For now, please watch the video on Youtube.
Moral Meats (system and visual design)
Problem
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.
Strategy
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.
Challenges
One of the initial challenges we faced is how we could apply design thinking in a way that would have the most impact.
Response
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.
Solution
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
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).
Designing for the high-traffic web
Prompt
In this card, I'll discuss my approach and process contributing to the development of websites and content for three Addis Enterprises' clients with high weekly and regular users, Michigan State University's College of Arts and Letters Excel Network, Flint Bishop International Airport, and Improving MI Practices.
Strategy
In addition to developing cross-browser experiences, I aimed to make these sites as accessible as possible to promote discoverability, user retention, and potential audience. I regularly advocate for our products to be accessible and through AE, I have been able to present at conferences to spread a vision of Universal and Inclusive Design and Development across Michigan.
Challenges
In developing The Excel Network, challenges I faced included a flash of layout (due to viewport units and the disappearing omnibar in mobile browsers, causing change in the root viewport size).
In regards to FNT International Airport, I worked to foster a recognization and advocation for peoples of all abilities amongst my fellow developers and developing an accessible, complex navigation.
For Improving MI practices, I faced challenges through strategy being the core developer in this remediated version and working with Moodle, the open source Learning Management System the members' side of the site is built with.
Response
I contributed to the development of an Excel Network site that does not jump once the omnibar disappears as well as an accessible video player, which is being further developed as an AE component (more in the following card).
In the Flint Bishop International Airport site, the entire development team aimed for maximum accessibility within the stakeholders' (client & leadership) vision. I led this effort and focused on a keyboard & screen-reader friendly navigation as per the WCAG 2.0 web app menu/menuitem guidelines.
In this year (as of early Feb.), I have already spent ~100 hours developing the accessible IMP site. I have read through documentation and pursued & used my resources in developing with Moodle. We've also spent numerous hours creating accessible courses and an accessible player for this client.
Solution
Please view the completed Excel Network site (as a note, this site has been modified and further developed by the client after completion).
Please view the hosted copy of the FNT Flint Bishop International Airport site or if it goes offline, the live version.
While the Improving MI Practices site will be launched soon, please view a core component in the following card.
Accessible video player (Gen 2)
Problem
For my own presentations and as and Addis Enterprises (AE) component, we forked Able Player and made a complete accessible experience for longer videos—at first for Improving MI Practices courses.
Strategy
In building this video player, I improved on Able Player to create a full experience through using custom events in javascript, Material components, and elements of Progressive Web Apps. This component is not entirely a Progressive Web App because the IMP site entirely will not be a Progressive Web App despite my advocation for AE to start building PWAs.
Challenges
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.
Response
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.
Solution
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 video player (Gen 2)Note: This is currently in development, please pardon any bugs
.
Irfan Motion Design
In learning motion design, I put 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.
Irfan branding
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).
Kurshur
Illustrative type promoting pride of Kashmiri heritage, ethnicity, and culture
Magrathea
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.
Full illustration
Greed Propaganda
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.
Patterns
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.
Sonnet 19
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
Sonnet 26
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
Sonnet 33
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!
Sonnet 4
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?
Let's make something more human!
Reach out to me here:
Email: hello[at]irfan[dot]space
DM (Direct Message): twittertelegram
© 2018 Irfan Mir. All Rights Reserved. Privacy Policy