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.
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.
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.
UX and UI process
Familiarise myself with the existing app and website and define the strategic goals for the redesigned site
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
Analyse the apps and websites of competitors and industry peers
Define the IA and understand the current user journeys
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.
