BlueTokai Coffee
Blue Tokai Coffee Roasters is revolutionizing India's coffee culture. With a mission to introduce customers to meticulously sourced and roasted beans, they emphasize transparency from farm to cup. In a nation known for tea, Blue Tokai has carved a niche as a leader in specialty coffee, offering a distinct and high-quality alternative through cafes and online platforms.
Brief Received:
The design brief received to revamp the Blue Tokai Coffee website, addressing current challenges in user flow and conversion rates. The existing platform lacks clarity, leading to a drop in user engagement. The primary goal is to enhance the overall user experience, optimize conversion rates, and introduce a dedicated shop feature for seamless navigation and product discovery. The designer will be tasked with conducting user research, restructuring information architecture, implementing visually appealing designs, and integrating a user-friendly shop feature. Collaboration with the Blue Tokai Coffee team is crucial to align the redesign with brand guidelines and business objectives. This project presents an exciting opportunity to contribute to the transformation of Blue Tokai Coffee's digital presence and create a more immersive and user-centric platform.
Design Challenges Identified After UX Audit
User Location Access: Overcoming user reluctance to share location access and providing an alternative method for users to manually select their cafe location or delivery address.
Order Tracking and Ratings: Implementing a comprehensive order tracking system for both cafe and roastery/website deliveries, along with a post-delivery rating module covering various aspects of the order experience.
Home Screen Redundancy: Addressing the lack of use case on the current home screen and redirecting users to it upon app launch, while also considering the challenge of redirecting without selecting the order type.
Menu Optimization: Improving the decision-making ability of users through an optimized menu, including filters, tags, and a grid view for faster selection. Also, enhancing search functionality for a more intuitive experience.
Cafe Selection and QR Code: Streamlining the process of selecting a cafe after choosing the dine-in option, introducing a dedicated cafe screen with a QR code scan feature for a smoother ordering experience.
Multiple Orders on the Same Table: Enabling multiple users to place orders on the same table by scanning the same QR code, overcoming the challenge of users being unable to place another order after relaunching the app.
Referral and Loyalty Points: Integrating a referral code system for earning loyalty points, ensuring effective communication touchpoints for loyalty points, and displaying coupon codes along with loyalty points during the checkout process.
Profile Screen and Shopping Cart: Enhancing the profile screen to include essential user information and loyalty points, and optimizing the shopping cart by displaying "Pick Up Cart" and "Shop Cart" options based on user preferences.
View Cart Feature: Encouraging users to complete purchases by reminding them of items left in the cart, thereby increasing cart size and value through suggestive selling/upselling.
Checkout Process Optimization: Streamlining the checkout process with recommendations, last order, and favorites features, and displaying loyalty points or applying coupons with cart details for a more user-friendly experience.
Loyalty Point Journey: Providing a quick loyalty point preview in the top bar and optimizing the loyalty point journey within the profile, with cross-selling options to enhance user engagement and satisfaction.
Expired Offers and Positive UX Writing: Managing expired offers through visual cues and positive UX writing to guide users effectively, increasing the chances of continued interaction with the platform.
Estimated Time of Delivery: Displaying the estimated time of delivery to assure users that their orders will arrive within the specified time limit, enhancing overall satisfaction.Solutions
Feature Scoping After Competitor Analysis and Inspiration
Location Access Solution: Allow users to manually select cafe locations or delivery addresses if they choose not to share location access.
Order Tracking and Ratings: Comprehensive order tracking for cafe and roastery/website deliveries, and a post-delivery rating module covering various aspects of the order experience.
Home Screen Redundancy: Redesign the home screen to serve a practical use case and make it the default screen upon app launch.
Menu Optimization: Revamp the menu with filters, tags, and a grid view for faster selection, and optimize search functionality.
Cafe Selection and QR Code: Streamline cafe selection after choosing dine-in, introduce a dedicated cafe screen with QR code scan feature.
Multiple Orders on the Same Table: Allow multiple users to place orders on the same table by scanning the same QR code.
Referral and Loyalty Points: Integrate a referral code system, communicate loyalty points effectively, and display coupon codes during checkout.
Profile Screen and Shopping Cart: Enhance the profile screen with essential user information and loyalty points, optimize the shopping cart with dual options based on user preferences.
View Cart Feature: Remind users of items in the cart to encourage completion of purchases.
Checkout Process Optimization: Streamline the checkout process with recommendations, last order, and favorites features.
Loyalty Point Journey: Provide a quick loyalty point preview and optimize the loyalty point journey within the profile.
Expired Offers and Positive UX Writing: Manage expired offers visually and use positive UX writing for user guidance.
Estimated Time of Delivery: Display the estimated time of delivery for user satisfaction.
Final Design:
The final design turned out to be much better than we all expected. We were really proud looking back at all the iterations we made before and simultaneously looking at the final piece we had created.
