Product update: What great UI design looks like

Amanda Kavanagh
Author Amanda Kavanagh

Much like the best restaurant service, great UI design is invisible. Good service in a restaurant is attentive without being intrusive; water is deftly topped up, cutlery is quietly replaced and timings are unremarkable. The same principles go for UI menu design; it must be quietly smooth. It should work so seamlessly that a user can predict what happens next. Great UI design makes intuitive sense.

This forms a large part of the guiding principles behind the restyling of Flipdish web ordering UI design improvements that are currently being rolled out. And while great UI menu design looks effortless, many months have been spent in the research and empathy phases, plus designing, testing and refining to ensure simplicity and ease for users of Flipdish-powered digital ordering.

Our objective was to create a timeless design that maximises the use of clean lines, white space, to provide a modern look and feel for your customers.

Here are nine of the design principles behind our new UI design:

1. Always ask: what can you remove?

It's always tempting to add more features and visual cues to improve the customer experience, but as with many things, less is often more. Start with the data. Remove functions customers aren't using or can’t use, or move them to less prominent spaces. Cut unnecessary elements, icons and colours. Reduce the amount of copy a user has to read, and the steps they must take to complete an action or checkout.

2. Identify and address pain points

During the empathy phase of a design sprint, you can really get to grips with what customers want and don’t want, like and don’t like. Some of this can be hard to hear, but armed with this intel you can begin addressing the issues, taking away the unnecessaries and simplifying the process. There’s a reason why the most successful online brands spend so much time and resources on customer research; it leads to increased conversion.

3. Grids and consistency help scannability

Remember the web pages of yore? And by yore, we mean the nineties.
Patterned backgrounds, animated navigations, looping animations, chaotic side bars, gaudy hyperlinks, tons of text and many multiples of fonts were all the norm. It was information overload. Today, we don’t read websites word for word and often ignore the side bars of sites. Scannability is a top priority, so organised grids, less copy, consistent price and text placement, larger imagery — including thumbnails and more rigid alignment all make for clean interfaces that are easy to scan and reduce customer bounce.

A predictable experience is proven to ensure customers convert. Our tiles and buttons have been updated and are easily identifiable, meaning your customers will automatically know what to expect.

4. Use subtle sectioning

There are many ways to divide and group information, from borders, colours, lines and font changes, but one of the simplest and most modern ways is through white space. Combined with large imagery and using different font sizes and subtle colour changes, this is a clean and unobtrusive approach to sectioning and grouping. It is easily legible, and as Flipdish data shows, use of clear unobstructed images improves average order value by up to 10%.

5. Reduce the amount of screens in your flow

For increasing conversion, it’s important to shorten the user journey. The trick is balancing the capturing of necessary information, while also limiting the number of screens. Modal windows on desktops mean a user isn’t taken out of context. These are ideal for sub tasks, like choosing a pizza size, and keep customers on the right path to conversion.

6. Think vertically

Responsive design means websites can adapt to mobile devices seamlessly. However, a whopping 84% of all Flipdish customer traffic is mobile, so we lead with mobile and app-first design. For example, dropdowns for selecting addresses is not native to mobile devices, so in our redesign, we have included a simple address entry field with a native full-screen overlay. Look at what devices your traffic is coming from and make a call that’s best for your business and customers.

7. Beta testing is everything

It's important not to get too attached to prototypes. Usability testing alters and rebuilds the products you have created. Through beta testing with some of our forward-thinking customers across different markets, we test user flow, features and timings. We find out if the terminology we use makes sense. We pinpoint areas for improvement. We evolve beyond prototypes and create customer-centric products. We begin again, over and over, until it’s right. The final product generally looks nothing like our original prototype.

8. Keep your most important real estate for the most important thing

When a customer logs in to your web ordering site, they should be greeted with the most important thing. For our customers that is the food. Ideally, these will be your profitable and popular menu items, featured with strong food photography. In our new design, menu categories are still important but now stick to the top so that they are always available, without being the star attraction.

9. Simplify customer login

Once again, we’re back to making it easy. A simplified and intuitive login ensures you quickly capture your customer details, and move them along to start placing an order. Our UI redesign allows your customers to login with a four-digit code, which is sent to their mobile for easy input.

Flipdish’s new UI design is being rolled out to all customers in early 2022, and is available to new Flipdish customers right now. If you're an existing customer seeking more information, please contact your customer success manager.