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?

  • 3
    Hi Paul, welcome to UX.se! You can make you question better and get better feedback if you add some mockups/screen shots of your design and talk about any restrictions you might have on the mobile design. Platform restriction, format restriction, etc.
    – rk.
    Commented Apr 29, 2013 at 21:10

5 Answers 5


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

  • Good use of horizontal scroll :) Maybe also make them tiles swappable for side-by-side comparison.
    – rk.
    Commented Apr 29, 2013 at 20:55
  • 3
    -1 for relying on working memory for a comparison
    – uxzapper
    Commented Apr 30, 2013 at 2:10
  • @uxzapper, I think I covered that by offering a per-feature comparison pop-up window. Also, instead of offering critique, why don't you try to come up with a better idea? Commented Apr 30, 2013 at 5:59
  • He's right though. Just so the OP knows that this could be a stressor more so than a helper.
    – UXerUIer
    Commented Aug 26, 2014 at 15:26

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

I like it nice and lightweight for Mobile.


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!


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



download bmml source – Wireframes created with Balsamiq Mockups


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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.