Mugg & Bean Home Screen Update

Yoyo Group has been responsible for the Mugg & Bean App since 2018. The app features 'Pay & Earn', where users can earn loyalty points when they use their linked card through the app. Users can also order ahead of time at various physical stores and can also purchase coffee subscriptions.

🤔

😎

Yoyo was approached by Mugg & Bean, a popular restaurant franchise in South Africa, to update the current mobile app home screen.

This was the first major home screen refresh Mugg & Bean has requested since the launch of their app. Working together with our account managers and the Mugg & Bean team, we assessed what wasn't working for the brand anymore and what needed to now be included.

The old home screen featured a visual 'bean balance' within a coffee cup illustration, which Mugg & Bean felt had aged in the last few years, and the explanation of the bean balance was quite wordy and didn't convey a very simple action. 

Along with the home screen facelift, we updated the burger menu that pulls out from the right side of the screen. Below also shows how the 'WHAT'S NEW' looks when the tab is pulled up.

Contribution & Output

UX Design

UI Design

Mobile App Design

The main updated to the screen were removing the coffee cup graphic and rather including a simplified loyalty/bean balance. 

The new home screen required a navigation menu to be added to easily display the features of the app. The 'WHAT'S NEW' section has been added and functions with vertical scrolling; the user can scroll down and see the articles with ease. 

Get in touch

amydenisefrost@gmail.com

+31 62 975 6585