My Designer Hubby - FedEx Logo

Is Responsive Design the Answer to Mobile Design?

Mobile design has come a long way. It all started with native apps, then came an era of hybrid apps, then designers went crazy for mobile web (creation of mobile version of websites).

Lately, designers and developers are beating the drum for “Responsive Design.”

At least for now, responsive design appears to be a silver bullet to address all the design issues pertaining to various screen sizes – it is very promising. Responsive design works on the philosophy of: “design once and for all.” Meaning, there is no need to maintain multiple sites, which helps decreasing the development costs. The site – with a single url – renders itself differently on different devices by analyzing the query type using flexible grids, layouts.

So, is responsive design truly the solution to all problems? Most of the posts and blogs indicate that it really depends on user’s context than anything else. Some companies are creating a mash-up of both mobile and regular sites.

eSurance realized that their mobile users had different content needs than desktop users. For example, the mobile users needed contact and policy information handy in case of an accident. On the other hand, desktop users don’t really care for this kind of information. Therefore, they had to create two different sites. Responsive design didn't work for them.

In conclusion, there is no shortcut to identify whether a responsive site or two different sites – one for desktop and one for mobile users – are required. Therefore, as designers it’s our prerogative to go hard on user research to identify correct user scenarios and design accordingly.

Design Lessons - iPad Application for Supplemental Insurance Agents

Lately, I designed an iPad app for supplemental insurance agents for a global client based out of Chicago. Designing for mobile is always fun because of its connectivity and size constraints. Below are some of the design lessons from the insurance domain that I would like to share.

Supplemental Insurance Industry Context

• The retention rate for sales agents is very low, at least for this client. Every year 2000 new sales agents are recruited to maintain an average of 1300 agents on payroll.
• For effective selling, agent training is a significant part of the hiring process. Due to low retention rate, the training costs are pretty high.

Sales Agent Usage Context

• Uses heavy paper binders for references on medications, sickness, product related brochures, during sales process
• Spends significant time prospecting – customer conversion rate is less than 10%
• Services customers in various locations; therefore, internet connectivity on iPad cannot be taken for granted
• Works with both office and residential customers
• Works at variety of locations: parks, coffee shops, fairs, homes, offices, inside the car, etc.

Design Considerations

• Design for portrait mode (default) to accommodate more content (long forms, brochures, etc.).

• Divide the content (long forms) in multiple sections and sub sections with expand and collapse functionality  For e.g. create a master section with expand/collapse functionality and create nested sub-sections with their own expand/collapse controls.

• Use lookups with both alphabetical (A -> Z) navigation and search capabilities to reduce errors. List of medications and health conditions can be pretty long; their names are confusing and homo-phonic.

• Reduce key strokes wherever possible, typing on iPad is not very user friendly. For e.g. Carry over the information that’s already entered in the form; e.g. names, addresses, etc.

• Use wizards, wherever possible, to ensure 100% form completion and reduce training costs. Do not create a linear wizard; instead, allow the agent to hop back and forth between various steps – sales process is highly dynamic and unpredictable. A customer may demand an agent to show something from a step which may not be the next.

• Allow the agent to save incomplete forms for future use. Sometimes prospect takes couple of days before making the final decision to pay for the insurance.

• Make the forms editable as long as they are not submitted to the system for final processing.

• Create effortless payment steps. Customers could use different payment methods or multiple payors for same or different policies – consider edge case scenarios.

• Create an easy to read and sign payment summary screen. Customers like to read the application summary before approval.

•  Create large area for signatures with a finger on touchscreen

• Provide clear directions on every step if the agent needs to switch to paper for some reason

• Use two or three column layouts for side-by-side comparison of rates and policies.

• Agents need to know – just in time – if the customer doesn't qualify for insurance. The disqualification cue on the UI has to be subtle enough to not catch the customer’s eye.  Disqualification from one insurance type doesn't disqualify the customer from other insurances. Therefore, customer relationship, even with a disqualified customer, is really important – he can always refer the agent to his friends and family.

Of course, every project is unique and brings its own set of problems and challenges. Irrespective, we should try to leverage device or OS’s guidelines and patterns as much as possible for better user adoption.

Human Factors – Bed Time Reading on iPad

51% of iPad use is in bed or in front of the TV – according to Neilsen. 61% percent of eReader owners use their device in bed, compared with 57% of tablet owners and 51% of smartphone owners. Sorry, I don’t have the new numbers.

Some people are trying to solve the problem – to read effectively on iPad in bed – by creating plethora of kitschy products.

That’s why as designers, it’s very important for us to understand the context of use to create user friendly applications.

I use my iPad primarily during the bed time to read news and books. In bed, when I read on iPad, lying straight on my back, my viewing area or (scanning area) becomes almost half of the iPad screen length.

Unless I am using lot of pillows (in bed) to elevate my head from the rest of my body, it’s really difficult to view the whole iPad screen easily. Of course, I can hold the iPad slightly higher to make it easier for my eyes to scan the whole screen; however, its weight adds a lot of stress on my arms if continued for a long duration.

It’s incumbent upon us as designers to recognize this problem and provide better design solutions. Let’s not get into product design here; the easy fix is to first recognize the reduced screen scan area during lying on back and design for it.

For the same reason, browser based sites with long scrolls work like a charm for me - when I reach the middle of the page, instead of lifting my head or iPad up to read the bottom half of the screen, I just swipe the page up and bring the new content to the top half. On the other hand, reader applications like “Kindle” do not work in this scenario – at all, and cause lot of annoyance and frustration. Every time I reach the middle of the page, I am forced to lift the iPad screen or my head to view the content in the bottom half.

One solution could be around creating long scrolling pages instead of using paginations. Or provide the user an option to switch between long scroll and pagination based on his context.

I am sure some of you are also facing the same problem. But, we cannot just leave the problem for others to solve for us. We are the problem solvers, we are the designers.