I was a core member of INVNT team during the initial and recovery phases of development on MIRA.
In the first phase of the project, we inherited a basic design system from a former partner's platform. All existing components, however, had to be redesigned for new functionality and to integrate the client's branding. I led these efforts by reviewing the brand guidelines and setting up the color palette and fonts as styles in our Figma library.
Next, I adapted each component including buttons, text fields, sliders, pop ups, etc. to conform to the guidelines. We distinguished MIRA from Emirates' existing digital platforms by taking a glassmorphism approach in our design. With the client's approval, we updated buttons, notifications and panels to include translucent backgrounds with a specific shade of gray for better contrast and readability.
Over time, I built new components with multiple variants. With the new design system all set up, our team benefited by using component instances in the wireframes. I routinely updated the design system to address client feedback and carefully published any updates as it affected our prototypes.
I was in charge of maintaining Figma files so I added thumbnails, renamed frames and organized them into pages and sections. Besides housekeeping, I gathered UI/UX references from games and digital learning tools. I also adapted desktop components for tablet and mobile, and designed new frames as and when needed.
.png)
Early on, I was tasked with designing an avatar creator with customizable facial features such as eyes, nose, lips, and so on. I initially designed the UI with horizontal sliders to cycle through options but I switched to a component with circular previews for better UX.
To mockup the previews, I gathered stills from Unreal Engine’s MetaHuman Creator. After stakeholder buy-in, we proceeded to refine the available options for each category. The circular preview component ended up influencing platform-wide menus and sub-menus.
Ahead of milestone presentations, I checked wireframes for any inconsistencies before preparing prototypes. Between each frame, I added interaction triggers and animations for smoother transitions. For the presenter's ease, I added flows in different segments of the prototype.
We occasionally needed bespoke visuals to enhance the user experience. I supported the team by designing icons and mockups. Although we used an icon library, I designed a handful of icons which aligned with our design system. For a WebAR app, I created silhouettes, inspired by Apple's coaching view, to guide users through AR initialization.
For avatars, we received strict directions and references from client to only use approved hairstyles. Since the MetaHuman Creator offered limited options, I composited multiple hairstyles together to achieve the desired results.
For more elaborate hairdos, we found images of subjects with side profiles. I distorted these images to match the facial structure of our MetaHuman. Next, I carefully painted out any unwanted strands of hair and adjusted the hue to blend the layers. The results were convincing enough to receive client's approval.
Ahead of Dubai Airshow 2023, I assisted the design director with presenting alternate treatments of our client's booth by editing stills of the 3D mockup.
I used a combination of Photoshop's content-aware fill and its clone tool to remove the Emirates badge from the wall. I followed the brief to create two more variations: one with flat text and another with protruding text.
These quick visualizations led to the final design of the exhibition stand seen on the showfloor. It featured the same wall without the badge. The text copy was replaced by a stacked MIRA logo created by the client team.
.png)
MIRA was officially unveiled at the Dubai Airshow, held in November 2023. As part of the reveal, we created sizzle reels and walkthrough videos which offered an early glimpse to attendees including the Prime Minister of UAE.
Each video was meticulously storyboarded with multiple rounds of client feedback. I supported the team with storyboard revisions and shared updates with our editor. I was also responsible for collating stakeholder feedback on rough cuts and gathering assets including content from Emirates library, Unreal Engine renders, fonts, and music.
For narration, we created an AI voice clone using audio samples of a cabin crew member. I divided the scripts into segments and generated hundreds of voiceover tracks. Each time, I adjusted the settings and tweaked prompts to achieve a consistent tone.
Once we reached the picture lock stage for each video, I mixed the audio and edited the voiceover to remove any digital noise or artifacts. For accessibility, I added on-screen captions and promptly delivered the final cuts to our on-site team for testing.
Besides the reveal videos, we created a web-based augmented reality (AR) experience which was a watered down version of another app. Since I had worked on the original prototype, I was tasked with updating the wireframes and creating a similar experience for the airshow.
The original app featured a flying A380 visible in AR when users pointed their phones to the sky. Because the event was held indoors, the developers had to redo the AR tracking system while we had to adjust the copy and UI/UX accordingly. I updated the wireframes across the board before prototyping it.
.png)
We tested multiple builds of the app internally to report bugs and provide feedback to devs. The final build worked flawlessly at the exhibition.
Reference images were a crucial aspect of our 3D production pipeline. Our design team utilized them to build a digital twin of the Emirates A380 for VR cabin crew training.
I supported the senior project manager with reviewing assets and progress of the 3D environment. In case of any missing texture or detail, we provided feedback with side-by-side image comparison to help the designers.
Prior to a scheduled photo shoot, I prepared a detailed shot list to ensure we captured sufficient references of crew uniforms. It included estimated time for setups and breakdown of uniform variations to guide the on-site photographer. After handover, I sorted the images into labeled subfolders on our cloud storage.
Moreover, I coordinated with our designers and the client team to track and validate nearly 300 interactive assets. In the process, we created a shared database for future reference.
