Flock Redesign

A progressive UI implemented web + mobile redesign for a health conscious eatery. This project also includes a UX focused case study/ proposal for mobile optimization and enhanced user flow.

‹ Back to Projects

‍

PROJECT OVERVIEW —

Flock Rotisserie & Green is a Toronto Based Eatery known for their nutritious, power-packed, healthy and delicious salads. This project aims to refresh the Flock brand imagery and emphasize their health conscious and clean eating values through a dynamic web redesign. The objective was to create an impactful layout that would allow more user engagement, and improved ease-of-use through the application of progressive UI design principles. The finalized design is driven by an in-depth case study that helped make the necessary improvements on Flock's website for both desktop and mobile mode.

‍

‍

BELOW—Demo of the home page intro animation. Home section features two of Flock's signature salad with a custom rotating button spinning on top of the image. Upon hover, the button will display a search icon which will provide info on product name, and redirect to the salad browsing menu. A direct link to start placing an order can be accessed immediately on the home intro section as well.

‍

BELOW—All sections of the website sits on a one-layered system. Sections of the website includes the following: Home splash page, chicken items menu, boxed meal menu, sandwich menu, salad menu browsing, about, and locations.

‍

‍

BELOW—The salad menu browsing will be the main featured section of the site. Since Salads are the brand's most popular item, having this section easily accessible on the home layer will make it easier for customers to place orders right away. All other sections with a link to "View Menu" will redirect to a new tab with the full menu in pdf format. Below shows a full demo of the signature salad menu at Flock Rotisserie. The "Order Now" link will lead users Flock's online ordering service immediately.

‍

‍

MOBILE + UI OPTIMIZATION —

The redesigned layout on mobile takes on an adaptive mode to better fit and showcase all sections of the single-layered web system. On desktop and mobile, the site's layout retains its responsiveness overall; however, on sections such as the Salad Menu browsing, the layout will adapt to accommodate a fast viewing experience with instant access to place an order. Minor, yet integral adaptive design and layout changes also occur on the home intro page, and several title pages. Below are some of the design adaptations made to enhance user flow, and maintain consistency of the design style, theme and concept.

‍

‍

BELOW—Demo of the home intro animation and scroll through of the full site on mobile mode.

‍

BELOW—Demo of the salad menu browsing experience.

‍

BELOW— First stage drafting, and initial wireframing of Flock's site map.

‍

‍

UI CASE STUDY: Planning & Development & Brand Refresh —

During the planning and developing for the refreshed and redesigned website, a small UI case study was conducted. This study was instrumental as it helped pin-point aspects of the site that needed improvement. The study is an in-depth analysis that outlines the current problems, and then offers various solutions that achieve the objective of a refreshed site that is more progressive, UI conscious, encourages user engagement, and makes it easier to view popular menu items and order within an instant. Below shows the UI case study with small UX principles being applied in the proposal for Flock's redesigned site.

‍