Fluc Redesign

Miles
6 min readJul 10, 2015

--

So today we launched a really significant redesign of the Fluc website — the whole process took us a little under a month with our small team. We have literally had 100,000's of orders and gathered so much feedback from customers about what matters to them and what they love and hate about Fluc. From placing single orders all the way through to complex split the bill group orders — we really wanted to redesign the whole flow for our users.

We started by simplifying the home page. The only thing that matters to users when they first start out with any type of delivery is location. Ideally, this means that a user enters their full location — but a lot of users refuse to commit initially — so they enter their zipcode instead. Our homepage now has a big beautiful image and a simple location box:

Once we gather the location — we can show users available merchants around them that we can deliver. So knowing that critical peice of information allowed us to now really reimagine how users wanted the ordering flow to work.

Delivery Ordering Thought Process

Over time — we had a consistent problem with our product — and that was that we allowed a user to either schedule or order on-demand at the very end of the process. This pretty much meant you selected a restaurant, you picked your food items and finally at the end you picked a time to order (ASAP or some other time).

This was a huge problem.

If you’re ordering lunch and you don’t notice the restaurant is only open for dinner and you try to schedule for 12pm — you would get to the checkout page and hit:

“Sorry, you have items that can’t be ordered at that time”.

Yikes — disaster. Fail whale. Anger ensues.

Lots and lots of our user base constantly told us this was a real pain and asked us why had we constructed the user experience this way. They were right. It just didn’t make sense.

So in our latest design — we basically focused on TOA — our internal nickname. That is — To, On, At — which is really what every single user thinks about when they get delivery.

Once a user has entered their location and has the merchants rendered to them — the next logical step is On what day & At what time. If you’re ordering for ASAP — then thats whats preset for you as the default. But if you want to see what restaurants are open at 8pm tonight — or in a week at some other time — you just quickly change the time. We then dynamically render all restaurants available at that time.

What’s even cooler — we will also only show you the items available at that time too.

That’s right. Whats the point of showing you stuff that isn’t available for the time you select ? That’s a big problem across almost every food ordering platform or delivery site right now. The process is just so backwards.

We focused on removing everything we could that could cause a distraction.

You only care about what’s available relevant to your TOA. If you want to see what’s available at some other time — just pick a different date and time — and boom — Fluc will get that rendered. Of course, extracting all this information quickly isn’t simple — we have to consider our open times in each area we support and also the store times, day of week and many other factors. We had to come up some clever querying algorithms to hit our DB quickly and return to the user as fast as we could. Try it out.

Menu Pages

We started redesigning our menu pages from the way we ordered food internally. Using your product is a great way to figure out kinks. This started basically by getting the information that was most relevant up front — we consider this our Realtime ETA, Store Time & Maximum Order Limit — that's really all our users wanted to know.

After that — we inserted the ability to quickly create a Group Order — as thats a feature that many of our users love. And that's really all that is relevant to a user during the selection flow. The menu structure itself was redesigned with a left column for categories and a simple flat, clear and structured UI.

Clicking a Category scrolls you immediately to that part of the menu and clicking an item will open a easy ordering item selection dialog. Keeping this structure meant that the mobile ordering rendering was also a really straight forward coding process.

The UI for ordering on your phone is now clean and beautiful. It doesn’t change too much from the website and that means every user is confronted with a consistent experience that isn’t too crazy from the web one.

Opening an item and selecting your options is similar whether you are now on the web or on the phone.

We also only show the user relevant information when they order and this vastly simplifies the whole point of getting food delivered to you. So enjoy mobile ordering now! Whoot.

Checkout Simply

During the checkout process — the user really only cares about a few things. We concluded these are basically:

  1. Delivery Address
  2. Tip, Items & Total
  3. Payment
  4. Last Minute Notes (i.e. Our house is being remodelled! Go round the back)
  5. Delivery Time

Anything outside of this — is completely and utterly irrelevant.

So thats exactly what we went with. We feel our effort results in a clean, simple and beautiful interface that only shows the user what they need to see.

I won’t post the entire checkout page here — but the point was to keep it clean and simple & allow the user to flow into our live tracking & review experience easily. We stripped this down too to just show the basics.

You are rendered with a simple dialog that shows you the realtime ETA we dynamically calculate, the ability to share your order and we allow you to enter the realtime tracking system or get support.

Boom. Food is on the way!

Retrospection

There are so many other changes in the system that I can’t list everything here in this post. This redesign was long overdue and has been thought out not only for food — but for delivery in general (more news on that at another time).

The real question to ask is — what’s important to a user when they want to get something delivered ? That’s the process we have undertaken in our redesign and I couldn’t be more proud of our small team of engineers and designers (also our co-founders).

We love any feedback you can shoot us (hello@fluc.com) & we will work to improve the entire Fluc experience quickly and iron out any bugs.

Order Now — www.fluc.com

--

--