arrow arrow-2 arrow-2-right LinkedIn Behance Treehouse cv Email Options Share Twitter

BonAffR

About

BonAffR (pronounced "bon affair") is an app concept aimed at providing discounts to students in higher education in Toulouse, France.

The student-run company needed a brand and a mobile app UI in order to market the discounts which local bars, caf├ęs and restaurants wanted to offer through the service. They wanted a modern, eye-catching and youthful logo and UI design which would appeal to their target audience.

In addition, they wanted the app to display nearby discounts, discounts sorted by hand-picked themes and recommended discounts.

Branding

#FEA5AB
#FEA5AB
#FE737D
#FE737D
#FD4B58
#FD4B58
#FC2535
#FC2535
#FB0012
#FB0012
#AEFAA2
#AEFAA2
#82F670
#82F670
#5FF248
#5FF248
#3EEC22
#3EEC22
#1FE400
#1FE400
#E8FEA4
#E8FEA4
#DBFC73
#DBFC73
#D0FB4A
#D0FB4A
#C5FA25
#C5FA25
#BBF700
#BBF700
#F8A1E2
#F8A1E2
#F16ED1
#F16ED1
#EB45C1
#EB45C1
#E221B2
#E221B2
#D500A0
#D500A0

The team required both a memorable mark, suitable for use as an app icon, and a logo containing the app's name.

A mark incorporating a large "B" with a map marker inside was settled upon, communicating both the name of the app as well as the location-based nature of its services. This idea was then further expanded to create a logo containing the "BonAffR" name.

A youthful and eye-catching complementary red / green colour scheme was chosen, with the red communicating a desire for a rewarding discount, and the green conveying the harmony felt once the discount has been enjoyed. The hues of the green and red were checked to be distinguishable by users with red-green colour-blindness. This palette was expanded to a tetrad colour scheme to create a more colourful app UI, incorporating pink and light green as well - another complementary colour pairing.

The font Comfortaa Light was used for its thin gylphs and its contemporary, stylish curves.

UI

Home Screen
Nearby Discounts
Discounts by Category

The UI was created using principles of flat design - a modern and minimalist approach which favours bright colours, open space, crisp edges and two-dimensional vector graphics. The resulting design was very colourful, eye-catching and contemporary, and was believed to suit the app's target market well.

Each of the app's 3 sections had its own associated colour. Each discount category's tile used a unique tint of one of the scheme's base colours. This followed through to the "nearby discounts" screen, with each map marker's colour representing the category of discount being offered at that location. The colours of the green spaces and buildings on the map were also changed to match with the colour palette. Vector icons were included to illustrate each section or category.

"We worked with Chris during the developmental stages of our app, BonAffR. Whilst we were only able to give Chris indeterminate specifications initially, he worked with us attentively and delivered well thought-out final designs within an extremely tight time-frame.

The quality of his designs, together with his meticulous approach and flawless attention to detail, made working with him an extremely rewarding experience. The designs exceeded our imaginations and remain an integral part in the success of our product. Thanks Chris!"

Kirsty, Frantrepreneur