Displaying package comparisons for mobile?

Question

On my desktop website I have 3 packages listing all the features included for each package and their prices with an option to add to basket.

All packages are on the same page next to each other so its easy to view and compare against one another.

We are developing a separate mobile website, not responsive.

How would I go about laying this out on a mobile platform. Taking the above into consideration?

Answer 1

You could put them next to each other just like on the desktop version, but keep only one in view. Flipping to the left and right would allow switching between the packages and comparing the features. Be sure to clearly delineate each feature.

Additionally, it might be useful to be able to look at a comparison of a single feature across the three packages.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

I am having kind of the same issue right now and I decided on a approach like this:

• for bigger screens/desktops
• for mobile screens

I like it nice and lightweight for Mobile.

Answer 3

How are the packages set up? If you have some leverage in the product design of the packages, knowing that they'd be bought on a smartphone, then you could think about streamlining.

A good example of could be:

Package 1 | $30

• 4 Apples
• 1 Bunch bananas
• 1 Bunch grapes

Package 2 | $40

• Package 1 Plus:
• 4 pears
• Fruit wash

Package 3 | $45

• Package 2 Plus:
• Promotional fruit basket

We've been preaching mobile-first, content-first design, but now is it time to start thinking about mobile-first product and program design? I went through this working with a client with a very complex rewards program they wanted users to understand and use from a mobile device. We were eventually able to streamline the benefits and make it much more simple and clear to participate!

Answer 4

You could use a compare by feature/item view, where:

1. Each screen contains one package
2. You can navigate between packages by dragging screen left/right
3. You can see how each package measures in comparison to the others per feature/item, via an icon
4. You can hide/reveal features/items that are/aren't important to you
5. You can reorder features/items according to your preference by dragging up/down
6. you can see a summary per item of the costs and the score (of non-hidden features/items)
7. Similar items in different packages should be considered as different values of the same feature, to enable comparison

E.g.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 5

How about showing one feature across all 3 packages at a time, let the user hit like button on one of these and keep going. Finally summarize the likes - package more likes win!