Web & UI/UX Design

MGX CII Calculator Case Study

Description
Specification

Here’s a case study on UI/UX design for a web-based application: The Carbon Intensity Indicator (CII) Calculator. In this project, I served as the UI/visual designer, contributing to its development.

Tools used: Figma, Adobe Illustrator, Adobe Photoshop
Role: UI Designer

Magellan X Website Product Page

Description
Specification

Magellan X recently underwent a merger with its three subsidiaries, necessitating the integration of all their product information onto a single platform—the Magellan X website.

I was responsible for crafting the entirety of the website, from the pages, wireframes, user flow ui elements, and CTA. This included designing the product pages to cater to the distinct offerings of each subsidiary, focusing on Decarbonization, Worker Safety, and Inventory Optimization.

Following the updated Magellan X branding guidelines, I’ve guaranteed that each solution is presented clearly, accentuating their unique selling points and delineating their functionalities effectively.

UI & layout prototyping of this website was done in Figma.
Images editing were done in Photoshop & Illustrator.

Motion Graphics – Scanning Spare Parts Tag

Description
Specification

SCNX offers the PROPELLER Ship, an Inventory Solution utilizing tablet and RFID tags/stickers as hardware, complemented by embedded software. The PROPELLER Ship tablet features an RFID scanner enabling users to locate tagged items within their physical inventory.

I was privileged to develop motion graphic elements for the scanning procedure, undertaking the creation of illustrations and animations.

These illustrations and animations are in Lottie animation format that were rendered through JSON.

Tools: Adobe Illustrator, After Effects
My Role: UI, Illustrator & Motion Graphics Designer

Motion Graphics – Scanning Location Tag

Description
Specification

In another functionality of the PROPELLER Ship app, the tablet scans location tags positioned on inventory shelves. This animation depicts a scenario where the scanning fails to detect any location tags, prompting the user to press and hold the tablet for a re-scan.

I was responsible for designing both the illustration and animation of this motion graphics element.

These illustrations and animations are in Lottie animation format that were rendered through JSON.

Tools: Adobe Illustrator, After Effects
My Role: UI, Illustrator & Motion Graphics Designer

Tunalley

Description

During my course in Visual Elements of User Interface Design conducted by California Institute of the Arts through Coursera, we had to create and imagine the interfaces of a product as a final project. I chose the tuner app among the other given choices, and I chose smart watch as the medium.

Tunealley is an all-in-one tuner for the out and about unplugged guitarists, that easily turns the built-in-microphone in your smart watch into a wearable chromatic tuner and recorder, while featuring real-time weather condition of your location, to make the best of your outdoor performing experience. Pitched to precision & perform in perfection!

Spizza App

Description
Specification

I presented a fresh design concept for the Spizza delivery app, featuring a user-friendly interface and intuitive navigation. The design includes categorized options and simplified topping selection for adding pizzas to the cart effortlessly. Additionally, the billing section boasts a clear and straightforward UI to facilitate seamless payment processing.

Wireframe & UI design was done in adobe XD as well as Illustrator version. The Illustrator version was then programmed in Invision to create prototype for easy viewing.

La Nonna Web Design

Description
Specification

I undertook a complete overhaul of La Nonna’s website. Renowned for its authentic, homely Italian cuisine, La Nonna’s online presence now echoes the rustic charm of its dishes. The website design embodies an Italian ambiance, evoking a sense of warmth and tradition. All hand-drawn illustrations were meticulously crafted, personally drafted, and seamlessly integrated throughout the website.

WordPress based CMS. I Designed the front end, create a prototype for programming and updated the menus & promotions weekly after live.

Senso Web Design

Description
Specification

I have given the Senso Ristorante & Bar website a makeover, resulting in a fresh, responsive design that is optimized for tablets and mobile devices. The revamped website prioritizes simplicity, focusing on highlighting the delectable cuisine and the inviting ambiance of the restaurant. With minimalistic navigation, it’s effortless for visitors to explore and immerse themselves in the experience.

Responsive WordPress based CMS. I designed the website in a clean minimalist feel, showcasing the restaurant’s menus and specials.