How we ensured success with a mobile first approach for a web application launch

How we ensured success with a mobile first approach for a web application launch

For years, the businesses have been using desktop websites as the primary view and then implementing the mobile version either as a second thought or as a reactive approach when things break on varying screen sizes.

An increasing trend has been to use a mobile first approach i.e. designing a website or portal primarily for mobile screens and letting it scale to larger desktop screens.

This decision also depends to a large extent on the target audience.

We at The Web Plant recently came across a very interesting scenario when a customer reached out to us for a an event collaboration platform to be built for parents where they can search for kids events & playdates and join the ones they are interested in. When we further analyzed the requirements and the current process, we realized that the primary audience of this online system is going to be moms of children aged between 0.5-6 years. Knowing the local demographics and usage trends, we already knew that close to 100% of the moms will access this portal from their phones. There are fairly good reason for this assumption:

  • Most moms are on the go with their busy schedules and tend to keep most activities information related to their kids on their phone for quick access
  • Most young parents these days don't even have a laptop at home and usually rely on their phones or tablets for casual browsing

It made complete sense to design not only as mobile first but as mobile-only portal. So we came up with a design that was exclusively for mobile screens. We tested the prototypes on various mobile screen sizes and adjusted the margins, typography and images+icons primarily for mobiles. If someone happens to access the portal on a larger screen like a laptop, they would see an expanded version of the same user interface. There are several advantages to this approach:

  • There is zero effort and money spent for a screen size that no one is going to use
  • The primary effort is spent on targeting a small range of screen sizes making it look much better than a standard responsive design
  • The user response to the design is extremely positive because everything is designed for a mobile screen

beebuddy1

beebuddy2

See a working demo of the application below:

 

Related Post

Creating Data-driven pages in HubSpot Content Hub
Tips and Tricks, HubSpot CMS

Creating Data-driven pages in HubSpot Content Hub

Many HubSpot users mistakenly believe that HubSpot CMS is unable to handle or display data driven pages due to its marketing focus. However, this is a misconception as HubSpot CMS is fully equipped to showcase structured data on pages with advanced...

Read More
Empower HubSpot Forms with Whatsapp Automation
Case Study, Tips and Tricks

Empower HubSpot Forms with Whatsapp Automation

Unlock the power of automated Whatsapp messages for your HubSpot forms and engage your audience like never before.

Read More
Web hooks in HubSpot Private Apps
Tips and Tricks, HubSpot CRM Integrations

Web hooks in HubSpot Private Apps

Up until recently, Web hooks were only available for public HubSpot Apps. HubSpot recently announced support for Web hooks in private apps as well. This may not seem like a big deal if you never had to use a private apps. However, the users of...

Read More