About – SMD

More Instrument Clusters

March 5th, 2024

Single Dial Design

Designed a 10 inch 1280×480 instrument cluster. Took inspiration from the Ferrari SF90 Stradale cluster.

Non Linear Indicators

Designed a 1280×720, 7 inch instrument cluster with inspiration from Hyundai and BMW cluster designs.

Retro-ish Theme

Designed a 1280×720, 7 inch instrument cluster. I wanted to design it based on a retro them with blue and orange colors. The design is not generic but has all the essential information. Need to improve the design a bit.

Custom Cases Website

December 19th, 2023

This was another project I did as part of the Google UX certification program. Let’s take a look at it.

The prototype for Desktop and Mobile versions of the website can be found below.

Desktop Prototype

Mobile Prototype

The Design

Both the layouts are pretty simple with appropriate amounts of negative space. On both layouts, the make your case section is the only visible section with both trending themes and community favorites available on scrolling.

The main user flow is customizing and ordering a phone case. Lets look at the screens that the user goes through.

Desktop version

Mobile version

The main new feature of this website is the ability to color the case based on the given grids. I wanted to make this experience convenient on both the desktop and mobile versions. I agree that it’s still a bit difficult to color on the mobile version, but the intention is to enable zooming in on the canvas. A similar thing will be possible in the desktop version too.

The other stuff

Another feature I wanted to include was an explore section where other users can publish the custom cases they designed on the website. These cases can be viewed and purchased, ideally for most if not all brands.

Please leave your feedback in the comments below. Thanks for reading through.

Musician Booking App

December 19th, 2023

This was my first project as a designer. I designed a mobile app to book musicians for various events. This was done as a part of the Google UX certification program. Let us take a look at it.

The prototype for the app can be accessed here.

Link for prototype

The Layout and Features

Band bio page with pictures on top. Clear button for inquiry. List of events already scheduled to avoid conflicts.

And finally the good old profile page.

Upcoming bookings are on top. List of trending bands, genres, and additional necessary information.

A dedicated messages tab after enquiry for booking and confirmation. Booking status indicated on the message section.

The not so important pages

These are not the main pages but still need attention. I’ve demonstrated my design versatility by giving careful attention to various pages in a mobile app, even those considered less prominent.

The full project – Case Study

I have followed the whole process of developing an app, starting from user research, personas, competitive audits, wireframing, feedback, low fidelity, and finally high fidelity prototypes. You can find the case study for this project in the below link.

Link to Case Study

What could I have done better ?

I think the layout is decent. But one thing that I noticed then and I still have in mind is the un-refined look. I think it is due to a combination of the font, color choices, use of generic icons, and definitely the shadows. But for a first project, I think its pretty neat.

What do you think? Please let me know in the comments below. Thanks for reading through.

MBUX Cluster : Study and Recreate

November 17th, 2023

In this post, let’s take a look at how instrument clusters at Mercedes Benz took form. Then, there is a section briefly describing the techniques used to recreate a recent cluster launched as a part of MBUX 2.0.

The History

The first form of digital screens were introduced around 2000s. They were mainly restricted to be used in the center. The instrument clusters were largely analog displaying essentially the same information such as speed, RPM, fuel, oil temp, caution lights etc.

Recreation

Below is the design of an instrument cluster released as part of the second generation of MBUX, which is featured on the “hyperscreen” included in various new models such as the EQS.

Here, I attempted to recreate the above instrument cluster. While the original cluster features elements that appear photorealistic and the recreation is not an exact replica, I’ve made an effort to capture all the major elements involved in the design.

This type of work has 2 advantages:

1. Getting more experienced and understanding the limitations with the software. (Adobe Illustrator in this case)

2. Documenting the finer details incorporated in the design.

Let’s take a closer look at some of the elements.

The Finer things

The cluster recreation has been accomplished solely using Adobe Illustrator. Lets look at the process of recreating some of the details. Also some of the details do not look the same. Please include any suggestions in the comments below.

Background

Background was created using a gradient mesh and mountains using pencil tool with freeform gradient applied to them.

Range Bar

The effect has been created using color dodge, at least the gradient part. The lens flare effect could be recreated using multiple thin ellipses with the same color dodge effect. But since I chose a lower resolution canvas to start with, the effect looked out of place and hence has been left out.

G-Force Indicator

Created using simple gradients. The original appears more faded because of the light in the center of the screen. ~~Now that I think of it, the background mesh can be reapplied as an overlay on top of the cluster to recreate the proper exposure.~~ It didn’t work.

Outer meter boundary

Recreated mostly using free-form gradients.

Speed Indicator

Directional blur effect recreated using multiple half ellipses that have been combined with the central indicator and additional parts trimmed. A gaussian blur layer has been applied on top of it. This layer also has the color dodge effect to create the orange to red transition as we move towards center.

The center part has been recreated using gradients and applying multiple gaussian blur layers.

Feedback

These are some of the main elements that I thought were worth discussing. I once again want to reiterate that the recreation does not look very similar to the original. I am open to feedback and definitely want to know how the original was created. Leave your feedback in the comments below. Thank you !