Overview:

A local coffee chain, Colectivo reached out in hopes to improve and promote their rewards and loyalty program better on their app. Additionally, Colectivo wanted to improve their overall user experience through any means possible. In return, they hope to increase user engagement and sales.

With this and through a collaborative effort, I was able to offer recommendations through an audit, create wireframes, and come up with the overall design of the website.

Role: UX Designer

Time Frame: 3-6 Months

Tools Used: Figma & Google Doc

Colectivo Coffee Rewards & App Improvements

Problem:

Studies show that 68% of consumers would join a loyalty program from brands they like. With coffee shops and competitors such as Starbucks who have a loyalty and rewards program in place, Colectivo saw an opportunity to expand their expand and increase their customer engagement by adding their own loyalty and rewards program. Their question was, how do we implement and design the loyalty and rewards program seamlessly through the app? Also, how could we improve the overall structure and flow for a better user experience?

[2b. Wireframing and Design: Checkout Process and Shopping Cart]

Next, I focused on improving and enhancing the checkout process and shopping cart. I did this by adding recommended items as to encourage more sales and cross promoting items. I also changed the "use points" button color to be more prominent and adding a line of text indicating how many rewards points exist, further promoting the loyalty and rewards program. Lastly, I tweaked the layout a bit by moving some elements and text around such as the item subtotal.

On the home screen, I took inspiration from apps such as Starbucks and Chick-fil-a and added a rewards meter at the top. This helps promote the reward program, helps users keep track of their points, and gamifies the experience. In turn, increasing user engagement.

Additionally, I added a rewards button at the bottom and in the menu which wasn't present before and improved upon the rewards information screen by adding the rewards meter.

[2a. Wireframing and Design]

From my recommendations, the client approved working on two things: better promotion of the rewards program and the modifying the shopping cart for better ease of use.

With this, I began with the iterative process of wireframing and designing. I wanted to focus on one of the clients important goals, better promotion of their loyalty and rewards program. Through the audit I learned quite a few things, but most importantly I learned that not many people knew and utilized the loyalty and reward program. Therefore I began with working on one of the most important screens, the home screen of the app.

[1b. Building Context: Opportunities]

From there, I compiled all of my finding into areas of opportunities to improve the Colectivo App through recommendations. Below are a recap of some of the Recommendations.

Promotion Recommendations:

Give greater emphasis to rewards status and points + program by replacing the inbox icon/badge with rewards points and badge; Renaming “Inbox” to “Offers” (assuming they are intended to mainly be offers); and changing homepage layout to lead with Reward program section.
Use more places to highlight new products, features and promotions (example: pop-up alert on app open, embed promos elements on other screens, and callouts to encourage users to try the feature.)

Ease of Use Recommendations:

Add ability to favorite products.
Reorder layout of cart to give users a way to add more to cart. In turn, encouraging users to browse longer with the possibility of increased sales.
Improve product browsing by reordering and restructuring the product pages.
Add more visuals and illustrations. Pleasing imagery or a product may help increase sales.

Brand:

Bring animation and videos to the home screen.
Add a personalized welcome message on the home screen.
Give useful or interesting content to customers such as
- Staff favorites
- Where to park
- Instructions for pickup

General Improvements

Adding feedback mechanisms such as comments or "rate your experience", so that other users can weigh in, giving a sense of community.
Richer experience after customer submits order
- Ex: Using geolocation w/ progressive display of relevant content &
  automating status changes, map showing customer’s location and cafe while en route, and even instructions for checking in or locating your items if pickup.

[1a. Building Context]

To understand the rewards and loyalty program and the coffee industry, I began with doing a thorough app audit of Colectivo and it's competitors. For reference I focused on:

Colectivo
Starbucks
Stone Creek
Blue Bottle Cafe

Additionally, I looked at two other brands outside of the coffee industry to understand their rewards and loyalty program - Sonic and Chick-Fil-A.

That said, as I was auditing each app, I was taking notes on any app opportunities. In conjunction with that, I took screenshots and did a side-by-side comparison of each app based on the following:

Brand &Story
Rewards/Loyalty Program
Favorites and Reorder
Cross Promo
Find A Cafe
Find Products
Product Info + Customization
Cart

Process

Outcomes

- Elevated Customer Loyalty: I updated the design for Collectivo's coffee app, specifically for their brand-new rewards program. This initiative aims to increase user engagement and build customer loyalty through a seamless and rewarding experience.

- Intuitive Navigation, Seamless Interactions: Through user-centered design principles, I crafted wireframes and visuals that offer clear visual layouts and smooth interactions. Customers can effortlessly track their progress, redeem rewards, and feel valued with each purchase.

- Boosting Brand Affinity: My focus on user delight ensures a positive association with Collectivo's brand. The intuitive rewards program, through its engaging design, encourages repeat app usage and strengthens customer relationships.

Better promotion of their rewards program
Grow cafe transactions
Provide excellent ease of use, particularly for Find a Cafe, Finding Products, and Order/Checkout flow
Encourage repeat visits (through enjoyable and effective experience)
Find opportunities to position brand effectively

Goals

Takeaways

- Designing for both functionality and engagement: As this was my first official mobile application project as a UX designer, this project taught me how to strike a balance between meeting business objectives (increased loyalty, brand affinity) and creating a delightful user experience. Rewarding interactions and personalized features contribute to both user satisfaction and business success.

- The Power of Iteration and Collaboration: Through multiple wireframe and design iterations as well as collaboration with stakeholders, I learned the importance of continuous improvement and adapting to feedback. This process ensures the final design is not only aesthetically pleasing but also optimized for user flow and engagement.

See what you like? Let's Connect.

See what you like? Let's connect.