Strategic Role Of Designing Mobile-first Experience Design

Strategic Role Of Designing Mobile-first Experience Design

Mobile-first Design

Hi, I am going to share my experience on designing for mobile-first and its strategic role in user experience design. What is mobile-first design? One of the strategies is responsive design. However, before we dig into responsive design, the mobile-first design approach is to design from smaller screens to bigger screens. By starting from smaller screens, at least gives you an idea of how customers land on the landing pages from various devices.

Even though it is harder to get the right approach for mobile-first design, it saves time on developing for multiple screens and testing. If you run an online shop or online services, this mobile-first design approach will quickly collect the results for your marketing strategies and understand what is doing well and bad for your user experience. And, when it comes to UX, how are we going to design for mobile-first? First, when do we need a mobile-first design? Let me share your pros and cons with figures. Nearly 7 million users are using mobiles including smartphones. And mobile devices account for 53% of paid ad clicks.


The paid ad is which advertisers pay for search engines, such as Google and Bing, for their advertisements. And paid search click is when users click on your ads on the search results. What does it mean to mobile-first design? Nearly half portion of users is good with ads. Imagine if they click on the ad, they eventually go to the landing page. And it turns out that the landing page is not user-friendly, what will happen is users will move on. That is pretty bad for your media buying and conversion rates. Now, we are quite confident with a mobile-first design. Then, what are the main reasons for low conversions Lack product details, difficult navigation, quick decision making, difficulty in input details?

If we reverse for higher conversion rates, what will be the reasons for higher conversions? Easy navigation, quick loading time, and smooth user experience plus post-click experience. All of these reasons can be resolved with the UX approach. Easy navigation often refers to the intuitive user experience. And the intuitive user experience, in this case, is an intuitive mobile experience. An intuitive mobile user experience is when users find the site quite familiar and easy to use the services you provide with. It has zero time on thinking about what this call-to-action button means and what it would happen when clicking on this CTA button.


Then what are some of the things we need for easy navigation? I am going to draw a simple user journey on my sketchbook. This is our lovely user. Then what is happening is The user will use different devices to access or search something. What I mean is that, once they click on one of those paid ads from the devices, they will land on the pages. Once they land on the pages, they start to do different things. At the end of the journey, they will check out. That’s pretty much of our journey. Very simple. But it has a lot of activities in between*. For example, we have activities like ‘browse interesting products.

So, how are these pages going to communicate? We can see it from here. When a user comes from a medium and finally checks out, that person needs to browse a lot of products, go shopping, read reviews, and compare. So, it [the journey] requires a lot of steps in between before the person checks out. [Question: Then, what does the user flow look like?] If we quickly draw a user flow. Let’s say, We come from a site That has some sales messages. And below that, It has a title and features some products That the user would be interested in. And below that, It will have a CTA button, Another CTA button here, And another CTA button right here.


And below that, We can add as much as we want to. The website layout depends on what you are looking for. What I am trying to say here is, That when we go back to the journey at the beginning before they land on this page. They start it from the paid ad [see where the arrow points to], They land on the page and see different things with the devices they use. What’s happening is, Once they find the product interesting, they will click on that which will link to another page. Even though it is a small or very simple user flow, It is very key to direct or lead the users to see, like, say, You come here for shopping. That is what you are going to do. You click on the CTA. You land on the page.

And you add it to the cart. Normally if you are a user, you will log in. But if not, you will either go to the guest checkout or create a new account. [This example is for demonstration only.] What I am trying to demonstrate here is That it has 3 different ways. 1) if the user goes to the guest checkout, Obviously, it [the website] is going to ask for payment information on the payment page. 2) if a user is going to log in, What kind of webpage will it be? 3) also, if they are going to create an account, What will happen after creating an account is you possibly go to this page. So this is kind of the thing when a user comes from this page to this page.

Encounter Errors

User does these activities [I mean the journey.] Instead of going around the places, and eventually people exit from here. Because they just don’t like it. Or people just click on some other stuff on your landing page. If your landing page is not clear, it will go to some other areas which means it would never go to the checkout page. [Drawing on the sketch book] This is our final step. Another thing I’d like to highlight here is Mobile users are not very patient. [in this case, we are talking about mobile-first design.] If the flow of your design has some errors, let’s say users have high chances to encounter errors, in one video,

I talked about how to design for errors. From my point of view, even though the flow is simple, it gives you an idea of how you are going to design and make sure the user completes a simple task. Apart from navigation, what are the ideal customer journey and user experience would you like to deliver for your customers? [Back to sketch book] We are going back to the beginning of the journey. There are several questions we can ask. If people want to buy something and go in a rush, they will either make sure to buy it in the future, like ‘I am interested in it and want to buy it later, or just buy it on the train.

service Performs

Because the screen is getting smaller. The functions are getting limited. What information do you think is better for users to know with a simple design layout? Like I said before, they open the sites on the train with a phone. What information is quite critical for success? So these are the things we need to consider before moving to the user flow. Because these are some key things we think like designers. [Question: What if the mobile-first design does not work?] When your service is not mobile-ready, the mobile-first design strategy is not going to work. But it at least gives an insight into how well your service performs on mobile.

So, it would be good to test and make your products more competitive. [Question: What other best UX practice for landing page optimization?] 1) Visuals: human vs product In eCommerce, product images are quite important For customers to decide if they want to make the purchases. The idea is to recreate the experience when a customer walks into a shop and tries different products. When customers go through those sales landing pages they expect to have a similar experience in the store. By showcasing those product photos on sales landing pages, they at least give customers views on what you are trying to sell.

 UX Products

What kind of images do I usually put on the websites? It depends. Here are some examples. When it comes to cosmetic products, including a human model with the product, visually provides an example of how it looks on you. You may think it is not relevant to UX, while it is the detail that customers, your users, mainly focus on. Also, from my online shopping experience, it does not tell much when it only shows the lipstick colors or foundation colors. Why? It is a bit hard to imagine if that color works on me. If I am struggling, I am pretty sure others are struggling as well. One thing I also want to highlight here is oversized photos.

In general, it is common to see websites use high-res images. A 1-second delay in the page results in a 7% reduction in conversions. Images are good to be kept less than 20kb. 2) Copy Headline and sub-headlines always reflect on what this sales landing page talks about. A sales landing page is not to connect and collect leads from customers or visitors but sell products to customers. By optimizing headlines and sub-headlines, customers know what products they should purchase. The copy on the CTA button needs to be sharp and actioned. For instance, when designing for sales landing pages, We are not using ‘learn more’ (in CTA), Because we want to make sure the Call-To-Action [CTA] buttons to be sharp and actioned.

Optimizing Headlines

It would be good to say ‘shop now’ to make the visitors feel that ‘I need to shop now’ instead of ‘I might be interested to learn more (and that’s it). 3) Above the fold When I refer to the idea of ‘above the fold’, I literally talk about the chances of having visitors stay without scrolling at the first portion of the landing pages. Same as a traditional print business, the very first piece of content outlines where the opportunities are. There are many ways to design and display the contents above the fold, while I find the core elements often are call-to-action buttons, catchy messages, and visual materials. When designing for higher click-through/conversion rates,

Those core elements play key roles in convincing the visitors as well as presenting the services. Back to my story, I mentioned my experience on mobile. I also briefly touched on how my journey began with. It clearly illustrates the importance of having the right message and a sharp Call-To-Action button. [Question: What else?] 4) Seamless experience One last thing I want to talk about is there are many ways to optimize websites by using different methods. While seamless experience can easily help you identify where customers are and collect feedback as quickly as possible for your future business improvements.


If users use desktops to go to your site, shop, and check out the services, that means one linear customer journey. But what if users come from tablets or mobile, Those would be different touchpoints that help users engage with the services. By considering every single touchpoint, It gives us an idea of how to design for our users. With that kind of experience, Users can check our services from different devices. In this video, I share my experience with a mobile-first design. See you around! Do not forget to like, share, and subscribe to my youtube channel! Thank you! [Topic next month: Collaboration]


Leave a Reply

Your email address will not be published. Required fields are marked *