We love a good app project at Distil. Recently, we worked on a web app design and development project that was built to aggregate all your favourite vegan, vegetarian and organic restaurants and whole food suppliers into one convenient and easy to use search tool.

The Loco.life app leverages the Yelp and Google Maps API’s to serve their customers with dynamic and user-generated information to help them find the perfect place to shop or dine. The apps design follows best practices to onboard, engage and serve value to its users with special attention to the user experience.

App design and API integration are the two most important ingredients that combined to make the loco.life web application such a successful project. Our design and development team took a great deal of design principles away from the creation of this app. These included:

  • Setting expectations early that the application must be responsive and intuitive to user interactions. A loading icon is used to give the user a prompt that their input has been recognised and the page is rendering.
  • The design of the home screen is simply a background image and a single search input field. This allows the user to immediately understand that they need to enter a post code or suburb to progress. Already the user is learning by doing.
  • Search is the fastest method of discovery, it’s relevant and already personal. Search filters available to open in the top left hand corner at all times.
  • The filter screen is task-orientated and logical. This restricted navigation keeps the user focused on the task at hand.
  • Radio button tick filters are touch sensitive and filter elements that inherit the native UI components of all the varying devices. For example, the kilometre radius drop down menu prompts the native spinning selector.
  • On the results page, screen space is limited on a mobile device. We addressed this by ensuring highly relevant restaurants are displayed first.
  • The use of icons and a splash of the brands colour palate is used to reinforce the brand identity. There are few navigation options to encourage users to continue exploring.

web app design

  • The CTA and friendly copy prompts users to change the filters to increase the results with a single touch without the need to go back into the filters. For example, “24 more results in a 20km radius”. The app design reduces dead-ends and provides no or limited results with alternatives.
  • The Results page lists the restaurant/ stores in proximity to your search or location. The results are listed based on proximity with the nearest to you at the top. Helper text makes it clear how many options you have in a friendly and helpful manner – “10 awesome places nearby”.
  • Restaurant description is easy to scan. An image of the food, a type of restaurant/ store tag (ie ‘Vegan’), the address, customer star rating and the amount of Yelp reviews are all above the fold.
  • Once the user has clicked on the individual restaurant store, the header image is one of the uploaded photos to give the user an instant assessment of the type of food available. At this level, it gives the user the ability to continually scroll through the information in a logical order – photo slideshow (because the user really just wants to see pictures of the food), a Yelp review snippet is pulled through (because we all value our peers evaluation over that of anyone else), access to contact details (phone number, address, website and opening hours and a clever dynamic “Open Now” sign. At the bottom, the restaurant/ store is dropped as a pin on Google Maps.
  • By allowing the customer many further research elements, such as reviews and image galleries, this easily accessible self-serve content will keep the user within your platform through this reassurance period.

web app design

Staying on top of best practice web app design and development is imperative as consumer demands, device software and the way we all use and behave across web, tablet and mobile evolve each day. Good design is as much about functional design than the more obvious design look and feel. if you have a web or app idea that you need to chat to a design & UX team get in touch through our contact form, give us a phone call or come visit us at our (Manly) Sydney office.

More web app design info

Why dis//til

dis//til fills the gap between web publisher, systems integrator and digital marketer. Nothing we do is guesswork. Whether it be design, development or digital marketing - we gather, analyse, collaborate and output hard hitting work.

Stalk us

Latest tweet

@plumrocket is 'Auto Invoice Extension' for Magento compatible with 1.9.3 community ?

Back Alley 1/24th of a mile: http://t.co/fPNNkWRmgl via @YouTube

#Magento merchants should be doing more to optimise their online storefronts http://t.co/fR5HW4vq8m try @hotjarhttp://t.co/lBjfZvZFYk

Instagram

  • Darcy Jumper
  • Manly Skate Comp
  • Mad Mex Burrito Challenge
  • Birthday Boy
  • Footy Photo
  • Coasters FTW

We love the filters @distildigital

  • Flower
  • Edge
  • FitnFast
  • ATOM

Work with us.

Let’s grab a coffee, have a chat and find out how we can help you.

Let's Talk
Sadly, your browser is out of date!

Click the button below to check out newer, awesome options. Update my browser now

×