FL_Mockup_DMK_cover.jpg

Flipdish

Flipdish is dedicated to one thing: helping food businesses take orders online, via state-of-the art websites and apps that put your brand first. The new website needed to present the Flipdish product offering to the user quickly and in a way that is easy to navigate, easy to convert and visually appealing.

From the in-depth UX research phase, we found that the existing website had quite some issues when it came to consistency, user flow, clear clickthroughs and form completion painpoints. The goal at each touchpoint was to balance carefully explaining the product and features while ensuring the user had quick access to a demo or signing up.

Role

Lead Designer - UX/UI

Support - Elena Rimeikaite

Live Website

https://www.flipdish.com/ie/

Completed while working at kooba

Key Objectives

Key Objectives

Drive high-quality leads into the conversion funnel.

Position the brand and messaging to attract high-value, multi-location restaurant and hospitality enterprise businesses as well as resonating with single-location restaurants and takeaways

Showcase our full suite of products and services

Deliver an outstanding brand & interactive online experience that reflects the status of the position of Flipdish within the market

FL_UX_DMK_01.jpg
FL_UX_DMK_02.jpg
FL_UX_DMK_03.jpg
FL_UX_DMK_04.jpg
FL_UX_DMK_05.jpg
FL_Mockup_DMK_01.jpg
FL_Mockup_DMK_02.jpg
Design Direction and User Experience

Design Direction and User Experience

With every project, we always start with an extensive UX audit and review before we get to any conclusions or wireframes. The review for analytics had us investigate analytics. This highlighted to us that the audience was 88% new users. Of these new users, we observed a higher bounce rate, reduced pages per session and lower session duration. This gave us an initial idea that engagement and flow on the website were poor. We also observed differences in mobile behaviour with mobile having nearly double the bounce rate and half the interaction. This highlights the difference in experience and ease of use on mobile. Users tend to visit the pricing section the most, but the pricing section is where we are observing the largest drop-off of users.

This set us up for a clear review of the overall mobile experience and key pages that were performing badly. From our in-depth Behaviour review we identified key problems such as issues with a consistent sitewide Text Hierarchy, not identifying to the users what content can be actioned on and in turn having to create an effective click-through system. One of the biggest problems we identified and wanted to fix with the wireframes was ensuring a clear engagement and flow from page to page. This was first evident on the homepage where we can see that this page only includes 3 CTA buttons in total. When we looked further into the website we saw this problem progress even further with the majority of key landing pages including only 2 CTAs. With the wireframes and new UI, we made each page goal and next step clear to the user, not just at the top of the page, but to a certain extent at a module level. The new website and key pages had to let them know at each touchpoint what they should be doing next, or where they should be going next.

When it came to the final UI it was clear we needed to funnel users correctly and ensure they can engage with the right content. After working with stakeholders we identified target groups for users type and ensured all flow from the homepage to talking about the product offering reflected these user groups. This allowed us to describe the product as a whole but give the right users access to the right information and end goal for them.

FL_Mockup_DMK_09.jpg
FL_Mockup_DMK_05.jpg
FL_Mockup_DMK_11.jpg
Innovation

Innovation

The design direction for flipdish was a radical new change and the next step for them. Previously they relied heavily on the solid bright blue and a mix of various pinks throughout their button system. Working with flipdish we developed a brand new colour and typographic system that worked alongside their core brand blue and brought it into the digital space. This also followed with a new and improved visual direction for how to display and showcase their product by showing real-life use cases mixed with animations to explain their core functions. With the previous UX change to update how they sell their product into 3 core target groups, we needed a good navigation system that would also reflect these and give users quick and easy access. The new navigation system allowed for a multi-column approach which allowed for animated visuals, links and also featured content for our resources section. This gave users easy and quick access to the right page and in turn a quicker funnelling process to our lead generation page.

This lead generation page went through a massive overall in our UX and design phase. The form design itself brought with it much cleaner inputs balanced always with the key benefits of why they should sign up. We noticed in our UX phase a drop of engagement and repeated refills so to stop this we introduced inline validation to the inputs to let users instantly correct the inputs. The product pages themselves were one of the key drivers for the user wanting to take the next step and 'talk to sales' so we needed to ensure these fit the needs of informing and engaging users.

With so many aspects to the product, we introduced many ways to present information. This included large animated visuals, multi-step information blocks, feature breakdowns and customer case studies. At every touchpoint we always ensure we balanced the primary sales goal with this informative piece. We knew from stakeholder inputs that they wanted to show themselves as industry leaders and they were very active in the thought leadership space in terms of blogs and resources. With the new site, we wanted to enrich and enhance this. Within the resources, we created a one-stop shop for users with browsability in mind. We utilised large and clear content and category filtering to ensure again the different user groups were catered for. All of these design improvements brought the site visually into a more modern and slick direction for Flipdish focusing on white space to let the content be the selling factor. It is a site where we continually help improve and grow.

FL_Mockup_DMK_10.jpg
FL_Mockup_DMK_06.jpg
FL_Mockup_DMK_08.jpg
FL_Mockup_DMK_07.jpg
Results

Results

Looking at analytics and comparing the old site performance with the new site performance we can see that there is a huge improvement on the new website in the 3 week period compared to the same period of the previous year. This is a great indication that our UX improvements are working. There has been an increase in sessions (+201.94%), users (+293.60%) & page views (+247.50%). There has also been an increase in pages per session (+14.44%) on the site. This shows us that engagement on the website has drastically improved with an increase of 61% (9.85 pages vs 6.11). Although this is just data it's a good insight and tell that our CTA system, clear goals and new navigation system is working and enticing the user to click through more. We can also see that the overall average bounce rate for the entire site dropped from 37.54% to 22.29%. This is a great result to see and again indicates that our improvements are having a real impact on users.

One of the biggest indications that the site is now more goal-driven is the improvements we saw to the signup page. We saw a +167.76% increase in page views for this, a bounce rate reduction of -4.74%and an exit rate improvement of -5.5%. All of this is simply within the same 3 week period. Despite the site visually having more animations, graphics and visuals we didn't see any dip in site performance. In fact, we drastically improved it raising the mobile score from 6 to 83 and desktop from 39 to 93 on google page speed insights. Overall the site not only is a great visual improvement but the results clearly show how it addressed our user problems and exceeded them.

FL_UX_DMK_06.jpg