What do you do when your client, the largest cigar retailer on the planet, asks you to replace their old SKU system with a fully responsive web app that lets anyone order tens of thousands of dollars worth of freight instantly from their iPhone 5?
And it has to work for everyone from individual store owners to multi-territory reps? And these reps may need to instantly change stores and place distinct orders that count towards independent fulfillment goals?
And they can’t do the vulcan mind meld with their phone so this has to visually make sense and not give them a migraine?
Well, you take a deep breath, make some coffee, then sit down with half a dozen programmers and crank that bad boy out.
2. Brands List
3. Brand Inventory
4. Inventory Alt View
5. Inventory Alt Multiple Selected
6. Item Detail
I’m really proud of this one. It quickly became apparent that bulk-ordering dozens or even hundreds of cigars in different pallet/box sizes from your mobile phone could turn into a nightmare. You'd have to individually select each product separately, go to the detail page, and manually place each individual box-size order. Ain’t nobody got time for that!
To work around this issue, I created an optional second list layout for bulk ordering that the user could toggle at will. Now, if they knew what they wanted, they could check an item, select package type and amount, repeat for each item they wanted to buy, and then add all of them to the cart.
So if they wanted to get more detail on a new cigar they hadn’t seen before, they could switch back to detail mode, drill down to the detail view, and purchase it that way.
Too often I think designers get hung up on making the MOST efficient design with absolutely ZERO redundancy that fulfills EVERY need with ZERO nuance. But people don’t work that way. We need systems that account for minor differences in behavior and that let us do the same thing in different ways depending on our needs. As long as the interface clearly conveys what your options are, I’m a big believer in giving the user multiple ways to hit the same nail on the head.
The 360 program was tricky, especially since the existing Altadis 360 system we were working off of had zero graphical elements for this feature. We had to figure out how to illustrate it clearly for newcomers.
Basically, if you’re a territory manager, you can receive fulfillment rewards for ordering certain items in certain combinations every month.
But it gets complicated…
The manager has to check off different order combinations, and those combinations might require purchasing a certain quantity, specific item brand, or both. Some SKUs require purchasing one or more of several different items. Some require you to purchase every type of item but it doesn’t matter how many you buy.
PLUS, you have to also hit a monthly spending goal that’s independent of your fulfillment quota. It got really tricky really fast.
So to clear things up, I chunked out each of the SKU groups, made them clearly checked off when completed, and show how many more were left and how that counted towards your overall rewards.
Then, to make things really clear, I worked with the developers so that when a user taps an SKU, they are taken to a special product list of only the items pertaining to that SKU. No more navigating away and forgetting what you were supposed to buy.
At the end of the day, it was all about emboldening users to try new products and item combinations. By making the process as simple as possible from an interface as small as a mobile phone, we encouraged the user to go outside their comfort zone without pestering them. It’s all about positive reinforcement.
Early Connect 360 mockup Originally, I wanted to put way more information and purchasing options in the main view. It quickly became apparent, however, that the item lists for each SKU would be way too big to represent all at once on a single page. So we removed the item details and linked the user to a custom product list for each SKU. We had to adjust our designs and functionality several times as the client explained our scope to us, and I’m really proud we managed to stay so close to our original intent while remaining flexible.
Landing page mockups The original territory rep user flow was to always ask the rep, upon logging in, whether they wanted to switch accounts to prevent double orders.
When I made this site, I decided it was the perfect time to learn CSS Grid. At the time of me writing this, 0ctober 2nd, 2018, CSS Grid only has partial support in IE 11.
Since I intend for this site to be an example of what I can do, and not a comprehensive commercial product, I’m ok with that sacrifice in usability, especially since signs point to IE11 eventually adopting full CSS Grid support.
So with that said, I’d recommend using a different browser, such as Microsoft Edge. If you got cursed by a witch or something and have to use IE, you can contact me at firstname.lastname@example.org or you can check out my
Linkedin, Dribbble, or Instagram.