Ongoing illustrative/design project to streamline the weapon UX in the open beta of Supergiant's Hades 2.

INTRODUCTION

Supergiant's first sequel, Hades 2, flows largely the same as its precursor. The visual and interactive system is already well-established, so it makes sense to stick to it for both new and returning players, and more than that, the majority of it works great! There's only one region within the game, as it stands, that could use a bit of streamlining— the Training Ground's Silver Pools (or what I like to call the Armory).

THE ISSUE

Hades 2's Training Grounds are quite similar in terms of function, at first glance, to the armory found outside Zagreus' room in Hades [1] (at least, until the player progresses, but we won't get into that). The accessible weapons are similarly laid out for the player to choose between and swap through Aspects, but with the addition of multiple access points— from direct interaction with the weapon itself, or from interaction with the Silver Pools.

Interaction with the Pools prompts a crafting menu from which to unlock/equip both Weapons and their Aspects, but here's the thing; there's not much of a hierarchy to be found within the overlay proper, nor does it fit as well when paired with the rest of the Hades franchise's illustrative UI system (not to mention Supergiant's stylistic history, such as Transistor's level-up screens). Weapons and Aspects, locked and unlocked alike, are all found within one tab with no immediate visual cues as to which is which, nor which Aspect corresponds to which Weapon, until the majority are unlocked. There's also a duplicate tab that's composed exactly the same way for Aspect leveling; that doesn't even touch on Gathering Tools, which are also accessible individually and through the Pool, and face the exact same issues regarding tab overuse as Weapons.Objectives are as follows:
1. To revamp the Weapons'/Tools' crafting menu, and give it a more established sense of hierarchy/cohesion,
2. to streamline the flow, and reduce visual clutter by prioritizing relevant information, and
3. to give the overlay a more established screen presence, such as that of both other existing in-game assets and Supergiant's track record for their illustrative UI..

CONCLUSIONS

We're still working on this, folks. It's gone through a few different compositional iterations, as I've tried to map out the balance between the backing illustration, the overlay contrast, the menu, the visual cues, and so on, so forth... Overall, though, I've found that an interactive collapsible structure, split within two tabs, has worked best for the menu; the main concern beyond that has been, again, figuring out the right balance between that and illustration/visual effects. Below are some scans of initial notes and compositional thoughts, as well as a couple digital drafts that led to what exists right now.

Inspired by the Destiny Companion app, SCRIBE was developed over the course of one semester. Currently being expanded beyond prototyped UX skeleton into a more established, user-friendly, attractive interface.

Initial UX research included user personas, journeys, asset iterations, and wireframes, as well as user flows and research conducted in the form of surveys and individual interviews.

Completed as a proof-of-concept reoptimization of Duolingo’s onboarding process. Inspired by personal critiques and issues encountered regarding data loss and cloud backups (or lack thereof).

INTRODUCTION

Since its release in 2011, Duolingo has gone through quite a few UX changes, with the most notable (or, at least, the one that stuck out to me the most as an on-and-off user) being the switch from the Unit system to the Path system to the kind of middle ground that exists in-app today. However, as far as I'm aware, there haven't been any major revisions in the user flow. This shows most clearly to users like myself, whose relationship with Duolingo started off a bit rocky, in the onboarding flow.

THE ISSUE

Duolingo's onboarding flow is kind of anti-UX— not in the sense that it's poorly designed, or that it flows badly, or causes unnecessary friction for the user, but in the sense that it flows so smoothly that it reads kind of like an easy back-and-forth between the user and an instructor. It's not overthought, is what I'm trying to say, and it does a very efficient job of getting the user set up as quickly and easily as possible.What Duolingo doesn't do, though, is prompt its users to sign in or register for an account (at least, not from the get-go). Which isn't inherently bad! Accounting for an as-guest percentage of the userbase is far from a poor move. However, this flow fails to account for a key aspect of the user's long-term experience: progress retention.

As it stands (or stood, at the project's time of inception), Duolingo's entire onboarding process can be completed without ever linking or creating any account for data backup. This means that, in the event a user switches devices or wipes their hard disk— or, honestly, just deletes the app, with or without the intention of downloading it again later—, their existing progress, no matter how deep into the course, will be lost. Which, you know, isn't super ideal.


The objectives for this redesign were as follows:1. To reconfigure the original account flow and prompt the user to link their progress upon initial launch, without sacrificing the existing immediate dive into learning,2. to streamline the interactive flow, and make it a little more visually interesting as opposed to the very minimalist, multi-page list-format composition that exists in-app, and3. to sharpen my illustrative UI skills a bit without straying too far outside of Duolingo's existing visual identity.

CONCLUSIONS

Admittedly, this was a project where I knew from the jump which direction I wanted to go; while some aspects ended up changing as I worked (whether it be illustrative compositions or proportions, or the course selection rework after the official in-app addition of mathematics and music), the screens stayed largely faithful to my initial low-fidelity sketches.I think there's definitely potential to expand this redesign beyond just the sign-up/login screens— I'd like to try my hand at the entirety of the onboarding, honestly, course selection and all—, but for now, I'm pretty satisfied with the product as it is. Below is a scan of the very initialmost sketches of the startup, login, and account screens.

Ongoing project to revamp the minimal UX of Night School Studio's adventure sidescroller, Afterparty. Inspired by personal critiques during my first playthrough, and expanded both for immersion and visual charm. Currently being developed past wireframes.

INTRODUCTION

Night School Studio's third title, Afterparty, is a walk-and-talk sidescroller following two characters, Milo and Lola, as they try to gatecrash and subsequently drink their way out of hell. It's reminiscent of its precursor Oxenfree, but where Oxenfree shines, both in replayability and design, Afterparty falls just short.

THE ISSUE

Like Oxenfree, Afterparty's relatively minimal. There's no real HUD, and the only real screens aside from active gameplay and the settings menu are the pause menu and its subsections; in Afterparty''s case, this would be the map, photo album, and its one real deviation from Oxenfree's design standard— Bicker, Hell's equivalent of Twitter.

Bicker takes up the majority of the pause screen. It's what the player loads in to by default upon hitting tab, and as the live game stands, it's... kind of underwhelming!, both compositionally and in terms of information provided to the player. Bicker is fun, sure, but it's not gameplay-relevant enough to warrant its own dedicated screen with no other real usage of the space around it, especially when other features— like the questlog and player decision records (mostly depicted in-game as text messages)— are either hidden (such as the questlog behind layers of map interaction) or don't make a player-accessible appearance at all.


The objective here is mainly to fulfill these three goals:
1. To restructure the pause screen to make better use of space, both compositionally and in terms of usefulness,2. to give the player a visual reference for core gameplay-related information (including, but not limited to, both a more immediately locatable objective list and some way to track dialogue option deviations based on whichever behavior-modifying drinks they have Milo and Lola down), and3. to give Afterparty's UI a bit more of that distinct, engaging character that exists within the visuals and atmosphere established in-game.

CONCLUSIONS

The composition went through quite a few (extremely) low-fidelity iterations before I landed on what's embedded above. Included are the objective list, a kind of status-bar format to reference which drinks the player chose, as well as visual cues for both the remaining duration and hints as to how, exactly, Milo and Lola's dialogue options are changed depending on what they've drank. To the left is a phone— stylized with cracks and dead pixels, because let's be real, nobody's getting a decent phone in Hell— from which the player can access Bicker, their past messages, and their camera roll.

Completed as a proof-of-concept, vertical scroll illustrative site detailing the history of the Natl. Aeronautics and Space Association (NASA).

Work completed during a six-month internship to add and revise existing features within a gamified carbon tracking app.

INTRODUCTION

Tanbii is a tech startup developing a self-titled, gamified personal carbon reduction app. Its two primary features are the open world gameplay, where the player completes conservation-related quests, and the carbon tracking subsection, in which the player commits to reducing their real-world carbon footprint for rewards offered by Tanbii's partner companies.

THE ISSUE

Tanbii's carbon tracking features, while ambitious, run into some flow and experience problems (the majority of which are outlined below, but where's the harm in some reiteration?).Prior to the reworks, the feature was cluttered, largely inaccessible (whether because of poor flow or divergence from WCAG standards), and lacked a sense of importance due to both the stacked overlay format and the fact that, in now-prior versions of the app, the player would initially load into a menu screen that separated the two features, with no dedicated way to quickswap between the two without exiting gameplay entirely.It also felt, honestly, kind of irrelevant to the primary gameplay; integration wasn't the best, and there wasn't much of a reason for players mainly interested in real-life rewards to engage in gameplay, nor for players primarily interested in gameplay to engage in real-life carbon reduction.

Very initial explorations— like, very initial, after just getting a general overview of the feature, prior to any revamping or inter-team discussion— included a couple of short, individual user interviews, as well as a quick survey sent out both to existing Tanbii players and people otherwise unfamiliar with the app. General consensus mostly lined up with expectations, with a couple of additions that were used to beef up the team's response to our existing concerns.


Goals for the redesign were as follows:
1. To give the carbon tracking feature a more established place within the app by eliminating the load-in menu and stacked overlay format, as well as designing an icon to be included in the game's existing HUD, which would allow players to swap between functions while in-game,2. to address integration issues by adding a Milestones subsection, as well as a theoretical region subsection that would both play into Tanbii's expanding world and give the players a more direct link between their real-life actions and in-game experience, and3. to resolve intuition-related pain points by reworking the feature's flow without sacrificing the existing look and feel of Tanbii's visual identity.

CONCLUSIONS

While the aesthetics of the carbon tracking feature haven't changed much, I think, for now, that the logic changes that have been implemented above lend the section a bit more readability and presence within the app as a whole. The addition of the Account and Analytics screens gives players a bit more insight as to what they're actually doing and how it connects to their in-game achievements and rewards, and they also help keep everything a little bit more organized.Aside from that, the reduction in overlays is beneficial in cleaning up the visual clutter that pervaded the carbon tracking feature initially; right now, overlays are relegated to temporary information, like tutorials and submission screens (neither of which are auto-prompted as they were before, which gives the user a little bit more breathing room).I do think that there could be some more integration of Tanbii's really distinct, earthy aesthetic, as seen in the rest of the app and the older versions of the carbon tracking system, but other than that I think what we're working with suits Tanbii's needs just fine. Anyways; I digress. Below are some of the low-fi wireframes that evolved into what you saw above.

Conceptual restaurant branding, built from the ground up. Collateral includes style guide, menus, website proof-of-concept, and more.

Rebranding for the Electronic Entertainment Expo, including animated promotional posters, brand collateral, and merchandise concepts as well as a logo style guide and poster-style case study. Coincidentally completed on the night that E3 was announced permanently cancelled— ain't that a [REDACTED]?

Aside from preparational and promotional material, collectible merchandise— passes, tickets, and sticker concepts— were also designed.

Experimental typographic zine installation created to make tangible the experience of living with comorbid mental illnesses, especially as a visual artist. The installation included both interactive and purely visual elements, including (but not limited to) the zine itself— which, in its printed state, was modified through shredding— and a non-modified copy, which the audience was encouraged to deface themselves. A QR code with a musical aspect to the installation was also included.

Brand personality guidelines for a luxury skincare brand, styled minimally and based entirely on their logo and website.

Work completed for Southern Connecticut State University's Division of DEI for a mural design to be installed on campus property.

Storyboard created for Robison Oil's winter preparation animated advertisements, which was then handed off to motion designers. Summer variants were also created.

HELLO .ᐟ

I'm an Arab-American visual artist primarily interested in narrative-driven art, visual storytelling, and the things that make us human.I got into design primarily because of a love of, again, narrative-driven art and visual storytelling. This was motivated further the more I got into gaming; the intersection of beautiful visuals and good, intuitive design became increasingly fascinating to me the more I consumed, and has become a huge passion of mine over the years, especially when it comes to accessibility reform in the realm of digital media.I believe that improving user experience and beautiful art should both complement and elevate each other. Good design should never come at the cost of quality of life, and it should never be the reason that someone can't access the art at all.I love birds, video games, and the color green. If you're interested in any of those things— or, hey, even if you're not!— feel free to contact me whenever.Resume available upon request.