The Challenge
Improving the user experience and interface for one of Brunei's established coffee franchises loyalty programme app.
Tools/Disciples
UX UI Design
Prototyping
Motion Graphics
The Coffee Bean & Tea Leaf is a global caffeine beverage franchise serving in over 32 countries including Brunei.
The franchise is known to have a loyalty programme app where users can scan their unique code upon checkout to receive bean points.
These points can be accumulated for redeeming vouchers for future purchases.
In Brunei a localised version of this app exists as developed by Think Axis Solutions.
As part of their commitment to improve their clients solutions, I had been tasked with improving the UX and UI of the app to improve engagement and usage through users.
Upon reviewing and testing the app, some issues were identified around the UI. These included:
Inconsistent icon styles (some outlined, some filled , some thick, some thin etc)
Low contrast and saturated background making the app feel visually dull
Weather background inteferring with text legibility
Long scrolling menu with heavy copy and lack of visuals
Lack of balanced negative space
Unclear navigation and indications around the app
Taking inspiration from other loyalty apps, websites and examples, I decided to incorporate these aspects to improve the overall the UI and UX of the loyalty app.
Cards
Emphasising visuals and improving legibility of descriptions
Iconography
Contextualised icons used consistently across to portray the brand theme
Visual Hierarchy
Utilising different typography weights and sizes to achieve visual contrast and hierarchy
High Quality Images
Elevating visuals and creating interest from the beverages
Copywriting
Personifying headings and selected descriptions to promote the brand's essence
before
after
before
after
before
after
before
after
before
after