boba rays
crafting an immersive journey of drink ordering and rewards, reshaping tradition. I navigate the path to effortless orders and seamless navigation, culminating in an app that embodies aesthetics and user-friendliness.
software
figma ■ illustrator
deliverables
app design ■ branding
skills
interaction design ■ branding ■ illustration
the order status page is playful and showcases brand's nature with fun illustrations and detailed status report. the progress bar clearly shows every step of getting the order. the time countdown is the most important part of this page eliminating the need to look for the time when the order is getting ready.
key screens.
the home page is personalized and inviting with easy to navigate interface that includes many different sections without making the user scroll. upon opening the app, you have 4 different sections: weekly deels, news blocks, point system and redemption, as well as the choice of drinks.
the horizontal navigation makes it easy to quickly check out different section of the page. this eliminates the need to tirelessly scroll down the app.
software
figma ■ illustrator
deliverables
app design ■ branding
skills
interaction design ■ branding ■ illustration
timeline
spring 2023
basking in boba rays:
designing journey towards smooth ordering and rewards
the intro.
boba shops are rising in popularity and are becoming a go-to after dinner destinations. getting boba as your "something sweet" has become a social experience of post-dinner gathering in a relaxed space. as these spaces grow, the demand for the smooth ordering and range of rewards grows with them. the motivation behind this project was to offer users more than just an app but a portal blending efficiency, loyalty rewards, intuitive design, and visual aesthetics.
sketching + ideation.
brainstorming the best features to add to the app design including the staples from other drink ordering places and things that might be missing. creating ample space for breathability and readability while thinking of ways to make the app have enough components.
typography.
the chosen font for the main text throughout the app is modern and user friendly. it stands out amongst regular body text typefaces without taking away from readability. the logotype typeface is bold, funky and playful matching the energy of the app.
logotype + logomark.
the logo is playful depicting both parts of its name "boba" and "rays". the sunshine is a logomark replacing the letter O and the circles around the letters are made to look like boba pearls.
color palette.
with the chosen color palette, the intention was to bring out vibrant, sunny and positive energy of the brand. colors are mimicking the nature of the summer with its sky and sunshine color matching.
visual identity.
intuitive design
navigating Boba Rays app is meant to be fast and easy as the customers coming into the shop are looking for a quick turnaround. the goal was to create clear categorizations, carefully curated menu, and an intuitive navigation pathway. simplicity led to elimination of unnecessary questions.
aesthetic pleasure
current landscape of boba ordering apps shows that aesthetics are not of the highest priority due to resource constraints and primary focus on functionality rather than looks. less visually refined apps struggle to portray the quality products they are providing. with evolving demand in boba shops, businesses need to consider enhancing aesthetics helping both user experience and overall business appeal.
smooth ordering
streamlining boba ordering by eliminating the common pain points in regular ordering methods. the user-friendly interface guides user seamlessly from menu to checkout with the help of categorized menu, ease of tailoring customized drinks and plethora of payment options.
loyalty rewards
beyond the immediate satisfaction of a great boba tea, users would be more likely to return due to the enticing loyalty program. each new order contributes to a rewards journey that reminds one of a game. unlocking exclusive perks, discounts, and merch creates a relationship between users and the business.
the goal.
key takeaways.
-
Immersive Ordering Experience: Design the app to provide users with an immersive and engaging journey from start to finish. Utilize visually appealing graphics, animations, and storytelling elements to enhance the ordering process and create a memorable user experience. Incorporate features such as vibrant menu layouts, interactive customization options, and dynamic reward tracking to keep users engaged and motivated to explore the app further.
-
-
Seamless Navigation and Tradition Reshaping: Focus on creating a seamless and intuitive navigation flow that simplifies the ordering process while also reshaping traditional expectations. Implement innovative features such as predictive search functionality, personalized recommendations based on past orders, and gamified elements to make the app both enjoyable and efficient to use. By seamlessly blending tradition with modern convenience, the app can attract users while also differentiating itself in the competitive boba market.
-
-
Gamification of Ordering Experience: Integrate gamification elements into the ordering process to enhance user engagement and satisfaction. Incorporate features such as loyalty programs, achievement badges for trying new flavors or reaching spending milestones, and interactive challenges to incentivize frequent usage and exploration of the app. By gamifying the ordering experience, the app can transform routine transactions into enjoyable and rewarding interactions, fostering customer loyalty and retention.
01.
gamification enhances ordering experience
integrating gamification elements into the ordering process enhances excitement and satisfaction while fostering customer retention, which is crucial for business success. features like loyalty rewards, achievement badges for trying new flavors or reaching spending milestones incentivize frequent usage, word of mouth, and exploring of the app.
02.
visual progress tracking boosts motivation
incorporating visual progress tracking, such as progress bars, helps users visualize their advancement in loyalty programs. this motivates continued engagement and reinforces a sense of achievement, improving user satisfaction and loyalty.
03.
pleasing visuals improves user experience
visually appealing design elements throughout the app create a more enjoyable experience for users. vibrant colors, attractive graphics, and intuitive layouts capture users' attention while making navigating the app a pleasure. the app creates a positive first impression and encourages users to explore further, ultimately driving engagement and loyalty.
04.
smooth flow = smooth user journey
seamless and intuitive user flow throughout the app simplifies the navigation process and enhances the overall user experience. browsing rewards then redeeming them, every step should be intuitive and effortless, minimizing friction and frustration for users.
turning every sip into the adventure:
gamify, engage, retain.
gamification of the ordering experiences infuses elements of gameplay into the app. through rewards, challenges, and progression, users are incentivized to engage with the app regularly, earning points, unlocking perks, and advancing thowards better rewards. not only increasing user retention but also fostering a sense of community. ultimately, gamification is a powerful tool for elevating user engagement and loyalty, creating lasting business results.
refer-a-friend feature incentivizes users to spread the word about our app by offering points or rewards for each successful referral. tapping into users' social networks leverages their connections to expand our user base organically while rewarding existing users for their advocacy.
the Boba Rays app features a transparent rewards system, clearly outlining rewards, redemption details, and progress tracking. users have easy access to comprehensive information about rewards, empowering customers to make informed decisions.
intuitive progress bars visually represent users' advancement, motivating continued engagement and fostering trust and loyalty.
the process behind the flow chart included researching pre-existing ordering apps in search of pros and cons of the ordering process. navigating smoothly from point a to b was the main goal. boba rays was meant to be inviting, up-to-date and warm application from branding down to every button.
filtering the menu in search of the exact product needed and easy payment process relied on easy 2-3 step procedure to make the decision and ordering an easy experience.
flow chart.
turn every sip into the adventure: gamify, engage, retain.
gamifying ordering experience:
wireframes.
the original layouts of the product were heavily reliant on clean and not overwhelming layout leaving space for the photographs and illustration that were to come in the next steps.
design system.
components ■ iconography
intuitive design
navigating Boba Rays app is meant to be fast and easy as the customers coming into the shop are looking for a quick turnaround. the goal was to create clear categorizations, carefully curated menu, and an intuitive navigation pathway. simplicity led to elimination of unnecessary questions.
modern and simple
the iconography was to be simple and clean to contribute to the user-friendly purpose of the app. the icons consist only of few strokes keeping minimalistic aesthetic and giving up the focus to the more important details, such as menu and images.
the colors red and yellow are both primary colors that, in this case, complement each other to create a warm space. red colors stand out against yelllow and beige background, as well as working well with the ocassional blue background imitating the sky.
logo ■ typography ■ colors
design system.
check out some
MORE STUFF
packaging design ■ branding
branding ■ promo ■ social media
events ■ branding
.png)