Introduction :

Have ever observed that youtube automatically switches to lower resolution based on network strength , You might have already observed that few of websites like amazon or facebook etc kind websites used to have [m.domain.com](<http://m.domain.com>) loaded in mobile browser and domain.com in desktop. I remember gmail used to have a option Load basic HTML (for slow connections) written at bottom of page.

The way people access internet has changed dramatically in recent years, most people are using mobiles ( especially in India), and if we just type “Which mobile is best for playing Call of Duty” we would be having 1000s of influencers reviewing with benchmarks and all in different price points. We can see that there is a huge performance gap between devices users has (we can see image below of frequently used devices benchmark). If it is case of web apps , the internet network strength plays key role in determining the performance of website too. So in order to make our web app accessible to the larger scale we need to respect the hardware device and network of our users.

screen shot from cpubenchmark.net

What is Adaptive Web Design?

Adaptive web design is a strategy that involves designing a website to adapt its layout and functionality to suit the device, network, browser, and screen resolution of the user. It ensures that our website provides an optimal user experience across a wide range of devices and browsing contexts.

Basically we make a websites that has its core actions like navigation , visually appealing and performs well regardless of device or network, so that user can perform their basic things. For example , if we are stuck in a road in middle of night at hill station, at that time if google maps takes time to load with all the animations and near by restaurants images , we would be so angry and we ideally prefer to just show a arrow to get sort the direction where to take left or right, right!

Pros of Adaptive Web Design

1. Improved User experience and user retention by preventing problems that could drive users away
2. Faster page loads which might help in improving SEO along with decrease in user’s wait time.
3. User can choose to save data effectively
4. Easier maintenance and error tracking.
5. Provides enough Data by (setting up analytics) which helps in prioritisation and optimisation according to traffic and network users use most.
6. Switch between resolutions and decrease server load based on headers
7. Plan and add progressively high end features according to user’s network and device.

Cons of Adaptive Web Design

1. There might be effect on SEO ranking of the website due to duplicated content is not handled properly.
2. It takes extra cost to implement as it requires more developers to code and maintain multiple versions.

{Adaptive Vs. Responsive} Web Design

There are 2 ways we can build websites so that they work with various screen sizes and devices: adaptive or responsive web design.Both adaptive and responsive design play an important role in improving user experience in their own ways.

Simple terms , adaptive is like having different dresses for different occasions and responsive is like having flexible hoodies that can adjust to different body sizes , so you and your brother can wear it peacefully.

How to achieve it

There are few APIs provided by browser to help in achieving this

a) Estimating Network Strength :

navigator.connection is network information API provided by browser which has information about network connection , it helps to identify low network or data saver preferences.

Reference from web.dev

Ref : https://googlechrome.github.io/samples/network-information/

b) Estimating Memory :

navigator.deviceMemory is another device information which gives device memory in gigabytes in nearest power of 2 ,it helps to identify low-end devices.

c) Estimating CPU Power :

navigator.hardwareConcurrency gives information about number of logical processers available to user agent. it helps to identify cpu power and plan using intensive logics accordingly so it wont stuck to user (especially 3D or gaming sites)

BTW, always check for Browser Support, before planning !!!

Which websites does this ?

1. Twitter has “Data Saver Mode” which loads blurred or low resolution images
2. Youtube High Resolution to low Resolution shift on low network.
3. Amazon has different set of navigational items for different devices

Conclusion

For starters, responsive design is good and takes lesser time to implement but if we are scaling up and our website has lot of traffic, that means we are reaching lots of device types and network strengths , so we have to plan in moving to adaptive design.Simply, We cannot deliver same experience to every user , but we could make core experience for all users.

References :

https://web.dev/articles/adaptive-serving-based-on-network-quality

https://www.youtube.com/watch?v=puUPpVrIRkc

https://www.searchenginepeople.com/blog/the-difference-between-adaptive-design-and-responsive-design.html

Prerequisite :

1) Understanding Fonts : Fonts for Advanced Web Dev

Introduction :

I hope everyone has read prerequisite post as it plays major role in context building for this blog post.Web fonts are typically huge files, and your website will take a while to load them. Different browsers handle this latency in different ways.Custom web fonts have been around for a long, but alas, there is currently no ideal solution for web browsers to load them.

How does Font load ?

Before the browser understands which font resources it needs, it must build the render tree, which depends on the DOM and CSSOM trees.Requests for fonts come much later than requests for other important resources, and the browser may be prevented from rendering text until the requested resource is obtained.

1. The browser requests the HTML document.
2. The browser begins parsing the HTML response and constructing the DOM.
3. The browser discovers CSS, JS, and other resources and dispatches requests.
4. The browser constructs the CSSOM after all of the CSS content is received and combines it with the DOM tree to construct the render tree.

• Font requests are dispatched after the render tree indicates which font variants are needed to render the specified text on the page.

5. The browser performs layout and paints content to the screen.

• If the font is not yet available, the browser may not render any text pixels.
• After the font is available, the browser paints the text pixels.

Font loading strategies :

These are two font loading strategies used by majority of browsers.

1. Flash of Invisible Text (FOIT) where the text is hidden until the font is downloaded. If the font hasn’t loaded after three seconds in browsers like Chrome and Firefox, the system font will be loaded.Until the font is ready to load & in Safari case it entirely hides the text.
2. Flash of Unstyled Text (FOUT) uses the fallback system font initially and then upgrades to the web font when it downloads.It focuses on content, although temporarily ignoring the layout.This may fail when showing a different font until the original one loads.

here is another Custom Strategy that we can implement , which is widely used these days :

3. Flash of Faux text ( FOFT) , this is latest and used to tackle above two, basically it is done by creating a fallback font of same type with minimal file and load it later on.
More about this will be in my next blog post .

Impact by Font loading strategies on Web performance :

There are a variety of ways in which web fonts impact performance:

1. Delayed text rendering
2. Layout shifts : These layout shifts occur when a web font and its fallback font take up different amounts of space on the page.
3. Blocked Rendering : When the browser encounters a render blocking resource, it stops downloading the rest of the resources until these critical files are processed.

overall , it is a bad experience for user too as Font loading or Font change can convey the idea of a broken website.

Best practices of Font Loading :

a) Preload to avoid layout shifts (External origins)

Using <link rel="preload"> will trigger a request for the WebFont early in the critical rendering path, without having to wait for the CSSOM to be created.

There are three different declarative solutions, which are all relatively new <link> types.

• [<link rel="preload">](<https://web.dev/preload-critical-assets/>) informs the browser that a resource is needed as part of the current navigation, and that it should start getting fetched as soon as possible.
• [<link rel="preconnect">](<https://web.dev/preconnect-and-dns-prefetch/>) informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.
• [<link rel="prefetch">](<https://web.dev/link-prefetch/>) is somewhat different from <link rel="preload"> and <link rel="preconnect">, in that it doesn't try to make something critical happen faster; instead, it tries to make something non-critical happen earlier, if there's a chance.

DNS prefetching allows the browser to perform the DNS lookups for links on a page in the background while the user browses the current page.It is attempt to resolve domain names before resources get requested.

<link rel="dns-prefetch" href="<https://fonts.googleapis.com/>" />

Read about other rel attribute values : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

caution : preload is highly effective at making fonts discoverable early in the page load process, this comes at the cost of taking away browser resources from the loading of other resources.

b) Using Latest CSS properties

Two properties to learn :

1. font-display property

From MDN Docs : https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

2. font-face property

From MDN Docs : https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

simple suggestion , use font-display: swap for branding and other visually distinctive page elements; use font-display: optional for fonts used in body text.

but always check the support of browsers , https://caniuse.com/?search=font-display

clear picture how it works below , (optional)

Understanding Life time of Font download :

the lifetime of a font download into three major periods:

1. The first period is the font block period. During this period, if the font face is not loaded, any element attempting to use it must instead render with an invisible fallback font face. If the font face successfully loads during the block period, the font face is then used normally.
2. The font swap period occurs immediately after the font block period. During this period, if the font face is not loaded, any element attempting to use it must instead render with a fallback font face. If the font face successfully loads during the swap period, the font face is then used normally.
3. The font failure period occurs immediately after the font swap period. If the font face is not yet loaded when this period starts, it’s marked as a failed load, causing normal font fallback. Otherwise, the font face is used normally.

You can even test it with package : fontfaceobserver, It will monitor when a webfont is loaded and notify you.

For most sites, these are the three strategies that will be most applicable:

• If performance is a top priority: Use font-display: optional. This is the most "performant" approach: text render is delayed for no longer than 100ms and there is assurance that there will be no font-swap related layout shifts. However, the downside here is the web font will not be used if it arrives late.
• If displaying text quickly is a top priority, but you want to still ensure the web-font is used: Use font-display: swap but make sure to deliver the font early enough that it does not cause a layout shift. The downside of this option is the jarring shift when the font arrives late.
• If ensuring text is displayed in a web font is a top priority: Use font-display: block but make sure to deliver the font early enough that it minimises the delay of the text. The downside of this is the initial text display will be delayed. Note despite this deplay, it can still cause a layout shift as the text is actually drawn invisible, and the fallback font space is therefore user to reserver the space. Once the web font loads, this may require difference space and hence a shift. This may, however, be a less jarring shift than font-display: swap as the text itself will not be seen to shift.

Note : Combining <link rel="preload"> with font-display: optional is the most effective way to guarantee no layout jank when rendering custom fonts.

For better understanding and good advanced knowledge read this amazing post https://www.zachleat.com/web/comprehensive-webfonts/

Inline Font Declarations ( Internal or Local Fonts )

Allowing the browser to discover the font declarations sooner by putting our fonts locally and using them in HTML page as internal style tag,so the browser doesn’t need to wait for the external stylesheet to download.

Conclusion :

It’s difficult to give a recommended approach as it does depend on individual preferences, how important the web font is to the page and brand, and how jarring a late-arriving font can be when swapped in.

References :

https://web.dev/codelab-avoid-invisible-text/

https://web.dev/font-best-practices/#preconnect-to-critical-third-party-origins

How to Reduce DNS Lookups - KeyCDN Support

Thank you ! I hope this post find insightful ! Before you go:

• 👏 Clap for the story & follow 👉
• 🔔 Follow : LinkedIn | Website

Introduction :

The most important thing we observe in daily life is text , it basically gives immediate meaning to the object we are viewing , it plays major role in our day to day life by make us understand creative content like banners or bus stops or whatever. Similarly in websites too , they play major role in making good understanding and connection. Typography plays major role in web design.Good design, branding, readability, and accessibility all depend on typography.

Website designers have been using custom typefaces for many years. Because custom fonts are not included in the operating system, they must load with the site and show consistently on all platforms.Fonts often come as huge files that take a long time to load.

What are Fonts?

A font is the specific style of text that’s printed on a page or displayed on a computer screen.It is a graphical representation of text that may include a different typeface, point size, weight, color, or design.

There are two basic types of fonts used on the web:

• Web-safe fonts: These are standard fonts that come along with Operating System , In developer words these are called Fallback Fonts, these generally include fonts like Times New Roman, Arial, and Courier.
• Web fonts: These are fonts that are generally custom designed for brand or followed by designers other than traditional fonts found in Operating System and must be downloaded by the browser before they are displayed.

Find web-safe fonts here : https://www.cssfontstack.com/

What ar different formats of Web Fonts ?

There are currently four main font formats used on the web.

• TrueType Font (TTF): Developed in the late ’80s by Apple and Microsoft. It is the most common font format.
• Web Open Font Format (WOFF): Font format developed in 2009 for use in web pages. WOFF is OpenType or TrueType that has been compressed and with additional metadata.
• Web Open Font Format (WOFF2): Better compression than WOFF.
• Embedded Open Type (EOT): It is designed by Microsoft as a compact version of OpenType fonts that can be used as embedded fonts on websites.

~ 96% of browsers support the WOFF2 format, according to Can I Use. WOFF2 compresses data roughly 30% more effectively than WOFF.

If you need to support older browser versions, fall back to a web-safe font, such as Arial, for the rest.

In my next post , i will be writing about Font loading in browsers , by that above line will be clear.

Optimising web font delivery

1.Prioritize based on browser support

2.Choose only styles you need :
most sites only need a normal style and a bold style

3.Character sets or Font Subsetting :
Subsetting is nothing more than removing unused characters from the fonts files. Unused characters are normally characters from languages that you don’t use, or special characters that your website or app may not need but are often embedded in font files. By subsetting, you can potentially get up to a 50% reduction in file size.

4.Host fonts locally or prefetch

5.Store in localStoragewith Base64 encoding :
A browser's native cache gets flushed quite frequently, especially on mobile devices. So by saving to localStorage, the file gets cached persistently.

Popular Web Font Providers :

Web fonts can be free or you can pay for them, usually via a subscription. Some popular providers are:

• Google Fonts. it is one of famous and largest provider of free online fonts and all of their fonts are available for download to your computer, allowing you to use the same fonts to produce offline documents like they are used online.
• Fonts.com these are kind of marketplace for many premium fonts , which we can find if they are not available with free providers.
• fontfabric is a font designer that offers expensive fonts for usage online and as web fonts. Even though you’ll have to pay for them, using these will give you something more unique than using Google fonts.

Tools :

• Font squirrel Webfont Generator — to subset and base64 encode your fonts into one final file.
• Font pair — this website is good for quick start for personal portfolio.
• Type scale — this website helps in creating our own typography and easy to write common styles
• Whatfont — chrome extension for identifying fonts on web pages.

Next post :
https://medium.com/@sandeep-machiraju/2-font-loading-fonts-for-advanced-webdev-901a57d5a288

Thank you ! I hope this post find insightful ! Before you go:

• 👏 Clap for the story & follow 👉
• 🔔 Follow : LinkedIn | Website

As a photographer , i always like snapchat for especially to capture moment with very ease and share to all my close friends , either if it is movie i started in OTT or just a street dog that waves tail at me , I immediately go to snapchat app to capture moment.It has replaced default camera app (at least in cases where photography is not a priority but capture and sharing is)

But I always had one problem whenever I use snapchat , especially when My friends reply to snap i sent , there is a mini heart attack moment that internally built up a small carefulness n fear while using snapchat app. Here individually video call option is good , back button is good but the combination of them in with less spacing started causing a small fear while trying to use.

Problem Statement : Back Button & Video Call icons are very close, can cause accidental calling!

My Brainstorming Journey

Final Day V1 :

added a small text , “called n days ago” ! to final iteration for more authenticity

Final Day ( High fidelity prototype ) :

( the icons are taken from google image , so resolution is not so good)

Screen 1 : Merged New Icon

Screen 2 : Created a modal to Enable Video or Cancel Call

Pre Final Day ( Low fidelity prototype ) :

Link to test it : https://marvelapp.com/prototype/76eba3h

Day 3 : Understanding Existing Design

In existing design, there is a important learning that we should notice and not miss it while redesigning, that is taking user consent , i.e. user know that he is going to turn on the camera.

But in my idea 2 (which i am going with), the user does not specifically know that, the user might think of audio calling but it might turn to video call, which is not solving the root problem.

To solve this , if we ask user after click on call button , whether to turn on video or not , this will help user in two ways !

1. It will not miss the learning from existing design , which makes user take decision to audio or video call
2. It will serve as second step, to cancel the call in case of accidental click

Day 2 : Ideation

Idea 2 :

If we merge both the icons , the issue of spacing between back and call can be increased without any constraint of contact or location name.

Idea 1 :

If we increase the space between call buttons group and back button, the issue will solve with very simple implementation.

❓: but it has a problem too , if the contact name saved by user is little or location name is little big , there will be issue

Day 1 :

Heuristics Principle : Error Prevention

Slips are unconscious errors caused by inattention.Slips occur when users intend to perform one action, but end up doing another (often similar) action.

My Journey Supporters :

1) How realistic is this problem?

Once I identified the problem,I asked friends who regularly use snapchat, and also few colleagues in office, though my cohort of questioning is small, 6 out of 11 people has given this happened at least once to them and out of 6, 4 are generally does not use gesture, other 2 shifted to gesture after similar incident.

2) Real Life Scenario of Problem :

Let us assume , we are in a class in college , you have sent a snap to all your friends and one among them started to reply , you have replied and want to go back to home screen , accidentally started a video call. Its a high pressure moment (though it lasts for 1–2 secs before we cut the call ).

What are ways to go back to home screen ?

1. Click on Back Button , on top right of screen

2. Use Swipe Gesture from extreme end of right to left.

if we are generally a person who uses gestures or draws on keyboard instead of typing , this problem is not a big deal , but if we are a person who like to click instead , then this might be a problem especially when you are in hurry or careless situation (like in real life scenario above) try to click back button, which is closer to video call , this might open video call screen immediately.Another minor thing to consider is, this might disturb the other person as well , for a accidental click !

3) Target Audience :

So i wanted to know “who are the target audience for snapchat?” so i can validate the problem well , understand the problem user might go through with some study!

Most of the snapchat users are Gen-Z’s , and the usage of snapchat is different in different age cohorts and the real life scenarios will be different, the usage of phones in colleges or some other places has increased comparatively.

Interestingly psychology says, embarrassment at this cohort age is high!

Why So Sensitive? Adolescence and Embarrassment

Here is an interesting image from Hootsuite

Here is an informative FAQ from snapchat business website :

Reference Links :

1. https://blog.hootsuite.com/snapchat-demographics/
2. https://forbusiness.snapchat.com/advertising/targeting

4) Previous Snapchat Design :

While I am researching about existing snapchat design , I happened to check initial designs of snapchat video call as well , this helped me understand how far design came in aesthetic.

Reference Link : https://filmora.wondershare.com/mobile-editing-tips/how-to-video-chat-call-on-snapchat.html

Learnings :

1. Recalled all heuristic learnings once before identifying the exact principle.
2. Learnt the target audience and design application accordingly
3. Learnt that existing design makes many things clear to proceed , even past designs play role in making us understand remaining user problems that they solved in each version.
4. Understood that the change might be small or big , the possibility of error is always there !

All the images , gifs are taken from google , thanks for original creators.

Thank you !
I hope this post find insightful , please do connect with me on Linkedin and view my portfolio

Website : https://www.sandeepmachiraju.com/

LinkedIn : https://www.linkedin.com/in/machirajusaisandeep/

One of my favourite game in childhood is Duck Hunt ,The most interesting part is this game involves product design and User Interface Design which is why i chose it for my design case study

And also I used to get good score by holding the wired gun and point exactly at bird on screen and shoot it.Every 90’s kid knows this very famous game.That feel of holding gun and shooting at that age feels more like James Bond that too without text “These stunts are performed by trained professionals, don’t try this at home”

We should really appreciate them who came up with such a good design in beginning stages of gaming industry or Human Computer Interaction.This article also will serve as throwback of design for us and how far we came.

What is Duck Hunt Game ?

🦆 Duck Hunt: The Original First-Person Shooter.

Duck Hunt was a video game released by Nintendo in 1984, which used the new Light Gun shooter called the NES Zapper.The first thing is it had a real cartoony effect to it and felt like you were engaging with an actual cartoon show.

Game Play :

This game involves having three shots to hit ducks that appear one or two at a time and fly at various speeds. Duck Hunt would become one of the best-selling video games of all time.

The story begins with “Dog” (the only name they ever called him in real life) leaping into the grass to frighten the ducks. A duck was subject to three shots from you, and if you missed them all and it managed to flee, it was considered a miss.

When ten ducks had been shot or missed, the round would be over. Each successful shot would go on the board as a red kill shot, and you had to meet a required score to move on to the next round.

They also offered three variations of the ducks and allotted different points to them

• Green Headed Black Duck
• Brown Ducks
• Blue Ducks

Duck Hunt was great because there was no set pattern and the ducks would always fly in random patterns so you never knew what would happen.

Great Score Cheat 😉 : If you cheated like me, you would get right up against the screen and shoot them just as they rose from the grass.

Target Audience :

The target audience for this game are generally kids from age 10 years to 16 years, but this game was widely played by all other ages as well.Basically we can say that as its good design made not only users of their target segment but also others.

What is in Duck Hunt Design ?

I was really fascinated with duck hunts design , i think i played that game when i was 10 years old, but still i remember the game ! Not only me , many of the readers might also connect immediately seeing the image.

1. Game Start Screen :

There is delightful opening music and a sizable logo that confirms that you are playing the right game on the first screen. When browsing through the 1001 Games cassette at that period, there is a chance that a careless click of the remote would land you in a different game. When I first began to play, I recall that we were supposed to go to the TV and make changes using the TV’s selection of buttons.

Next we have Game A,B,C a menu (which does not look like modern ones though) it gives us different options , 1 Duck is nothing but single player , 2 Ducks means multiplayer , Clay shooting is another game it self , which is kind of training the game.

These three options might have played major role in setting this perspective in our brain and also in gaming industry, because,If we compare with modern game like Battle Grounds Mobile India (or PUBG) , even in that it has these options right ! single player , where we can go and play with others , multiplayer for playing with friends and training to get to know game more and utilise them in real plays.

Next we have Top Score text , that helps us stay motivated through out the play to make us not quit by playing level by level.

2. Game Play :

The Action : Gun , Aim & Shoot :
The fun part of entire game is to hold gun and shoot at the bird , that is primary selling point of game where we as kids enjoyed just by holding it! Even when gun is not turned on, we would point that to other kids and make sounds with mouth to indicate we had a shot.The gun is exact replica of gun we see , as a kid we would be mostly seeing guns initially in movies or animation cartoon series and easily relate it. Somewhere i heard guns , cars are most selling toys.

The gun is connected to controller with wire , where it records trigger of that gun , lets controller know ! But once we shoot , it will have a white box around the duck and flashes screen for a while with gun shot sound.

The duck has funny face with eyes popped out , which makes us feel we really shot something , Hurray! we aimed it correct , which in turn will be motivating us to complete whatever next task is on the screen.

If you want to know science behind how gun works :

https://www.thrillist.com/news/nation/how-does-the-duck-hunt-gun-work-nintendo

The Score : At Instant , Always

When we shoot the duck with gun , duck will fall on ground back! but how would we know what type of duck ( among 3 types as above mentioned) we shot ?

Two differentiation factors are definitely colour of ducks but we wont be calculating score till next duck appears on screen and i think that is bad UX as well, so i guess they put that on shooting duck if we immediately get feedback with some score on top of duck , we will be instantaneously understanding the score ! we can even compete with other player in multi player per each duck shooting with that scores.

Once duck is fallen on ground , the dog will collect it with a smile and duck with angry face , that is one of the delight moment , especially when you are kid.

Incase if we miss the shot ,

The sky will become peach colour and with text fly away ! and also dog makes a humiliating laugh. Where as a kid we do want to prove that wrong by taking perfect shots in upcoming ones.

Steps that make us confirm we hit duck :

1. White box and Screen Flash with Gun Sound
2. Funny Duck face with eyes popped out
3. Next will be , The duck falling down on ground with score on it
4. The Dog will be holding the duck once it fells on ground !

Game/Level End Screen:

Once every round completes , plan screen with message perfect with level completion score is shown !

All Screen Shots Credits goes to this video :
https://www.youtube.com/watch?v=J3sfsP9W048&feature=youtu.be

Thank you !
I hope this post find insightful , please do connect with me on Linkedin and view my portfolio

Website : https://www.sandeepmachiraju.com/

LinkedIn : https://www.linkedin.com/in/machirajusaisandeep/

It hit me suddenly that Google Maps (or any maps app) and Figma(or kind of apps) are interlinked and in deep down they belong to same design thinking.

Back Story :

After preparing slides in figma for a YouTube video on MRK Tutorials, I was in a cab headed to my friend’s place suddenly I realised there was a connection between two app ideas.

Later that night, while we planned our trip, we used Google Maps by pinching, zooming, and panning to find the location I wanted to go.As I did so, I began to wonder what people would have done in the times before computers, especially during times of war and strategy.

On a surface level, this will serve as a design case study for figma and Google Maps. By the way, Google Maps is the most used app for me, and Figma is the most used website.

Remember those days , when we used to find locations backside of Dairy or when we used to get good marks for map pointing in social studies ? where did battle of waterloo happened? how we used to do it ? how do we remember them ? lets go back and think for a while.

That certainly didn’t stop me from continuing.I went through House of Dragons, Bahubali, Mahabhartam, and Game of Thrones in that deliberate way, using all movie references. After watching various archaeology documentaries and debating myself whether or not to believe movie references because they can occasionally be exaggerated, I realised that while what we do is always the same, the setting in which we do things differs.

Here we could breakdown this entire design thinking basis on 2 parts :

1. How to use Maps?
2. How to create Maps?

Part 1 : (Based on) How to use Maps?

After the growing adoption of cab applications like Ola, Uber, and Rapido, Google Maps became one of the most popular and widely used apps. (This applies to all mapping apps, it’s not just Google Maps.) Basically, the only reason we use maps is to find our desired location. It should be simple to use, much like asking a friend or neighbour for directions.

What actions we can do in google maps ?

1. Search
2. Zoom In / Out
3. Panning
4. Mark the location
5. Check Distance between locations

and lot more … lets understand above ones clearly with design thinking individually.

as if we discuss everything here it will be different case study itself. which i wanted to do later on.

So how we used to do before ( computer age ) :

If it is local level , we would go to people who are from same neighbourhood and ask for location based on its name or place in and around. — this is basically what modern search bar does.

If it is global level or some where new to use , we would go to library or somewhere or globes, where printed maps are available , move eyes across the map and by first identifying which is nearby , and by word we match it , decide whether it is correct or not based on other inputs like surrounding places etc.- this is what we do panning in modern maps app.

if it is sophisticated maps , where on using magnifying glass we could find little more deeper places like village names , lakes or waterfalls which r relatively less known.In some maps there will be even roadways and highways highlighted as well with distances . — this is how we zoom and find distances in app.

If we want to find two locations , we go through above processes to find first one and mark or draw star for one location with pencil , then we find second one through process and mark second , draw a line to connect them , this will help to understand the number of adjoining locations from source to destination points. Based on distances ( in some maps above point has it) we could estimate time and distance between points. — these are marking locations , finding distance and adding stop points.

So basically what ever actions we thought of in google maps above , search, zoom , panning , marking , check distance etc are done before physically by us right .

Part 2 : (Based on) How to create Maps?

One of the most popular apps for creating stunning user interfaces is Figma. It is also often used to create social network posts and YouTube thumbnails. I’m mentioning figma since I use it frequently, but this isn’t just about figma. it’s also about other apps that share the same design thinking.

What actions we can do in google maps ?

1. Draw Shapes (or Frames or Sections) ( on broader level they can be considered same )
2. Draw Curves
3. Write Text
4. Zoom In / Out
5. Panning

and lot more … lets understand above ones clearly with design thinking individually.

So how we used to do before ( computer age ) :

We used to draw on paper to explain to express our ideas , some times it will take multiple rough diagrams and explorations to get to the original one.

But since we are in context of maps ,lets assume we are the person who created first map ( in historical period).

Lets think for a while , put ourselves in the shoes.

I would have roam around , known place names and written all information in notes, understand the boundaries through may be hills or bigger entities like trees , may be even through religious monuments , or by person who is famous in that reason.

I would have used shapes, curves to draw the portions of location and connect them one by one.

label them by writing names for more easy remembrance.

Later on , the number of places increased , the use case of map would have increased , so i use bigger sheets to draw map or attach and extend them , so basically i will be panning through the map from this end to that end to connect them fully .

Later on , the king might have ordered us to map location more accurately ( may be for better war strategy) , the specificity of per location had to be increased , so then we might have used magnifying glass to draw or write very small micro portions in map and name them . which is nothing but zooming.

and if we are designing app or slides or anything in figma , we generally do all these above actions right!

Final words : This had been wonderful writing experience and brainstorming for me to breakdown design thinking and connect maps and figma that were connecting in my thoughts.

I chose Mosquito Racket as part of understanding design of every day things.Why? because it is simple, yet powerful and one of most useful product that became instant hit in every house hold

I know , its very simple design and also first line even puts smile why to even analyse it , but

there is lot of research on such small designs that helps both users and also manufacturers.

It is written in website of T.Works by Telangana government in their article : Electric Mosquito Racket Teardown — T-Works

“The physical design appears structurally robust and will likely survive small drops and impacts.The design also appears to be heavily optimised to reduce manufacturing costs for every component.” — this lines made me think further on what is that makes difference.

What is Mosquito Racket?

A tool called a “Mosquito Racket” is used to kill mosquitoes by shorting the circuit and electrocuting the bug when it is caught between the metal grid.

In tropical nations like India, where mosquitoes are a nuisance and the source of deadly diseases like malaria and dengue, the device is incredibly well-used.

The racket provides an efficient substitute for other mosquito repelling/killing methods because it doesn’t use dangerous chemicals, doesn’t demand pricey refills, doesn’t emit smoke or odours, and makes sure the insect is dead.

Why should it be as Racket only ?

It can be any of shape from broom stick , cricket bat , or like book or even like tongs with two hands ! right , but it is designed like racket.The one who designed this might have gone through this all phase.He must have drawn many rough diagrams which makes no sense to sense. Think for a while !

This type of questioning we used to have from childhood, but might have lost that during school n college in rat race, but this got again brought back by UX Anudeep sir ‘s No Text way of learning , Kick Starter Workshop i have attended last week.

Deep Dive

Lets tear down this Mosquito Racket by Hit in the images below.We can see the user experience design in everyday things more clearly.I will be going from bottom to top , the numbering was given in images below.

The instruction guide paper that comes with every product is a UX Design guide.

Charging Dock : Here two things that makes this section more useful , one is placement of it and other is hiding it when not in use.
a) Placement : If we observe clearly , the charging Dock is at bottom of racket , why not at middle ? so that the racket can be inversely inserted into socket. As most of the sockets present in houses are little above the mid line of wall.
b) Hiding : This charging dock can be hid when not in use , so that when we catch it , it wont unnecessarily poke to hand.

Hand grip : This racquet is used by not only by bigger ones also kids, the hand grip helps to bind firmly to hand even if we wave with high velocity.

Switch : The switch here performs its action on swipe up-down gesture with thumb , so that once we hold the grip of bat , the thumb will be only movable part of palm , and it can perform action , this is used for off , on and even turning on flash light , with ease.

Press Hold Release Button : This button helps to save charge when there is not in use by just releasing the hold , since we are not sure when mosquitos will be flying near us , this kind of button along with switch , one below other on same side is also a User Experience design!

Small Red Dot(LED) Lights :Among two LEDs ,The one that is near to mess is on / off light , the one near to charging dock is indicator of charging on inserting in socket.

Flash Light : This is one of the common problem solver, where in mosquitos attack entire night , at nights instead of user turning on all lights , he could just swipe up and wave to kill.This looks small but this is the major selling point and product differentiator

Mess : This is the real product , that performs action on mosquitos, it is netted so, it can let air flow and avoid air resistance, which can make heavy and make not much reusable the plastic separators helps to separate nets even in high hand wave.
This can even cause trouble for humans , so recently the material used for making it are changed to only attack mosquitoes.
The traditional look of racket , makes user already know that this is to be used this way , but even if it is not so , the one that hand can fit is only hand grip.

Thanks for the read !
Please do follow for more such case studies on Design of everyday things.