UIUX | INTERACTIVE DESIGNER | TECHNOLOGIST
AFTERWORD ARTISAN BAKERY
Google UX Design Practice - Customer Loyalty Platform Design
Click on image to try out the prototype!
AFTERWORD Artisan Bakery(2023)
Google UX Design Professional Certificate
Customer Loyalty App Design
During my study of UX Design through Google Professional Certification, one of the asks was to design an app based on a prompt given through Sharpen.
THE ASK:
With the rise of so many cafes and bakeries, the fight for customer loyalty today is a real problem. Customers’ loyalty is wavering in the face of inconveniences they experience when patronising a bakery. To stand above the rest, the services provided in exchange for loyalty needs to be of greater value.
WHY THIS:
As an avid fan of spending time in cafes doing idle work whilst basking in the atmosphere of coffee fragrance and clinking coffee mugs, I took upon myself to address the question of what a customer would want in an app. What would entice them to want to consistently use an app and patronise an establishment?
On the other hand, I was also someone who was not truly attracted to the concept of a customer loyalty app. As a result, I became my own difficult customer. What would entice me to use a customer loyalty app? What would make me feel that it is not a hassle to use the app? How can a customer loyalty app get its level to that of social media apps, where people are mindlessly checking the app every single day?
This prompted me to recall other e-commerce apps that encouraged frequent usage for benefits- Fairprice, Shein, Uniqlo, Grab and McDonald's. Their similarity stemmed from the frequent promotions, points rewards program, ease of navigation and pleasing aesthetics. It was very easy to get a task done, and the discounts offered were of good value. In contrast, interfaces such as PayLah! and Shopee turned me off, as it was difficult to navigate through the clutter and didn't offer much to me. I would only visit those apps if I had something I truly needed.
With this in mind, I decided to create a one-stop app that would provide customers great value when they visit the app while maintaining a pleasing aesthetic on the interface. It had to make customers feel exclusive and good when they visit the app, as though they are on a level higher than those who did not use the app. The website and apps would serve different purposes, with some features overlapping for the customers' convenience. These features include placing reservations, making online orders and checking out the menu.
Afterword Artisan Bakery (Desktop & Mobile browser)
<Afterword> is an imaginary artisan cafe-bakery with products priced at mid-high range. "Afterword" refers to the time after the story has ended, allowing customers to have peace or rest during this lull. The "story" refers to the busy daily tasks they have to complete during the day.
In this scenario, the bakery was located in three different locations, where customers could choose to dine-in with the vast selection of F&B or choose their favourites to takeaway. To increase footfall, they decided to develop a customer loyalty app, serving as a one-stop platform which rewards its customers for patronising the bakery. The goal of the customer loyalty app is to provide a one-stop solution for customers when they wish to patronize the bakery. Many features have been added to the app, not just for tracking customer loyalty but to also provide convenient access to the bakery’s services.
To get started, I came up with 2 personas to understand what kind of audience I would be dealing with. I also came up with their potential user journey flows to analyse the potential problematic touchpoints with the current customer journey.
A competitive audit was also conducted by comparing a few competitor’s platforms. This gave me further inspiration on what customers might want on an application, and told me the gaps these apps had that I could cover to be unique. I decided to look at successful brands with competitive or comparative advantages- Starbucks, Chateraise, PAUL Boulangerie Patisserie and Keisuke Ramen. It was an interesting read into what the food industry had to offer, as these brands had significantly different styles of brand identity. Through the initial desktop research, I took several steps to brainstorm for ideas on how to proceed.
I ran really quick storyboard sketches on the potential customer flow I was keen to create. These storyboard sketches consisted of a "Big Picture" view where I pictured the actual circumstance a customer might find themselves in, and a "Close-up" view where it shows her actual user actions.
I brainstormed for potential layouts I could explore for the interface of the app. Through these mock wireframes, I decided which were my favourite features and decided to incorporate them into the final construction of the app.
Sitemap (First iteration)
A site map was also established next, where we could dissect exactly how the multitude of functions would be grouped up. This would later be re-jiggled after observing how customers would interact with the app based on their respective goals.
Low Fidelity Prototype (App)
Once my ideas were further firmed-up, it was time to launch a low-fidelity prototype to see if my assumptions held true. I worked on a second draft after improving upon the first draft based on feedback shared by my potential target audience. I managed to uncover potential task goals, needs and pain points to map out my opportunity space. These consisted of things I didn't realise would end up being a road block, and also the little things I failed to address due to oversight. There were also things I assumed customers would like to have, but ended up becoming useless clutter in the app. An affinity diagram was created after clustering findings from customers.
Some of my findings included:
1. Current options provided for online order are not sufficient
2. A need for an easier and faster way to fill up information
3. A need to be aware of cart selection prior to checkout
4. Feelings of restriction regarding how the menu categories are currently structured
5. A need for clearer definition between what a membership and profile page entails
6. A need for an easy and convenient way to check for their availability (reservation)
Low Fidelity Prototype (Web)
The same was also done for the web version of my customer loyalty platform. After finalising the features I wanted to come up with for the app, I came up with an improved prototype alongside a sticker sheet which indicated the colours, typeface and button styles for the app and web.
Sticker Sheet (Web)
Sticker Sheet (App)
With my styles and features in place, I moved on to create the high-fidelity prototypes for both the app and web version of my customer loyalty platform. The web version had both a desktop and mobile view. This activity was a good challenge for me as it was an ask I was unfamiliar with, and it was interesting to see how my ideas went wild to complete this within 2 weeks.
High-Fidelity Prototype (Desktop Web)
High-Fidelity Prototype (Desktop Mobile)
