May 2, 2012 - Comments Off on Mobile “Toy Filter” UI Design process

Mobile “Toy Filter” UI Design process

I know I'm not the only one who does UI design this way:

  • Sticky notes.
  • A white board.
  • A programmer.

I draw the UI bits on sticky notes, we discuss the needs and potential problems, and move the sticky notes around on a board.

something's added to the cart!

Below is our existing "Toy Filter" laid out for the new mobile template for our e-commerce toy store system. It's a reskinning of existing code, with no new features (a requirement of getting the mobile site built and pushed to 200+ sites quickly). At the top is the 'Search' icon; Shopper's 'Cart' contents (number of products and dollar amount); 'Checkout' icon.

drop-down filter for mobile e-com toy search

When you tap the Search icon, a search box slides out, with options to refine your search and display the results. I think it's more usable than the layout we have on the desktop sites (which I didn't design).

  • Search Box
  • Filter by: Category, Brand, Price
  • Sort by: (Name, Price, etc)
  • FIND TOYS button.

We ended up with four pages with sticky notes laid out, one each for the Homepage, category Browse Page, Product Details page, and Checkout. I asked the programmer if he wanted me to mock them up in Balsamiq, and he said, "No, I've got it all right here."

 

Published by: Philip Williamson in UX/UI

Comments are closed.