FB mobile header.jpg

Frankie & Benny's app and website

The existing Frankie & Benny's interface wasn't providing users with a quick and easy-to-use experience so an overhaul was needed in order to improve user satisfaction and therefore increase bookings, takeaway orders and menu views.

One of the main UX challenges was to reduce cognitive load. This was achieved with a cleaner, less cluttered layout with more white space and prominent imagery to break up the text. A tap bar was added to make navigation simpler and enticing food videos were also incorporated to create a more immersive experience.

FB_Mobile_Intro x2.jpg
FB mobile nostalgia.jpg

Research revealed that in order to improve brand affinity it was important to communicate the sense of togetherness and nostalgia that Frankie & Benny's had neglected in their branding in recent years. To achieve this, both modern-day and vintage B&W lifestyle photography were incorporated into the designs where appropriate.

Users were finding the existing food menus (below) time-consuming to navigate as they were designed in an accordion format. This caused frustration as there were many different menu types and sections to expand. 

The new designs addressed this with a single dropdown for menu type and easy-to-use swipe navigation for sections.

old menu.jpg
FB mobile takeaway x2.jpg

Another major UX problem was difficulty in searching for a restaurant (for bookings and takeaways) as there were no maps and limited information about each venue – see below. 

The new designs feature an interactive map, the option to search again without going back and other options that users expected to see, including links to menu and delivery partner sites.

old site search results.jpg
fb-phone-jeans.jpg

UX and UI process

Familiarise myself with the existing app and website and define the strategic goals for the redesigned site

Current site.jpg
Research data.jpg

Study the research and strategy data to identify all relevant and important user and brand insights.

Gain a full understanding of the Frankie & Benny's brand

FB brand.jpg
FB competitors.jpg

Analyse the apps and websites of competitors and industry peers

Define the IA and understand the current user journeys

FB user journeys.jpg
FB wireframes.jpg

Come up with ideas to solve the UX problems then create wireframes and new user flows, Carry out user testing then revise designs based on feedback

Design working prototypes, learn from feedback and iterate. 

Usually, once designs are approved for build, I would create a component library and style guides for colours, typography, icons, imagery, button & link states, sizing and spacing. However unfortunately due to Covid-19 the project didn't progress beyond the design stage. 

fb-takeaway insitu.jpg