UI/UX Case Study: Adapting an app design for Android & iOS

Context: The high fidelity design part (UI) of this application was created by me and Hitesh. After creating the high-fidelity designs for this app, My mentor Abhishek (Design Head, ColoredCow) asked me to go one step further by converting these designs into HIG & Material guideline-specific designs.

I won’t go into much detail on the process of designing this app. Long story short, we got a problem statement and a user group (farmers of age 18 and above). So we went through the process of user research, ideation, wireframing, and creating high-fidelity designs.

Some final screens

So let’s go on the journey of understanding the differences between both iOS and Android design guidelines and implementing those in our application.

I have studied both Human interaction Guidelines (HIG) and Material design systems before. In simple words, HIG focuses on flat, simple, and light design whereas Material embraces lively, intentional, animating, and flexible designs. Before implementing these two, I had to study them even deeper.

Implementation in popular applications: Before studying theory and a plethora of data, I wanted to see if these kinds of conversions are worth it. If it does, what does it look like? So I went to Mobbin to study iOS and Android versions of some popular applications (Eg: Instagram, Twitter, Spotify). Here are some important design differences I found:

• Navigation
• Alignment of titles, subtitles
• Any input field or button (Padding, Size, Corner Radius)
• iOS uses text for navigation instead of icons
• Different font styles for the same type of element
• Margin, column, & gutter differences

I could see the differences clearly. So I went ahead and started learning about the two design systems. I won’t describe it here, instead of me copy-pasting, you can go to the official sites of HIG & Material design systems to learn it in depth. Here, I’m going to describe the learnings I applied to the application.

Official pages of HIG & Material

• Screen Size: While researching what screen size to design for so that my design can cover all the screens, I got to know some key points: For India, currently most common screen ratio is 360*800px with a ratio of 16:9 (source). For android, the top 5 best-selling phones have a screen ratio of 20:9. For iPhone, a large group of users uses the 375*812pt screen size (1pt = 1.33px). So I started accordingly. I planned to create the 360*800px version for Android and a 375*812pt version for iOS.
• Layout Grid: A layout grid is something that defines the structure of the screen. It can be in form of columns, rows, or a combination of both. Most designers and design systems use the column form of layout grids. While researching the layout grids, I came to a conclusion: In HIG, there is no use of grids and the side margin is 16px from each side. In Material, the grid has four columns with 16px of gutter and 16px of margin from each side.

Screen sizes for iOS and Android with their layout guidelines

• Typography: In terms of typography, both design systems have their own guidelines. One thing that sets their standard on the same level is the use of DYNAMIC TYPE fonts. Dynamic fonts change their weight based on the system settings. In simple words, static fonts have a defined set of font styles (Thin, normal, bold, etc.) whereas dynamic fonts respond to the weight input and change their properties accordingly. The default typeface used in HIG is SF Pro and in Material, it is Roboto. The design system also provides a detailed description of all the font sizes (Eg: Font size, line height, letter spacing, etc.).

Typography Guidelines

There’s no compulsion of using the system typeface for your project, but in this project, I’ve used the same typefaces used in the respective design systems.

The typography used in the application

Navigation: Navigation is an important part of the user experience. The HIG and Material design systems have clearly different navigation styles and in my opinion, they both work perfectly well. As you can see in the navigation components shown below, HIG uses text as navigation buttons so much more than Material whereas, in Material, the use of icons for navigation is applied a lot more than in HIG. (We can’t say which one works better than the other because both work and both of them are loved.)

Navigation differences in both design systems

• Components: When it comes to differentiating between HIG and Material design patterns, the components play a major role. The material design just revamped its design system. In this design system, most of the components are changed. The new system is named “Material 3”. HIG brings small changes to its design system with every update of its OS. So based on the measures and standards provided in both design systems, I created all the needed elements for the HIG and Material Version. Here’s a list of elements created for both versions:

Components used in the iOS version of the application

Components used in the Android version of the application

Conclusion: After all the learning and implementations, here are some of the outcomes we produced.

This journey taught me a lot. Pioneers, rivals, or whatever you can say but these two systems are competing and learning from each other to provide a better user experience. I think designers should have a thorough knowledge of at least these two design systems so that they can create a phenomenal experience for their users by using or breaking these design rules.

Peace!